-
4. div 요소로 작성하는 문서의 그룹화프론트엔드/HTML & CSS 강의 2023. 6. 7. 01:07728x90
네이버사이트를 개발자 도구에서 확인해보면 헤더 부분의 검색창과 메뉴들을 화면에 보여주기 위하여 수많은 태그들이 사용된 것을 확인할 수 있다. 그 중에서 헤더부분 전체를 그룹화하고 있는 태그는 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 스타일이 적용되지 않았기 때문이다. 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 태그를 그룹으로 묶어주었다.
728x90'프론트엔드 > 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