-
HTML - 레이아웃 / 시멘틱 태그프로그래밍/HTML & CSS 2021. 9. 14.반응형
- 시멘틱 구조 태그는 한눈에 보기 쉽게 하기 위함이다.
어디가 제목이고 어디가 본문이고 어디가 하단인지 등등
CSS를 적용함에도 있어서 시멘틱 구조로 짜야 좋다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> *{ margin: 0; padding: 0; } header, main, footer { width: 1100px; margin: 0 auto; } header { background: #D4F4FA; margin-top: 30px; padding: 20px; } /* 블록태그에 width를 지정하지 않으면 부모의 width가 적용 */ nav { border: 1px solid #777; padding: 30px; text-align: center; } main { background: #EAEAEA; min-height: 500px; padding: 20px; } /* main > article : main 바로 아래 자식 요소인 article을 나타냄 */ /* main article : main 아래 모든 자손 요소인 article을 나타냄 */ main article { background: #fff; margin-top: 10px; padding: 20px; } main aside { border: 1px solid #333; padding: 20px; margin-top: 10px; height: 140px; } footer { background: #C7C6FF; padding: 20px; margin-bottom: 10px; } footer > p { padding : 30px; text-align: center; } </style> </head> <body> <header> <nav>메뉴 입니다.</nav> </header> <main> <h2>메인 화면 입니다.</h2> <div style="float: left; width: 65%; margin-bottom: 10px;"> <article> <h3>header 태그</h3> <p>머릿글 태그, 소개 등을 지정</p> </article> <article> <h3>nav 태그</h3> <p>외부 페이지로 연결되는 링크의 모음. 일반적으로 메뉴를 구현</p> </article> </div> <aside style="float: right; width: 30%;"> <h3>aside 태그</h3> <p>사이드바 태그</p> </aside> <article style="clear: both;"> <h3>main 태그</h3> <p>해단 문서의 주 콘텐츠를 정의</p> </article> <article> <h3>article 태그</h3> <p>문서, 페이지, 애플리케이션에 포함되며, 그 자체로 독자적으로 완성된 내용을 담고 있음</p> </article> <article> <h3>session 태그</h3> <p>문서의 세션을 정의</p> </article> <article> <h3>div 태그</h3> <p>여러 태그를 묶을때 사용</p> </article> </main> <footer> <p>푸터 입니다.</p> </footer> </body> </html>
- 처음에 스타일로 전체에 margin과 padding을 0으로 설정한다. (이래야 편함)
- 시멘틱 태그들의 순서를 보여준다.
- 헤더, 메인, 푸터에게 width 1100의 속성을 준다. 그리고 margin으로 가운데 정렬을 시킨다.
- margin-top은 값을 주면 위에 여백을 준다. 맨위랑 딱 붙어있는걸 바꿀 수 있다.
- text-align: center : 텍스트를 중간으로 놓겠다는 의미 가운데 정렬
- padding: 20px : 안쪽으로 여백 20씩 주겠다는 의미 사방으로 커진다.
컨텐츠와 보더 사이의 크기를 조절함
- height: 140px : 높이를 140만큼 위에서 부터 주겠다 라는 의미
- footer > p : 푸터의 p 속성에만 적용 하겠다 라는 의미
반응형'프로그래밍 > HTML & CSS' 카테고리의 다른 글
HTML - 리스트 관련 태그 (1) (0) 2021.09.14 HTML - 테이블(table) 태그 (0) 2021.09.14 HTML 선택자 / CSS 개요 (0) 2021.09.13 HTML 기본 태그 (0) 2021.09.13 HTML 개요 (0) 2021.09.13
