본문 바로가기
비전공자의 고군분투 코딩공부/HTML

6. 태그의 구분은 뭐고, 인라인 텍스트 요소는 뭐여?

by 슬그 2023. 5. 9.
반응형
태그의 구분

블록 레벨 요소를 만드는 태그 vs. 인라인 요소를 만드는 태그

 

- 블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성

- 인라인 요소 : 자기에게 필요한 만금의 공간만 차지


블록 레벨요소를 확인해보자

F12로 개발자 도구를 열고

 

비주얼 스튜디오로 태그를 써서 작성 후, 웹브라우저로 실행을 시키고, F12를 눌러 개발자 도구를 실행 시키면 이 화면이 뜬다.

 

h 태그 위에 마우스 커서를 올리면?
p 태그 위에 마우스 커서를 올리면?

 

이렇게 영역이 표시되고 있는 웹브라우저 창을 옆으로 길게 늘린 후 다시 영역을 확인해보자.

 

옆에 늘어난만큼 영역을 표시해주고 있다.

이로서 h 태그와 p 태그는 블록레벨의 태그임을 확인할 수 있다.

 

 

인라인 요소를 알아보자

strong 태그는 감싸고 있는 콘텐츠를 굵게 표시하는 태그이다.

strong 태그는 필요한 만큼만 영역을 표시

 

em 태그는 감싸고 있는 콘텐츠를 기울여 이탤릭체로 표시하는 태그이다.

em 태그는 필요한 만큼만 영역을 표시

 

mark 태그는 감싸고 있는 콘텐츠에 형광펜 표시를 더해주는 태그이다.

mark 태그는 필요한 만큼만 영역을 표시

 

 

블록 안에 블록을 넣는다면

블록 in 블록

 

 

https://youtu.be/dOpFU0apoes

*유노코딩님 영상을 통해 공부 중입니다.

반응형