html 엘리먼트들은 크게 두가지로 구분됩니다.
화면 전체를 사용하는 태그 => block level element
화면의 일부를 차지하는 태그 => inline level element
이번 시간에는 인라인 엘리먼트와 블럭레벨 엘리먼트의 차이점을 다룹니다. 그 과정에서 display라는 중요한 속성에 대해서도 배우게 됩니다.
예를 들면 밑에서 Hello world는 블럭 엘리먼트 생활코딩은 인라인 엘리먼트다
블럭을 인라인으로 인라인을 블럭으로 바꿀 수 있다
바꾸면 블럭레벨이 된 엘리먼트는 다른 글자들과 같은 줄에 위치하지 않는다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1,a{border 1px solid red}
h1{display:inline;}
a{display:block;}
</style>
</head>
<body>
<h1>Hello world</h1>
안녕하세요. <a href="http://opentutorials.org">생활코딩<a>입니다
</body>
</html>
'웹(Web) > CSS' 카테고리의 다른 글
| Box-sizing (0) | 2021.04.15 |
|---|---|
| 박스모델 (0) | 2021.04.15 |
| 레이아웃 (0) | 2021.04.15 |
| 도구소개-Brackets (0) | 2021.04.15 |
| 캐스케이딩 (0) | 2021.04.15 |
댓글