html 태그는 크게 block 태그, inline 태그으로 나뉜다.
block 태그
block 태그 종류 : h1~h6, div, ol, ul, li, p, form 등
block태그는 옆에 뭐가 오지 않는다. 자동으로 줄바꿈이 된다는 뜻이다.
block 태그는 높이(hight)와 너비(width)를 지정할 수 있으며, 여백과 관련된 3가지 속성을 가진다.
- Margin : 경계(border) 바깥 공간
- Border : 경계
- Padding : 경계(border) 안쪽 공간
inline 태그
block 태그 종류 : a, b, img, input, strong, span, br, button 등
inline태그는 줄바꿈이 되지 않는다. 그래서 inline 태그들은 여러개 작성해도 같은 라인에 출력된다.
inline태그는 높이(hight)와 너비(width)가 없다.
여백의 경우 Margin, Padding 모두 위,아래는 적용이 안되고 왼쪽, 오른쪽만 적용된다.
만약 inline 태그를 block태그처럼 사용하고 싶거나
block 태그를 inline 태그처럼 사용하고 싶다면
css에서 display : block 또는 display : inline을 사용하면 된다.
<!DOCTYPE html>
<head>
<style>
div {
display: inline; //블록태그를 인라인으로 변경
background-color: blue;
}
span {
display: block; //인라인태그를 블록으로 변경
background-color: red;
}
</style>
</head>
<body>
<div>div</div>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
<span>span</span>
</body>
</html>
이렇게 div는 인라인 태그처럼 줄바꿈이 되지 않고,
span는 블록 태그처럼 줄바꿈이 되는 것을 확인할 수 있다.
'HTML, CSS' 카테고리의 다른 글
| (CSS) fixed와 sticky 차이, 화면에 요소 고정하기 (0) | 2024.04.09 |
|---|---|
| (CSS) flexbox 1탄 : justify-content, align-items, flex-direction, flex-wrap 사용법 (0) | 2024.04.01 |
| id와 class의 차이점과 사용방법 (0) | 2024.03.31 |
| HTML 기본 구조 (0) | 2024.03.28 |
| HTML, CSS이란? (0) | 2024.03.27 |
