HTML의 태그들은 태그의 성격에 따라서 화면 전체를 쓰는 태그와 자기 자신의 크기만큼만 사용하는 태그로 나뉩니다.
이것들을 inline 방식, block-level-tag(block-level-element) 방식이라고 칭합니다.
어떤 element가 block이고, 어떤 element가 inline인 지 보도록 하겠습니다!
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1,
a {
border: 1px solid red;
}
</style>
</head>
<body>
<h1>Hello World</h1>
안녕 <a href="https://naver.com">세상아</a>
</body>
</html>
- a 태그처럼 자신과 자신을 둘러싸고 있는 다른 텍스트, 정보와 하나의 같은 줄에 위치하는 형태의 태그(element)를 inline 태그라고 합니다.
- h1 태그처럼 자기 혼자 화면 전체를 다 쓰는 태그를 block-level-elements이라고 합니다.
+ inline이던 block이던 간에 언제든 지 inline → block / block → inline으로 바꿀 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1,
a {
border: 1px solid red;
}
h1 {
display: inline;
}
a {
display: block;
}
</style>
</head>
<body>
<h1>Hello World</h1>
안녕 <a href="https://naver.com">세상아</a>
</body>
</html>
'프레임워크 > CSS' 카테고리의 다른 글
| [생활코딩] box-sizing (0) | 2022.01.29 |
|---|---|
| [생활코딩] box model (0) | 2022.01.29 |
| [생활코딩] 캐스케이딩(Cascading) (0) | 2022.01.28 |
| [생활코딩] 상속 (0) | 2022.01.26 |
| [생활코딩] 타이포그래피 - 웹폰트 (0) | 2022.01.25 |
댓글