네이버사이트를 개발자 도구에서 확인해보면 헤더 부분의 검색창과 메뉴들을 화면에 보여주기 위하여 수많은 태그들이 사용된 것을 확인할 수 있다. 그 중에서 헤더부분 전체를 그룹화하고 있는 태그는 div 요소라는 것을 확인할 수 있다.
간단한 웹페이지 레이아웃 구현하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>div 그룹화</title>
</head>
<body>
<div></div>
</body>
</html>브라우저의 좌우에는 빈공간이 있고 중앙에는 전체 엘리먼트를 모두 묶어줄 div 요소가 필요하다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>div 그룹화</title>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>중앙에 위치한 전체 div 요소 안에는 크게 세 부분으로 나뉘어진다. 상단에 위치한 헤더영역, 중앙에 위치한 컨텐츠영역, 하단에 위치한 푸터영역으로 구분할 수 있다. 각 영역 안에는 수많은 요소들이 들어갈 것이고 이를 그룹화하기 위한 3개의 div 요소가 필요하다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>div 그룹화</title>
</head>
<body>
<div>
<div>
<h1>Logo</h1>
<h2>Menu</h2>
</div>
<div></div>
<div></div>
</div>
</body>
</html>상단의 헤더영역은 다시 크게 두 부분으로 나눌수 있다. 로고가 위치한 부분과 메뉴들이 위치한 부분이다. 이를 h1, h2 태그로 구분하면 위와 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>div 그룹화</title>
</head>
<body>
<div>
<div>
<h1>Logo</h1>
<h2>Menu</h2>
</div>
<div>
<h2>Sub Menu</h2>
<h2>Main content</h2>
</div>
<div></div>
</div>
</body>
</html>증앙에 위치한 컨텐츠 영역은 다시 크게 두 부분으로 나눌수 있다. 좌측의 서브메뉴와 우측의 메인컨텐츠 부분이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>div 그룹화</title>
</head>
<body>
<div>
<div>
<h1>Logo</h1>
<h2>Menu</h2>
</div>
<div>
<h2>Sub Menu</h2>
<h2>Main content</h2>
</div>
<div>
<h2>Footer</h2>
</div>
</div>
</body>
</html>마지막으로 푸터영역은 나누어진 부분이 없이 하나이다.
하지만 처음에 만드려고 했던 웹사이트 레이아웃과는 많이 다르게 보인다. 이유는 CSS 스타일이 적용되지 않았기 때문이다. CSS 스타일을 적용하여 각 div 요소와 h1, h2 요소의 크기와 위치를 지정해주면 의도한 레이아웃에 근접하게 보일 것이다. 즉, 스타일을 적용하기 위해서는 스타일을 적용할 요소를 선택해야 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>div 그룹화</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Logo</h1>
<h2>Menu</h2>
</div>
<div id="content">
<h2>Sub Menu</h2>
<h2>Main content</h2>
</div>
<div id="footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>현재 여러개의 div 요소와 h1, h2 요소가 있기 때문에 특정 요소를 선택하기 위해서는 요소마다 이름이 필요하다. 요소마다 붙여주는 이름에는 id와 class가 있다. id 는 HTML 문서에서 유일한 이름이고 class 는 동일한 스타일을 적용할 요소에 모두 붙여주는 이름이다. 현재는 id 로만 이름을 붙여주자!
그룹화요소 span
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>div 그룹화</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Logo</h1>
<h2>Menu</h2>
</div>
<div id="content">
<h2>Sub Menu</h2>
<h2>Main content</h2>
</div>
<div id="footer">
<h2>Footer</h2>
<p>
<span><em>www.abc.com</em> <i>© copyright</i></span> All rights reserved
</p>
</div>
</div>
</body>
</html>span 태그는 인라인요소이며 문장에서 일부분에 하이라이트를 주거나 다른 스타일을 적용할때 사용한다. 또는 div 요소처럼 다른 인라인요소들을 그룹으로 묶어줄때 사용한다. 현재는 em, i 태그를 그룹으로 묶어주었다.
'프론트엔드 > HTML & CSS 강의' 카테고리의 다른 글
| 6. 제목, 문단, 구분선, 정형화된 텍스트 (0) | 2023.06.08 |
|---|---|
| 5. HTML5 섹셔닝 (시맨틱 태그) (0) | 2023.06.07 |
| 3. 텍스트 정의 요소 (0) | 2023.06.05 |
| 2. 블록 및 인라인 레벨 요소 (0) | 2023.06.04 |
| 1. HTML 의 구조 (0) | 2023.06.03 |