본문 바로가기
[study]이론정리/HTML & CSS & JavaScript

HTML 1일차 - header, p, br, hr, 텍스트포멧

by yoon9i 2024. 4. 18.

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

관련글

티스토리툴바