margin 과 padding
margin 은 바깥 쪽의 여백을 뜻한다. (그림2 의 베이지색과 같음.)
그림 3은 빨간 선으로 사각형이 그어져 있는데 이는 사각형의 원래 크기라는 것이다. 따라서 padding : 10px 은 원래 크기에서 확장시킨 것을 의미한 것이다.
여기서 주의할 것은!!
그림 3에서 내용물을 쓰면 빨간 선 내부에 써지는 것이다.
<style>
body {
margin:0;
}
div {
width:200px;
height:200px;
color:#ffffff;
font-weight:bold;
text-align:center;
}
#content1 {
background-color:red;
}
#content2 {
background-color:green;
margin:10px 10px 10px 10px;
}
#content3 {
background-color:blue;
padding:10px 10px 10px 10px;
}
#content4 {
background-color: orange;
margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
}
</style>
※ 원래 float : left 를 하면 그 아래에도 속성이 따라 적용되는데, 감싸고 있는 애에게 overflow: hidden 을 주고 안에 들어있는 것들을 float : left 를 하면 그것에만 속성이 적용된다.
box-sizing 속성
border 사이즈는 바깥 쪽으로 형성된다. 그러나 border 속성을 주고 그 다음 box-sizing: border-box; 속성을 주면 안쪽으로 테두리가 생긴다. 쉬우니 내용은 생략..!
background-image 속성
배경을 지정하는 속성을 살펴보자.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div:first-child {
width: 80%;
margin: 0 auto;
height: 400px;
background-image: url('http://www.sba.seoul.kr/kr/images/index/visual5.jpg');
background-size: 100%;
}
div:last-child {
width: 80%;
margin: 0 auto;
height: 400px;
background-image: url('http://www.sba.seoul.kr/kr/images/index/visual5.jpg');
background-size: 50%;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
결과와 같이 보면서 해석해보면 우선 width : 80% 로 가로 전체의 80%로 너비를 지정한다.
margin: 0 auto 속성으로 컨텐츠를 가운데로 배치를 하게 해주고, 높이는 400px라서 사진이 짤린 형태이다.
위에 한장, 아래 두장은 각각 first-child, last-child 이다.
background-size : 50% 라는 속성은 이미지 갖고 온 것을 가로세로의 50%의 크기 -> 즉, 1/4 로 줄어든다는 것이다!
CSS background-size 속성 간단히 알아보기
안녕하세요. 오늘은 CSS에서 background-size 속성에 대해서 간단히 알아보도록 하겠습니다. background-size란? background-size 속성은 배경이미지의 사이즈를 조정하는 CSS 기능입니다. 또는, 여러가지 이미
ithub.tistory.com
background-size란?
- background-size 속성은 배경이미지의 사이즈를 조정하는 CSS 기능입니다.
- 또는, 여러가지 이미지 요소들을 하나의 png파일로 모아서 작업할 때 retina의 경우 화질이 더 높기 때문에 2배 이미지를 넣고,
background-size를 사용하여 1배 사이즈로 지정하여 이용하면 좋은 화질로 보여줄 수 있습니다. - img 태그에 적용하는 object-fit의 속성과 유사합니다.
종류
(이해를 돕기위해 kakaobank이미지를 사용합니다.)
- auto
- 기본값은 auto로 설정되며, background에 설정된 이미지의 원본 크기로 그대로 설정됩니다.
- cover
- 이미지의 비율을 유지하고자 할때 사용하는 옵션입니다.
- 현재 엘리먼트의 가로와 세로에 이미지를 맞추면서 비율을 유지하기위해 이미지를 확대 시킵니다.
- contain
- 이미지의 비율을 유지하고자 할때 사용하는 옵션입니다.
- 부모 엘리먼트 내부에 비율이 고정된 이미지가 들어갑니다. 이미지의 가로와 세로 중 큰 값을 기준으로 비율이 고정됩니다.
- px 또는 %
- px 또는 %를 사용하여 가로와 세로의 크기를 지정하여 사용할 수 있습니다.
(background-size: 700px 500px;로 설정하였을 경우)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div:first-child {
width:80%;
margin:0 auto;
height:400px;
background-image: url('http://www.sba.seoul.kr/kr/images/index/visual5.jpg');
background-size:30%;
border:1px solid red;
}
div:last-child {
width:80%;
margin:0 auto;
height:400px;
background-image: url('http://www.sba.seoul.kr/kr/images/index/visual5.jpg');
background-size:30%;
background-repeat:no-repeat;
border:1px solid red;
}
</style>
</head>
<body>
<div></div>
<br />
<div></div>
</body>
</html>
또한 background-attachment : fixed 속성은 브라우저의 시작부분에 고정을 하면서 이미지를 보여주겠다는 뜻이다!
'🧚🏻♂️ HTML , CSS' 카테고리의 다른 글
| CSS - overflow hidden, flow , gradient 속성 (0) | 2021.09.21 |
|---|---|
| CSS - 수직 가운데 정렬, position 속성 (0) | 2021.09.21 |
| CSS - 단위, url(), display 속성 (0) | 2021.09.20 |
| CSS - 문자 선택자, 링크 선택자, 부정 선택자 (0) | 2021.09.19 |
| CSS - 반응 선택자, 상태 선택자, 구조 선택자 (0) | 2021.09.19 |