📍 개요
◾ WEB과 HTML의 개념을 학습하고 여러 태그를 사용하여 실습하는 시간을 가져보았습니다.
◾ <form>태그 요소와 CSS를 활용하여 게시글 작성, 회원가입, 로그인, 항공권 검색 메서드를 구현하였습니다.
💡 WEB, HTML 정의
✅ HTML
문서가 화면에 표시될 수 있게 해주는 마크업 언어이며 계층적 트리 구조를 가집니다.
✅ WEB(World Wide Web)
웹은 수많은 문서와 리소스가 서로 연결된 네트워크로
HTML 문서, 이미지, 비디오 등 다양한 형태로 이루어져 있습니다.
✅ 웹 브라우저
HTML 문서를 읽고 해석하여 사용자에게 화면에 표시해주는 소프트웨어입니다.
웹 브라우저는 웹 페이지의 HTML, CSS, JavaScript 등을 처리하여 페이지의 구조와 디자인을 화면에 나타냅니다.
⭐ HTML(Hypertext Markup Language) 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// 브라우저 너비를 기기에 맞추어 표시(모바일, 웹)
<link rel="stylesheet" href="파일명.css"> // 스타일시트 적용
<title>웹브라우저 상단 탭 제목</title>
</head>
<body>
</body>
</html>1️⃣ 시맨틱 태그란?
◾ 사전적으로 의미가 있는 태그라고 정의되어 있지만 무슨 말인지 이해가 가지 않는 분들이 계실겁니다.
시맨틱 태그는 웹 개발을 할 때 HTML 태그 자체만으로도 의미를 지니고 있다는 개념인데요.
🥸 시맨틱 태그의 이해를 돕기 위해 네이버와 당근마켓 홈페이지로 비유하여 설명하겠습니다!
☝️
네이버 시맨틱 태그 분석
✌️
당근마켓 시맨틱 태그 분석
🧐 즉, 페이지의 구조와 내용을 더 명확히 표현할 수 있도록 설계된 태그를 말합니다.
조금 더 와 닿게 설명해보자면 예를 들어, <header>는 페이지의 상단,
<footer>는 하단 부분을 나타낸다는 것을 바로 알 수 있습니다.
반면 시맨틱 하지 않은 태그라는 것은 이 태그가 무엇을 의미하지 모호한 태그들을 말합니다.
각 태그들에 대해서 어떤 상황에서 사용되는지 아래에서 자세히 살펴보도록 하겠습니다.
2️⃣ 시맨틱 태그 종류
| 태그 | 설명 | 사용 예시 |
|---|---|---|
| <header> | 웹 페이지의 상단에 위치 | ✔️ 사이트 제목, 로고, 검색창, 내비게이션 요소 포함 ❗혼동주의! <head> 태그는 문서의 메타데이터를 포함하는 영역 |
| <nav> | 내비게이션 링크를 모아놓은 영역 | ✔️ 현재페이지에서 다른 요소로 이동하거나 다른 페이지로 이동할 때 사용 💭 메뉴, 목차, 브레드크럼 |
| <main> | 문서의 주요 콘텐츠를 정의 | ✔️ 페이지의 핵심 내용 부분 ❗웹페아지에서 1번만 사용 가능 ❗인터넷 익스플로러 지원 불가 👉🏻 <div> 태그로 대체 |
| <section> | 관련된 콘텐츠를 그룹화 | ✔️ 주제나 컨텐츠를 구분 💭 뉴스의 사회면과 연예면 |
| <article> | 독립적으로 배포 가능한 콘텐츠를 정의 | ✔️ 뉴스 기사, 블로그 포스트, 포럼 게시물 |
| <aside> | 문서의 주요 콘텐츠와 간접적으로 관련된 내용 |
✔️ 사이드바, 광고, 부가 정보 |
| <footer> | 웹 페이지 하단에 위치 | ✔️ 회사 정보, 저작권 정보, 관련 문서 |
🙆♀️ 올바른 시맨틱 태그
◾ header, nav, body, main, section, article, footer 태그를 적절하게 사용한 예제입니다.
각각 페이지의 의미를 명확히 나타낸다는 것을 알 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>올바른 시맨틱 태그 예제</title>
</head>
<body>
<header>
<h1>웹사이트 제목</h1>
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
</header>
<main>
<section>
<p>본문의 주제나 여러 내용을 구분</p>
</section>
<article>
<p>본문의 주요 내용</p>
</article>
</main>
<footer>
<p>작성자, 저작권 정보, 관련 문서</p>
</footer>
</body>
</html>
🙅♀️ 올바르지 않은 시맨틱 태그
◾ 해당 예제에서는 모든 구조를 <div> 태그로 감싸서 표현했습니다.
어떤 내용이 무엇을 의미하는지 전혀 직관적이지 않는다는 것을 알 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>올바르지 않은 태그 예제</title>
</head>
<body>
<div>
<h1>웹사이트 제목</h1>
<div>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</div>
</div>
<div>
<div>
<p>본문의 주제나 여러 내용을 구분</p>
</div>
<div>
<p>본문의 주요 내용</p>
</div>
</div>
<div>
<p>작성자, 저작권 정보, 관련 문서</p>
</div>
</body>
</html>3️⃣ CSS(Cascading Style Sheets)
💭 그 외로 궁금했던 사항들
백엔드 개발자가 프론트엔드 개발자와 원활한 협업을 위해서 프론트엔드 영역도 알아야 한다는 사실!
❓<body>, <main> 태그 차이
◾ <main> 태그는 문서의 주요 컨텐츠를 정의하며 문서 내에서 한 번만 사용 가능하며 <header>, <footer>, <aside>, <nav> 같은 요소는 포함되지 않아야 합니다.
◾<body> 태그는 문서 전체의 본문을 포함하며 <main>을 포함한 모든 컨텐츠와 구조적 요소를 가지고 있습니다.
<body>
<header>
<h1>웹사이트 제목</h1>
</header>
<main>
<h2>주요 콘텐츠</h2>
<p> 콘텐츠 내용</p>
</main>
<footer>
<p>저작권 정보</p>
</footer>
</body>❓<section>, <article> 태그 차이
◾ <section>은 주제별로 구분하고 <article>은 독립적인 콘텐츠를 구분합니다.
🧐 어느 태그를 사용해야 되는지 판단이 잘 안될 경우에는
<article> 사용을 우선 고민해보는 것이 좋다고 한다.
👉🏻 단순히 꾸미기가 목적이라면 div 요소를 이용한다.
📝 3일차 부트캠프 회고
1️⃣ 잘했던 점
예전에 디자인과를 준비해왔어서 그런지 CSS 관련해서 속성들은 보면 "화면에 이렇게 나타나겠구나!" 하고 바로 떠올랐다. 포토샵이나 일러스트레이터 같은 경우에는 클릭 몇 번하면 화면에 보이니 프로그램 다루기가 쉬운데 역시 프로그래밍은 하나씩 속성들을 알고 타이핑 해봐야돼서 번거로운 것 같다는 생각이 들었다.2️⃣ 부족했던 점
거의 하루만에 HTML/CSS의 전체내용을 보고 어마어마한 공부량에 놀랐다. 회사 다닐 때 어떤 프론트엔드 개발자가 모든 태그를 다 알고 있는 건 아니라고 했던 말이 기억났다. 상황에 따라 필요한 태그들이 있어서 그때마다 검색해서 찾아본다고 했었다. 너무 많다고 놀라기보다는 "아~ 이런 것이 있구나~" 하고 어떤 것들이 있는지 대략적으로 파악하는 정도면 좋을 것 같다. 추가적으로 HTML 구조에 대해서 이해는 했지만 실제로 화면에 그려질 레이아웃 배치 방법에 대해 테이블로 처리하는 것인지 모르겠어서 더 공부해야될 것 같다.
3️⃣ 향후 개선 방향
혼자 프로젝트를 한다면 프론트엔드도 같이 할 줄 알아야된다고 생각하기 때문에 내가 부족했던 부분인 웹페이지 레이아웃 만들기 연습을 추가적으로 더 진행해볼 것이다.
'🎨 HTML, CSS' 카테고리의 다른 글
| [🥸HTML/CSS]📝랜딩페이지 좌우 여백, 헤더 고정, 스크롤 탑 버튼➰(반응형 웹페이지) (0) | 2024.08.20 |
|---|---|
| [🥸HTML/CSS]📝랜딩페이지 시맨틱 구조 분석 및 설계➰(반응형 웹페이지) (3) | 2024.08.19 |
| [🥸HTML/CSS]📝웹 접근성 스크린리더 관련 클래스명➰(sr-only) (0) | 2024.08.13 |
| [🥸HTML/CSS]📝CSS 박스 모델과 Display 속성➰(Flex 레이아웃) (0) | 2024.08.09 |
| [🥸HTML/CSS]📝CSS 선택자 종류 및 우선순위(➰사용법) (0) | 2024.08.08 |