1. 단위 (units)
단위에는 어떤 것들이 있을까 ?
1. px
- ‘화소’ 를 의미하는 Pixel(Picture + Element)의 약자로 디바이스 화면에서 이미지를 표현하는 가장 작은 단위
- 고정 크기 단위로 CSS에서 많이 쓰이는 기본 단위
- px 로 하면 나중에 유지보수에 조금 귀찮음
2. em
- 상대 길이 단위
- 배수 단위
- 부모의 글자크기에 따라 기준점이 달라진다
- 예시로 body 에 em 값을 이용해 폰트사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향 받는다.
+ rem
- root em , 즉 최상위 em
- 최상위 태그에 지정한 것을 기준으로 삼으며, 보통 최상위 태그는 html 이다
- 폰트사이즈 뿐만 아니라 그리드시스템에서도 사용!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font</title>
<style>
body { font-size: 30px; }
div { font-size: 0.8em; }
p { font-size: 1.2em; }
</style>
</head>
<body>
<!-- body의 크기인 30px을 따른다. -->
em의 처음 크기는 30px 입니다.
<div>
<!-- 부모 body의 크기인 30px에 div의 크기인 0.8을 곱한다. -->
<br>em의 크기는 30 * 0.8 = 24px 입니다.
<div>
<!-- 부모 body의 크기인 24px에 div의 크기인 0.8을 곱한다. -->
<br>em의 크기는 24 * 0.8 = 19.2px 입니다.
<div>
<!-- 부모 div의 크기인 19.2px에 div 크기인 0.8을 곱한다. -->
<br>em의 크기는 19.2 * 0.8 = 15.36px 입니다.
</div>
</div>
</div>
<!-- 부모 body의 크기인 30px에 p의 크기인 1.2을 곱한다. -->
<p>p의 크기는 30 * 1.2 = 36px 입니다.</p>
</body>
</html>2. vh / vm (vertical height & vertical width)
vh (vertical height) : 화면 높이를 기준으로 하는 백분율 단위
vw (vertical width) : 화면 넓이를 기준으로 하는 백분율 단위
- 상대 길이 단위
- 타켓 요소의 너비값과 높이값을 viweport 의 너비값과 높이값에 맞게 사용할 수 있다
vh요소는 높이값의 100분의 1의 단위- 브라우저 높이값이 900px 이라면
vh는 높이값의 100분의 1인 9px 이 된다
3. vmin & vmax
vmin(viewport minimum) : 뷰포트 너비 또는 높이를 기준으로 하는 최소 값
vmax(viewport maximum) : 뷰포트 너비 또는 높이를 기준으로 하는 최대 값
-
vh와vw이 늘 뷰포트의 너비값과 높이값에 상대적인 영향을 받는다면vmin과vmax는 너비값과 높이값에 따라 최대, 최소값을 지정할 수 있다. -
n vmin의 가로 기준
: 뷰포트에서 짧은 쪽 기준 n% -
n vmax의 세로 기준
: 뷰포트에서 긴쪽 기준 n%
2. Background-image
이미지를 넣는 방법에는 2가지가 있다.
1. Html 에 img 를 사용
2. CSS 에서 background-img 로 url 삽입
img 를 쓸때는?
- 주로 백엔드 개발자와 협업해야 하는 공간에는 img 태그, FE 혼자 작업하는 공간에는 background-image를 사용
- 스크린리더가 읽지 않아야 하는 곳에서 사용하기도 한다.
🍯 꿀팁 !
빈 이미지 넣고싶을 때
<img src="https://via.placeholder.com/640x400" alt="샘플이미지">를 넣어주면
깡통이미지를 대체 이미지로 넣어줄 수 있다 !
background-position & size
background-position 에는 center, right, left, bottom, top 의 속성이 있다.
이 이미지를 갖고 실습을 해보면
아래 예시는 background-position 없이 background-size:cover 만 줘보았을 때 나타나는 결과값이다
background-size:cover 주고 포지션 설정해주지 않으면 위 이미지처럼 잘리기때문에 center 같이 써주기!(중앙정렬이 되면서 잘림)
background-position
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;bottom에서 10px , right에서 20px 이런식으로 작성이 가능하다.
background-position: bottom 10px right 20px;하지만 center은 중앙정렬이기 때문에 이런 값을 넣어줄 수 없다! (당연함 ..)
