04. CSS 단위와 Background image

8180 단어 CSS멋사TILCSS

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 만 줘보았을 때 나타나는 결과값이다