박스모델 이해하기 (추가로. background)
문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다. CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정한다. 하나의 박스는 네 영역으로 이루어지는데 각 영역을 콘텐츠 영역(content), 안쪽 여백(padding) 영역, 테두리 영역(border), 바깥 여백(margin) 영역이라고 부른다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid red;
margin: 10px;
background-color: beige;
}
</style>
</head>
<body>
<div id="box1"></div>
</body>
</html>
div 태그를 사용해서 width:100px, height:100px인 박스를 만들었다.
- content: 글이나 이미지, 비디오 등 요소의 실제 내용을 포함한다. 콘텐츠 영역의 크기는
width와height를 지정한다. - padding: 콘텐츠 영역의 안쪽 여백까지 포함하는 크기로 확장한다.
- border: padding 영역을 요소의 테두리까지 포함하는 크기로 확장한다.
- margin: border 영역의 바깥쪽에 차지하는 영역으로 요소와 인근 요소 사이의 빈 공간까지 포함한다.
box-sizing
위 html 코드에서 박스를 만들었는데 박스가 실제 브라우저에서 보여지는 크기 width + padding + border가 된다. 그래서 박스를 만든다고 하면 보통 콘텐츠 영역만 신경쓰면 될 것 같은데 그렇지 않다. 실제 크기는 padding과 border까지 신경써주어야 한다. 예를 들어, 콘텐츠 영역이 width:100px, height:100px인 박스를 만들었는데 여기에 border을 추가하고 싶어서 10px을 추가하면 내가 생각한 박스 넓이 100px인데 화면에 보여지는 것은 110px이 되는 것이다. 위 사진에서는 100 + 20 + 5가 되서 총 합이 125px이 된다. 100px을 원했는데 실제 화면에 보여지는 박스의 크기는 125px이 된다.
이것을 좀 더 쉽게, padding과 border을 신경쓰지 않게 하기 위한 속성이 바로 box-sizing: border-box 을 주면 된다. 기본값은 content-box이다.
box-sizing: border-box 적용 후
위에 박스 모델을 보면 콘텐츠 영역이 width:50px, height:50px으로 변경되어서 width + padding + border의 총 합이 100px이 되었다. 즉, 실제 브라우저에 보이는 박스의 크기가 100px인 것이다. 이러면 padding과 border을 신경써주지 않아도 내가 원하는 크기를 지정하면 화면에 딱 그 크기만큼 보여주는 장점이 있다. 그래서 요즘은 border-box를 많이 사용한다.
background
CSS background는 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
background-image: url("https://item.kakaocdn.net/do/98504002fd1d2e1db2fe8e6eb34160489f5287469802eca457586a25a096fd31");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
height: 100px;
}
p {
background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<div id="box1"></div>
<p>
There were doors all round the hall, but they were all locked; and when
Alice had been all the way down one side and up the other, trying every
door, she walked sadly down the middle, wondering how she was ever to
get out again.
</p>
</body>
</html>- background-image: 이미지의 주소나 이미지 위치를 값으로 입력하고 불러온다.
- background-repeat: 기본값은
repeat라서 설정을 따로 안해주면 불러온 이미지가 반복되서 보여진다. 따라서 대부분은no-repeat로 설정한다. - background-size:
contain또는cover를 자주 사용한다.- contain: 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정
- cover: 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정 (대신에 이미지가 잘릴 수도 있음)
- background-attachment: 배경 이미지를 뷰포트 내에서 고정할지, 스크롤 할지 지정한다.
- fixed: 고정
- scroll: 스크롤
- background-position: 배경 이미지의 위치를 지정한다.
위에 배경 속성들을 한 줄로도 나타낼 수도 있다.
#box1 {
background: yellow url("https://mdn.mozillademos.org/files/12057/starsolid.gif") no-repeat fixed center;
}References
'공부 기록' 카테고리의 다른 글
| [리팩토링 1판] Chapter 01 - 맛보기 예제 (1) | 2024.03.26 |
|---|---|
| [CSS] display와 position에 대해 알아보자. (0) | 2022.06.19 |
| [CSS] Cascading 이해하기! 추가로. ::before, ::after (0) | 2022.06.18 |
| 웹 표준, 웹 접근성, 크로스 브라우징 개념 (0) | 2022.06.18 |
| [HTML] HTML 이해하기 (0) | 2022.06.18 |
댓글