이전에 블럭 레벨 요소와 인라인 레벨 요소를 알아야 한다.
블록 레벨(block-level) : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소. 이 한 줄을 차지한다는 의미는 너비가 100%라는 것을 뜻함. 따라서 다음 요소가 양 옆으로 붙을 공간이 없어서 자연스럽게 "줄넘김"이 됨.
블록 레벨 요소는 인라인 요소에 중첩될 수 없음.
그러나 블록 레벨 요소는 다른 블록 레벨 요소에 중첩될 수 있음.
인라인 레벨(inline-level) : 줄을 차지하지 않는 요소. 브라우저같은 화면에 표시되는 컨텐츠만큼 영역을 차지하고, 나머지 공간에 다른 요소가 올 수 있음.
웹 표준 유효성 검사 https://validator.w3.org
태그 작성 규칙
1> 모든 태그는 소문자로 작성하는 것이 원칙.
2> 연속된 white-space character(space ,tab , enter)는 하나만 인정
3> 웹페이지에 표시 하려는 특수문자는 "&"와 ";"사이에 예약어를 입력하여 표시
4> 웹표준은 HTML , CSS, Javascript 모두 분리되어 작성되어야함.
https://entitycode.com/ 특수 문자 기호 참조
<h1></h1> ... <h6></h6> 구획 제목 요소
총 6단계로 구성된 제목 요소. 문서 중요도에 따라 나눠짐.
h1이 가장 높고 h6이 가장 낮다
한 페이지에는 하나의 h1을 사용하는 것이 좋다
<p></p> 하나의 문단
paragraph 태그 : 문단과 문단을 구분할 때 사용되며 블럭 레벨 요소.
일반적으로 블럭 레벨 요소는 다른 블럭 레벨 요소를 포함할 수 있지만
p 태그의 경우 인라인 요소만 포함 가능함에 주의.
<pre></pre>
white-space character 입력한 그대로 표시 단 , 그 외 특수문자는 entitycode 형식 그대로 표현해야함을 주의
<hr> 수평선
끝 태그가 없는 수평 가로선을 나타냄.
<b></b> 굵은 글자.(지양할 것)
볼드(Bold) 태그 : 굵은 글자를 표현하며 인라인 레벨 요소.
<strong></strong> 굵은 글자 (지향할 것)
스트롱 태그 : 볼드 태그는 단순히 글자만 굵게 표시하여 강조를 하지만 스트롱 태그는 실제 웹 브라우저나 검색 엔진에 중요함을 전달하여 검색지수를 상향시킬 수 있으며, 음성합성기술 등을 통해 페이지를 해석할 때 악센트를 줄 수 있는 등의 부가적 기능을 포함. 따라서 최신 웹 표준은 스트롱 태그를 권장.스트롱 태그는 인라인 레벨 요소이며 중첩하여 스트롱 태그를 적용이 가능하여 중요도 레벨을 계층화 가능.
<i></i> 이탤릭체 (지양할 것)
이탤릭체를 표현하는 인라인 레벨 요소
<em></em> 이탤릭체 (지향할 것)
엠퍼사이즈(emphasize) 태그 : 표시되는 것은 이탤릭 태그와 동일하게 이탤릭체로 텍스트 강조를 표시를 하되, 스트롱 태그와 마찬가지로 부가적 기능 포함.
<abbr title = " "> </abbr>약어 태그 (dot 형식의 underline)
약어에 대한 full name 을 title 속성을 통해 명시함으로써 검색지수를 높일 수 있는 태그.
따라서 abbr 태그에 포함된 컨텐츠 뿐만아니라, title 속성에 명시된 개별 단어로도 검색이 가능.
title 속성은 컨텐트에 대한 툴팁(tooltip) 기능을 포함하며 dot 형식의 underline 형태로 표시.
--> <abbr title="Hypertext Markup Language">HTML</abbr>
<dfn title=" "></dfn> 용어 설명 태그 (이탤릭 형태)
- abbr 태그와 마찬가지로 title 속성을 통해 검색지수를 높일 수 있는 태그로써, 문서 내에서
최초로 사용되는 용어에 대한 정의를 할 때 사용.
단, dfn 태그의 부모 요소에는 해당 용어에 대한 정의나 설명이 반드시 포함되어야 함에 주의.
abbr 태그와 마찬가지로 컨텐트에 대한 툴팁(tooltip) 기능을 포함하며 이탤릭 형태로 표시.
--> <dfn title="HyperText Transfer Protocol">HTTP</dfn>
<blockquote cite =" " > </blockquote> 인용문 기록.( 들여쓰기 형태)
독립적인 블럭 레벨 요소 형태의 인용문을 작성할 때 사용되며 기본적으로 블럭의 좌/우가 들여쓰기 형태로 표시.
cite 속성을 통해 인용문에 대한 출처를 명시.
<q cite= " " > </q> 인용문 기록 ("" 의 형태)
짧은 형식의 인용문을 작성할 때 사용되는 인라인 레벨 요소이며 쌍따옴표로 감싸진 형태로 웹 페이지에 표시.
<address> e-mail : 0000000@hanmail.net </address> 주소 연락처 상호명 (이탤릭체)
주소나 연락처 상호등을 표시하기 위한 태그로 이탤릭체가 디폴트로 설정.
굳이 address 태그를 별도로 사용하는 것은 검색엔진에 대한 검색 효율성을 보장하기 위함.
'Developer > HTML_CSS' 카테고리의 다른 글
HTML,ol 태그와 ul 태그 list 작성 (0) | 2024.04.09 |
---|---|
HTML , div 와 span (0) | 2024.04.09 |
HTML 구조와 형태 (0) | 2024.04.08 |
HTML 단축키 (0) | 2024.04.08 |
HTML 의 시작 , VSCODE 설치 (0) | 2024.04.08 |