![[HTML & CSS] block & inline](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fcke1QK%2FbtrLOmo0TwQ%2FPJXzXhsDxLpTHzi5zIDHHk%2Fimg.png)
728x90
HTML태그는 두가지 형태의 속성을 가지고 브라우저에 출력됩니다.
- 블록(block)형태
- 인라인(inline)형태
1. block 형태
블록(block)형태의 속성을 가진 태그들은 네모 블록 모양을 가집니다.
블록형태의 속성을 가진 태그는 항상 새로운 줄에서 시작하며, 해당 줄의 모든 너비를 차지합니다.
1-1. <div>태그
<div>태그는 division의 약자로, 블록형태의 속성을 가지며 레이아웃을 나누는데 주로 사용하는 태그입니다.
다른 HTML태그들을 레이아웃 형태로 묶는데 사용되고, 하나로 묶인 HTML태그에 CSS스타일을 한번에 적용하는데 사용합니다.
기본적인 형식은 다음과 같습니다.
<div>content1</div>
<div>content2</div><div>태그안에 style속성을 적용할 수 있고 이전에 공부한 태그들을 넣어 꾸밀 수 있습니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>block Tag</title>
<meta charset="UTF-8">
</head>
<body>
<div style="border: 1px solid black;">
<h1 style="text-align: center">HTML div태그</h1>
<p>HTML의 div태그</p>
</div>
</body>
</html><div>~</div> : 다른 HTML 태그들을 하나로 묶어줍니다.
border속성 : 두께가 1px인 검은색 실선 테두리를 그려줍니다.
text-align속성 : 텍스트를 중앙 정렬해줍니다.
결과)
2. inline 형태
인라인 형태의 속성을 가진 태그들은 새로운 줄에서 시작하지 않으며, 해당 줄의 너비는 내용만큼만 가져갑니다.
2-1. <span>태그
- 텍스트의 특정부분을 강조하는데 자주 사용합니다.
- 텍스트의 특정부분에 CSS 스타일을 적용하기 위해 자주 사용합니다.
기본적인 형식은 다음과 같습니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>inline Tag</title>
<meta charset="UTF-8">
</head>
<body>
<p>과목명 : <span style="color:red">HTML</span>과 CSS</p>
</body>
</html><span>~</span> : 텍스트에서 강조할 특정부분을 <sapn>태그로 감싸주었습니다.
color속성을 이용해서 텍스트의 색상을 빨강으로 지정하였습니다.
결과)
728x90
'[WEB] > [HTML & CSS]' 카테고리의 다른 글
| [HTML & CSS] sementic 태그 (0) | 2022.09.13 |
|---|---|
| [HTML & CSS] iframe (0) | 2022.09.10 |
| [HTML & CSS] HTML 기본태그 4 - <img>, <list>, <table> (0) | 2022.09.09 |
| [HTML & CSS] HTML 기본태그 3 - <q>, <abbr>, <Link> (0) | 2022.09.08 |
| [HTML & CSS] HTML 기본태그 2 (0) | 2022.09.08 |