CSS 시작 전 기본이 되는 지식
영역
영역은 아래의 그림과 같이 나뉩니다.
margin : 테두리(border) 바깥 영역
boder : 테두리 영역
padding : 테두리 안쪽 영역
div : 내용 영역
inline, block, inline-block
inline : 세로 가로 둘다 안에있는 내용물의 크기
→ 디자인할때 inline을 잘 쓰지 않음(크기 지정 불가능)
block : 가로는 무제한, 세로는 지정한 만큼의 크기
→ 세로의 크기는 지정이 가능하지만, 가로의 크기는 지정 불가능
inline-block : 세로 가로를 지정 가능
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 10px;
display: inline-block;
border: 10px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>위 코드에서 head 태그의
display 부분만 변경inline
block
inline-block
Share article
