안녕하세요. 김개입니다.
HTML5를 공부하다보면 태그의 종류가 정말 많은데요.
<head></head>부터 시작해서 <body> <title> 기타등등 너무많아요.
그중 h태그에 대해 얘가 인라인 요소인지 블록요소인지도 헷갈려 하시는 분들이
종종 있어서 간략하게 설명드리고자합니다.
크롬기준 h1~h6의 폰트크기도 대략적으로 알려드릴게요.
<h1>주로 대표적인 제목 / 로고등에 많이사용합니다 / 기본 32px크기에요</h1>
<h2>두번째로 큰 h2태그 24px </h2>
<h3>세번째로 큰 h3태그 18.72px</h3>
<h4>네번째로 큰 h4태그 16px</h4>
<h5>다섯번째로 큰 h5 태그 13.28px</h5>
<h6>가장작은 h6태그 10.72px 입니다.</h6>
h태그는 기본적으로 h1~h6순으로 되어있고 중요도는 h1 이 가장 중요합니다.
h태그의 요소는 블록요소입니다.
*블록요소란 해당 줄에는 다른친구가 올수없어요.
CSS로 display값을 변경해준다면 가능합니다.
h1태그는 주로 사이트의 제목 / 사이트를 대표하는 로고 등에 많이 사용되며,
예를들면 제 블로그로 치면 '잡블리셔의 일상'이 h1태그에 해당하는 내용이 되겠네요.
아무래도 h1은 사이트를 대표하는 태그에 사용되니 두번이상 사용하지않는게 좋겠죠?
한번만 사용하는것이 원칙입니다...
h2태그는 주로 부제목 예를들면 'HTML5,css3등'이 해당내용에 해당되겠네요.
다음으로 h3태그는 'HTML5 h태그에 대해 간단하게 알아보자' 같은 것이라고
비유하면 될것같아요.
그외 h4 h5 h6는 추가적으로 안에 문단타이틀 등에 사용하면 적합할것 같아요.
자 다음은 위에 코드들을 적용한 화면이에요.
이렇게 h태그를 사용하면되고 또 간략하게 p태그에 대해서 간략하게 알아봅시다.
p태그 역시 블록요소이며, p태그라는 친구는
paragraph - 문단을 나누는 태그입니다.
p 태그는 </p> 이걸 굳이 안닫아주더라도 자동으로 닫히는데요.
자동으로 닫히더라도 꼭 닫아주는걸 권장드립니다.
안그러면 코딩시 헷갈려요.
그럼 여기서 문제 p태그안에 p태그를 사용할수 있을까요?
.
.
.
.
.
정답은
.
.
.
.
.
.
.
없습니다. p태그는 위에서 언급했듯이 자동으로 닫히기 때문에
p태그안에 p태그를 사용하게 되면 안에 있는 p태그 시작전까지만 한문단으로
인식하게 되요. 이점 꼭 유의하셔서 코딩하시길 바랍니다.
'코딩 > HTML5' 카테고리의 다른 글
| [HTML5] 시맨틱태그란 뭘까? (feat.header,footer,section) (0) | 2022.11.15 |
|---|---|
| 홈페이지를 구성하는 HTML5 를 알아보자! (0) | 2022.11.14 |
댓글