[HTML] 블록 레벨 요소(Block Level Element)와 인라인 레벨 요소 (Inline Level Element)

텍스트 관련 요소

크게 블록 레벨 요소(대부분)와 인라인 레벨 요소(일부분)로 나뉨

가장 큰 차이점은 해당 요소가 한 줄을 차지(즉 width : 100%)하는가 임.

 

1. 블록 레벨 요소 (Block Level Element)

: 한 줄을 차지하는 요소. 즉, 너비값을 최대로 가짐

새로운 요소을 작성 시 줄바꿈되어 새로운 줄에서 시작됨.

너비와 높이값을 지정할 수 있음.

TIP!
너비나 마진, 패딩등을 이용해 크기나 위치를 지정하기 위해서는 블록 레벨 요소여야 합니다

 

태그	기능	참고사항
h1~h6	제목, 숫자가 작을수록 글자가 커짐	h1은 한 문서 당 한 번만 사용
p	단락, 내용
br	줄 바꾸기	단락이 생긴 것 처럼 만들 수는 있지만 웹 브라우저는 단락으로 인식하지 않음
hr	수평선
blockquote	인용문
pre	입력하는 그대로 화면에 표시

 

hn태그

안녕하세요

안녕하세요

안녕하세요

안녕하세요

안녕하세요

안녕하세요

p태그

이번 포스트는 텍스트 관련 요소에 대한 내용입니다.

hr태그

---

blockquote태그

기본적으로 블록 레벨 요소는 새로운 줄에서 시작하지만, 인라인 요소는 줄의 어느 곳에서나 시작할 수 있습니다. (출처 : MDN Web Docs)

pre태그

        function preEx(){
        document.getElementsById("p");
        }
        

 

2. 인라인 레벨 요소 (Inline Level Element)

: contents만큼만 공간을 차지하며, 너비와 높이값을 지정할 수 없음

줄 어디에서나 시작 가능. 웹 접근성과 관련이 높은 요소들이 많음.

 

태그	기능	참고사항
strong, b	굵게 표시	strong은 강조 b는 단순 볼드체
em, i	이텔릭체로 표시	em은 강조 i는 단순 이텔릭체
q	인용 내용 표시	blockquote와는 다르게 줄바꿈이 없음
mark	형광펜 표시
span	따로 주는 효과는 없음.	글 중간에 한 단어에만 style을 넣는 등 css와 연동해서 사용 가능
abbr	축약
sup	위에 작은 글씨
sub	아래 작은 글씨
u	밑줄
s	취소줄
ins	새로운 내용 삽입
del	기존 내용 삭제
small	작게 표시
a	링크

 

strong/b태그

strong태그는 낭독기에서 강조하여 읽어주고, b태그는 단순 볼드체이다.

em/i태그

em태그는 낭독기에서 강조하여 읽어주며, i태그는 단순 이텔리체이다.

q/span/mark 태그

q태그는 인용시 사용되며 ""를 생성한다.
강조하는 곳에 형광펜 효과를 준다.
span태그는 그룹핑 태그로 css와 연동해서 많이 사용

기타 텍스트 요소

abbr : 축약 : WWW
sup : 위로 작은 글씨 : E=mc²
sub : 아래로 작은 글씨 : H₂O
u : 밑줄 : 2021.11.08 ~ 2021.11.31
s : 취소줄 : 2021.11.08 ~ 2021.11.31
ins : 내용 추가 : 새로운 내용삽입
del : 내용 삭제 : 기존 내용 삭제
small : 작은 글씨 : 20,000원 (부가세별도)

a 태그

a태그는 링크 태그 다음 네이버

 

텍스트 관련 요소는 블록 레벨 요소와 인라인 레벨 요소로 나뉘며, 

css에서 display로 요소의 형태 변경가능

해당 관련 내용은 추후에 포스팅 예정