반응형
블록 태그
블록 태그는 전체적인 틀을 짠다던지 구조를 만들 때 사용하는 태그이다.
아래와 같은 특징이 있다.
- 항상 새 라인에서 시작하여 출력
- 양 옆에 다른 콘텐트를 배치하지 않고 한 라인 독점 사용
- 공간이 남아있더라도 새로운 태그는 다음 줄에 생성됨
대표적인 블록 태그로는 <div>가 있다.
Block Tag 종류
<div>, <header>, <section>, <footer>, <article>, <nav>, <form>, <p>, <h1>, <ul>, <ol> 등...
인라인 태그
인라인 태그는 블럭 태그와는 다르게 내용을 적는 태그이다. 블록 태그로 짜여진 틀 안에 내용을 적을 때 사용한다.
아래와 같은 특징이 있다.
- 블록 속에 삽입되어 블록의 일부로 출력
- 좌우 공간을 필요한 만큼만 차지함.
- 이전, 이후 태그 사이에 공간이 있다면 그 공간에 배치됨
- 다른 태그와 같은 줄에 배치 가능
대표적인 인라인 태그로는 <span>이 있다.
Inline Tag 종류
<strong>, <a>, <img>, <span>, <button>, <input>, <video>, <audio>, <script>, <textarea> 등...
블록 태그 <div> / 인라인 태그 <span> 예시
<!DOCTYPE html>
<html>
<head>
<title> 수피치의 HTML </title>
</head>
<body>
<h2> 블록 태그 / 인라인 태그 </h2>
<p>
<div style="color: aqua;">soopeach</div>
<div style="color: blue;">soopeach</div>
<div style="color: red;">soopeach</div>
<span style="color: orange;" >soopeach</span>
<span style="color: green;">soopeach</span>
<span style="color: navy;">soopeach</span>
</p>
</body>
</html>위와 같이 코드를 짜면
요런식으로 출력이 됩니다. <div>는 블록 태그라서 항상 새 라인에 출력됨. <span>은 인라인 태그라서 같은 줄에 배치됨.
반응형
'정보[Information]' 카테고리의 다른 글
| iterm zsh: command not found: brew 에러 (0) | 2022.04.13 |
|---|---|
| 자바[Java] 오버로딩과 오버라이딩(overloading Vs overriding) (0) | 2022.04.12 |
| 신장 트리(Spanning Tree) / 크루스칼 알고리즘(Kruskal Algorithm)(Python - 파이썬) (0) | 2022.03.06 |
| 서로소 집합 자료구조(Union-Find)(Python-파이썬) (0) | 2022.03.05 |
| API(Application Programming Interface)란? (0) | 2022.02.20 |
최근댓글