인라인 태그 vs 블럭 태그
- 모든 태그는 위의 두 분류 중 하나에 속한다.
- 랜더링의 결과가 다르다.
- 반드시, 인라인 태그인지 블럭 태그인지 구분하여 사용해야한다.
랜더링(Rendering) 이란
- 태그를 화면에 출력하는 작업
- h1 태그에 속하면 큰 글씨와 굵은 폰트로 출력하는 것
🔻인라인 태그, Inline Tag🔻
- 자신의 내용물과 주변 태그의 내용물을 같은 라인에 출력한다.
- 자바의 print()와 같다.
- PCDATA(텍스트)도 인라인 태그에 속하는 성질을 가진다.
- 내용물의 크기가 태그의 영역이다.(***)
<body>
<!-- <a>태그는 인라인 태그이다. -->
<a href="https://naver.com">네이버</a>
<a href="https://google.com">구글</a>
<a href="https://daum.com" style="background-color: yellow;">다음</a>
문자열 <!-- PCDATA -->
</body>🔻블럭 태그, Block Tag🔻
- 자신의 내용물과 주변 태그의 내용물을 다른 라인에 출력한다.
- 자바의 println()과 같다.
- 내용물의 크기와 상관없이 자신이 속한 라인을 독점한다.
- 내용물의 크기와 상관없이 태그의 너비는 항상 100%이다.
- 높이는 내용물의 크기와 동일하다.
<body>
<!-- <p>태그는 블럭 태그이다. -->
<p>문단1</p>
<p>문단2</p>
<p style="background-color: yellow;">문단3</p>
</body>
'WEB > HTML' 카테고리의 다른 글
| [HTML] 폼 <form>, <input>, <select>, <textarea> 태그 (0) | 2023.09.21 |
|---|---|
| [HTML] table 태그 (생성, 색상, 정렬, 크기, 셀병합) (0) | 2023.09.21 |
| [HTML] img 태그 (src, alt, width, height, border) (0) | 2023.09.20 |
| [HTML] 링크(a 태그) (0) | 2023.09.20 |
| [HTML] 서식 태그(b, i, small, sub, sup, big, u, strike, tt 등) (0) | 2023.09.20 |
