display
- inline
- block
- inline-block
<html>
<body>
<h1> I am h1 </h1>
<h1> I am also h1 </h1>
<span> I am span </span>
<span> I am also span </span>
<div></div>
<div></div>
<div></div>
</body>
</html>
<--! css -->
h1 {
background-color: yellow;
border: 2px solid black;
display: inline;
}
// 배경색과 테두리를 지정했을 때 차지하는 영역이 요소의 body이다.
// h1은 기본값으로 block이 설정되어 있다.
// block은 다른 요소나 내용을 다른 줄로 밀어낸다.
// display 속성을 inline 으로 변경하면 두개의 h1 태그가 같은 줄에 배치된다.
span {
background-color: green;
border: 2px solid black;
display: block;
}
// 배경색과 테두리를 지정해 영역을 확인하면 span은 기본값으로 inline이 설정되어 있다.
// inline은 다른 요소나 내용을 다른 줄로 밀어내지 않는다.
// display 속성을 block 으로 변경하면 두개의 span이 다른 줄에 배치된다.
span {
background-color: green;
border: 2px solid black;
width: 500px;
padding: 100px;
margin: 100px;
}
// inline인 상태로 문단 사이에 span을 추가하면 width를 설정해도 변화하지 않는다.
// padding이 적용되지만 공간을 차지하거나 다른 내용을 밀어내지 않는다.
// 공간을 덮고 있거나 깔려 있게 된다.
// margin을 적용하면 span과 inline에 있는 한 줄에서만 여백이 적용된다.
// 요소가 inline 일때 가로 너비 width나 높이 height는 무시된다.
div {
width: 200px;
height: 200px;
background-color: green;
display: inline-block;
}
// block 요소는 블록 전체의 공간을 차지하고 공간을 공유하지 않는다.
// display를 inline으로 수정하면 가로, 세로가 적용되지 않는다.
// display를 inline-block 으로 설정하면 가로, 세로가 적용된 inline 요소처럼 작동한다.
h1 {
background-color: yellow;
border: 2px solid black;
display: none;
}
// display를 none으로 설정하면 공간을 차지하지 않으며 보이지 않는다.
// 요소 자체가 삭제되는 건 아니다.
// 자바스크립트를 사용하여 요소를 보이거나 보이지 않게 할 수 있다.
백엔드 개발 공부