html의 요소를 화면에 어떻게 보이게 할지를 정해주는 속성인 display에 대해 정리해보겠다.
inline과 block
속성을 정리하기 앞서 inline과 block 레벨의 차이점을 정리해보겠다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<section id="container">
<div></div>
<div></div>
<div></div>
<span>1</span>
<span>2</span>
<span>3</span>
</section>
</body>
</html>
div{
width:70px;
height:70px;
background:red;
margin-bottom:20px;
}
span{
background:black;
width:20px;
height:20px;
}
위의 html, css코드의 결과는 아래의 사진이다.
div가 block 레벨이고, span이 inline 레벨이다.
그런데 이 코드를 작성하며 알 수 있는 사실은
block레벨
첫째, 위에서 아래로 열을 기준으로 블록처럼 쌓인다.
둘째, 태그 안에 텍스트를 작성하지 않아도 화면에 표현할 수 있다.
셋째, width, height를 통해 화면에 보이는 크기를 조절할 수 있다.
inline레벨
첫째, 왼쪽에서 오른쪽 행을 기준으로 쌓인다.
둘째, 태그 안에 꼭 텍스트를 적어야만 화면에 표현할 수 있다.
셋째, 크기를 width, height를 통해 설정할 수 없고, 작성한 내용의 크기에 맞춰 설정된다.
block과 inline은 이러한 차이점들이 있다.
display:block
block 속성은 위에서 설명한 대로 block 레벨로 보이게 하는 것이다.
이 속성을 적용하게 되면 inline으로 설정되어있는 태그도 block 속성처럼 표현할 수 있다.
div{
width:70px;
height:70px;
background:red;
margin-bottom:20px;
}
span{
background:black;
width:40px;
height:40px;
display:block;
margin-bottom:20px;
}
검은색 박스는 span태그(inlie)로 만들었지만, display 속성을 block로 변경하면 위에서 아래로 block처럼 쌓이는 모습을 볼 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<section id="container">
<div>1</div>
<div>2</div>
<div>323123131231231231231312</div>
<span>1</span>
<span>2</span>
<span>3</span>
</section>
</body>
</html>
div{
width:70px;
height:70px;
background:red;
margin-bottom:20px;
display:inline;
}
span{
background:black;
width:40px;
height:40px;
display:block;
margin-bottom:20px;
}
기존에 block 레벨을 갖고 있던 div태그를 inline 속성을 적용하니 inline 레벨처럼 보이게 된다.
그리고 div태그 안에 텍스트를 적어야만 화면에 보이게 되고,
width, hieght값도 무시하고 작성한 내용만큼 크기를 갖는다.
display: inline-block
inline-block 속성은 inline 속성과 block속성이 합쳐졌다고 볼 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<section id="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<span>1</span>
<span>2</span>
<span>3</span>
</section>
</body>
</html>
div{
width:70px;
height:70px;
background:red;
margin-bottom:20px;
display:inline-block;
}
span{
background:black;
width:40px;
height:40px;
display:inline;
margin-bottom:20px;
}
빨간색 박스를 inline-block으로 설정하면 왼쪽에서 오른쪽 행 방향으로 채워 진 후 브라우저의 공간이 부족하면 아래줄로 내려가 다시 행방 향으로 쌓이게 된다.
즉, inline과 block속성이 합쳐졌다고 볼 수 있다.
display:none
none을 적용하면 화면 상에 아무것도 출력되지 않는다.
'Front-End > css' 카테고리의 다른 글
css position(static, absolute, relative, fixed, sticky) (0) | 2020.10.24 |
---|---|
box-sizing (0) | 2020.09.18 |