반응형
14. 레이아웃 인라인 vs 블럭레벨
html 엘리먼트들은 크게 두 가지로 구분됩니다.
1) 화면 전체를 사용하는 태그 => block element
2) 화면의 일부를 차지하는 태그 => inline level element
이번 시간에는 인라인 엘리먼트와 블럭 레벨 엘리먼트의 차이점을 다룹니다. 그 과정에서display라는 중요한 속성에 대해서도 배우게 됩니다.
block1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1, aborder: 1px solid red;
</style>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
실행화면
아래에서 h1태그는 한 줄을 다 쓰고 a태그는 해당하는 컨텐츠만 쓰고 있습니다.
즉, h1태그는 블록 엘리먼트이고 a 태그는 인라인 레벨 엘리먼트입니다.
만약 style에서 display 속성을 아래와 같이 바꾸면
block_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1, aborder: 1px solid red;
h1display: inline;
adisplay:block;
</style>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
실행화면
아래와 같이 블록 엘리먼트였던 h1 태그가 인라인으로 되고 인라인 엘리먼트였던 a태그가 블록 엘리먼트도 된 것을 볼 수 있습니다.
'프로그래밍 > CSS' 카테고리의 다른 글
| 생활코딩 css 정리 - 18．포지션(Position) (0) | 2017.12.01 |
|---|---|
| 생활코딩 css 정리 - 20.마진 겹침 현상 (0) | 2017.11.20 |
| 생활코딩 css 정리 - 19. box-sizing (0) | 2017.11.19 |
| 생활코딩 css 정리 - 18. 박스 모델 (0) | 2017.11.15 |
| 생활코딩 css 정리 - 13. bracket 도구사용법 (0) | 2017.10.14 |
| 생활코딩 css 정리 - 12. 캐스캐이딩 (0) | 2017.10.13 |
| 생활코딩 css 정리 - 11. 웹폰트 (0) | 2017.10.13 |
| 생활코딩 css 정리 - 10. 서체 (0) | 2017.10.03 |