13. <body> 태그의 몸체
1) header 태그
- <h1> ~ <h6> 까지
- 번호가 작을수록 크게 보임(랜더링됨).
- 기본 폰트크기는 16px( 1rem ) ==> 1rem = 1em 동일
( 완전히동일하진 않지만 비슷함. )
<h1>: 32px, 16 * 2rem(2em)
<h2>: 24px, 16 * 1.5rem(2em)
<h6>: 10.72px, 16 * 0.67rem(em)
- 블럭 레벨 (block level) 스타일 따름
* 블럭레벨 vs 인라인 레벨
가. 블럭레벨
- 새로운 줄에 랜더링됨.
- 너비(width)가 전체를 차지하기 때문에 이어서 출력되는 태그는 새로운 줄에 랜더링이 된다.
- 대표적인 태그:
<h1>~<h6>, <p>, <div>, <ul>, <ol>, <li>, <table>, <tr> ...
나. 인라인 레벨
- 한 줄에 랜더링 됨.
- 너비(width)가
- 대표적인 태그:
<span>, <a>, ...
<!DOCTYPE html>
<html lang="en">
<head>
<title>header1</title>
</head>
<body>
<!-- 블럭 레벨 -->
<h1 style="background-color: red; color: white;">Hello</h1> <!-- 32px 2em -->
<h2 style="background-color: orange; color: white;">Hello</h2>
<h3 style="background-color: yellow; color: white;">Hello</h3>
<h4 style="background-color: green; color: white;">Hello</h4>
<h5 style="background-color: blue; color: white;">Hello</h5>
<h6 style="background-color: darkblue; color: white;">Hello</h6>
<p style="background-color: purple; color: white;">Hello2</p> <!-- 16px 1em -->
<!-- 인라인 레벨 -->
<span style="background-color: yellowgreen;">world1</span>
<span>world2</span>
<span>world3</span>
</body>
</html>
2) p 태그
- 문서의 문단(paragraph) 지정 목적
- 블럭 레벨(block level) 스타일 따름
3) br 태그
- new line 만들 때 사용
- 종료태그 없음.
- 블럭 레벨 (block level) 스타일 따름
<!DOCTYPE html>
<html lang="en">
<head>
<title>p 와 br</title>
</head>
<body>
<p>Hello</p>
<p>Hello2</p>
<span>world1</span><br>
<span>world2</span>
<span>world3</span>
</body>
</html>
4) hr 태그
- 수평선 제공
- 종료태그 없음.
- 블럭 레벨 (block level) 스타일 따름
5) 텍스트 포멧용 태그( 권장안함. css 로 처리하는 것을 권장 )
- <b>hello</b> : 굵은 글자
- <i>hello</i> : 이탤릭체 글자
- <small>hello</small> : 작은글자
- <del>hello</del> : 취소선글자
- <ins>hello</ins> : 밑줄글자
- <sub>hello</sub> : 아래글자
- <sup>hello</sup> : 윗글자
<!DOCTYPE html>
<html lang="en">
<head>
<title>p 와 br</title>
</head>
<body>
<p>hello</p>
- <b>hello</b> : 굵은 글자
- <i>hello</i> : 이탤릭체 글자
- <small>hello</small> : 작은글자
<hr>
- <del>hello</del> : 취소선글자
- <ins>hello</ins> : 밑줄글자
- <sub>hello</sub> : 아래글자
- <sup>hello</sup> : 윗글자
</body>
</html>
'[study]이론정리 > HTML & CSS & JavaScript' 카테고리의 다른 글
| HTML 2일차 - 1일차 요점 (0) | 2024.04.22 |
|---|---|
| HTML 1일차 - a, 링크, 경로 (1) | 2024.04.18 |
| HTML 1일차 - title, style, script (1) | 2024.04.18 |
| Google Api -Youtube data Api v3 (0) | 2023.12.26 |
| Instagram API 를 이용하여 게시물 가져오기(수정본) (0) | 2023.12.20 |