안녕하세요 오늘은 CSS에 Display 속성에 대해 알아보겠습니다.
우선 Display 속성에는 inline, inline-block, block이 존재합니다.
block
첫번째로 block에 대해 먼저 알아보겠습니다.
block 요소에 해당하는 태그들은 header, footer, p, li, table, div, h1 등이 존재합니다.
block 속성은 나중에 배우게 될 inline속성과 달리 한줄에 나열되지 않고 다음 줄로 표시됩니다.
예를 들어 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Layout Project</title>
<link rel="stylesheet", href="project1.css">
</head>
<body>
<div class="red box">red</div>
<div class="blue box">blue</div>
<div class="green box">green</div>
<div class="yellow box">yellow</div>
</body>
</html>
<!--display inline으로 가로로 적기-->
간단하게 red, blue, green, yellow 박스를 만들어 보았습니다.
.box{
padding: 50px;
display: inline;
}
.red{
background-color: #e46e80;
}
.blue{
background-color: #5195ee;
}
.green{
background-color: #32b9c1;
}
.yellow{
background-color: yellow;
}스타일은 이렇게 작성하였습니다.
display 속성값이 block으로 설정 되었을때 출력이 어떻게 나오는지 보도록 하죠.
보시는 이미지와 같이 세로로 정렬된 모습을 볼수 있습니다.
block 요소는 margin, width, height속성을 정의 하면 모두 적용가능합니다.
다음장엔 inline과 inline block을 보시겠습니다
'HTML, CSS' 카테고리의 다른 글
| [HTML/CSS] 개발자 도구 (0) | 2024.08.20 |
|---|---|
| [HTML] HTML 기본구조와 태그 (0) | 2024.07.17 |
| [CSS] position 속성 absolute, relative (0) | 2024.07.16 |
| [CSS] display 속성 : inline, inline-block (0) | 2024.07.15 |
| HTML, CSS란 무엇인가? (0) | 2024.06.19 |
