study:html

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- study:html [2021/11/20 15:58] – [HTML5] taekgu
+++ study:html [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 1: / 줄 1: @@
+====== HTML5 ======
+[[https://developer.mozilla.org/ko/docs/Web/HTML/Element|HTML-Mozilla]]
+[[https://d2.naver.com/helloworld/8540176?fbclid=IwAR2RNVpxxyRdh0zkHvfoBA6hC9jHUfGKc35OvlgjYS2AQJ_GZigX7yl8rI8|flexbox로 만들 수 있는 10가지 레이아웃]]
+[[https://blog.naver.com/eggtory/220744380205|CSS로 footer를 하단에 고정하는 5가지 방법]]
+[[http://marcj.github.io/css-element-queries/|CSS Element Queries]]
+[[html:input|Html Input]]
+===== HTML5요소 =====
+[[html:resize|detect resize of Element]]
+==== 의미요소 ====
+** 의미 요소(semantic element) **
+의미 요소(semantic element)란 그 자체로 의미를 가지고 있는 요소를 가리킵니다.
+즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미합니다.
+의미 요소가 아닌 div 요소나 span 요소 등은 해당 요소가 무슨 목적으로 사용되었는지 코드를 살펴봐야 알 수 있습니다.
+하지만 의미 요소인 table 요소는 코드를 보지 않아도 해당 요소가 표를 만드는 데 사용되었다는 것을 이름만 살펴봐도 바로 알 수 있습니다.
+=== HTML5에서 추가된 의미 요소 ===
+HTML5에서 새롭게 추가된 대표적인 의미 요소는 다음과 같습니다.
+. header 요소
+. nav 요소
+. main 요소
+. section 요소
+. article 요소
+. figure와 figcaption 요소
+. footer 요소
+{{:study:html:img_html_html5_layout.png|}}
+=== header 요소 ===
+header 요소는 HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의합니다.
+헤더(header)란 도입부에 해당하는 콘텐츠(content)를 가지고 있는 부분을 의미합니다.
+또한, 한 문서 내에 여러 개의 header 요소가 존재할 수 있습니다.