CSS의 여러 단위와 속성

<SeongHun />·2022년 4월 7일
CSSTIL멋쟁이 사자처럼
1

CSS

목록 보기
8/11
post-thumbnail

오늘의 키워드📌

  • 단위(Units)
    • 절대 길이 단위
    • 상대 길이 단위
  • overflow
  • background
  • font
  • display:none / over-flow:hidden
  • background-position





1. 단위(Units)

단위의 분류

  • 절대 길이 단위 : cm, mm, px 등
  • 상대 길이 단위 : em, rem, vw, vh 등
  • 백분율 : %

MDN - CSS 값과 단위


1-1. 절대 길이 단위 (Absolute length units)

px

'화소' 를 의미하는 Pixel(Picture + Element)의 약자로 디바이스 화면에서 이미지를 표현하는 가장 작은 단위이다.

px은 절대 길이 단위로 CSS에서 많이 쓰이는 기본 단위다. 상대 길이 단위와는 다르게 사용자가 선언한 고정된 크기 그대로를 화면에 그리기 때문에 직관적으로 쉽게 사용할 수 있다.

대부분의 브라우저에서 폰트의 초기 기본 px 크기는 16px 이다.


1-2. 상대 길이 단위 (Relative length units)

  • em : 배수 단위. 부모 요소의 글자 크기를 기준점으로 한다.
  • % : 부모 요소를 기준으로 하는 백분율 단위.
  • rem : root em. 최상위 요소인 html의 글자 크기를 기준점으로 한다.
  • vw : 화면 넓이를 기준으로 하는 백분율 단위.
  • vh : 화면 높이를 기준으로 하는 백분율 단위.
  • vmin : 화면의 넓이와 높이 중 작은 값을 기준으로 하는 백분율 단위.
  • vmax : 화면의 넓이와 높이 중 큰 값을 기준으로 하는 백분율 단위.
  • ex : 현재 폰트의 x-height 값. 즉, 현재 폰트의 소문자 x의 높이 값을 기준으로 한 백분율 단위.





2. overflow

2-1. overflow 뜻

overflow 속성은 요소의 콘텐츠가 너무 클 경우 요소를 어떻게 처리할 지 지정한다. overflow-x, overflow-y의 축 별로 값을 설정할 수 있다. overflow 속성은 첫 번째로는 overflow-x를, 두 번째로는 overflow-y를 지정한다. 하나만 사용하면 지정한 값을 양 축 모두에 적용하는 축약형이 된다.

MDN - overflow


2-2. overflow 중요 속성

  • visible : overflow 속성의 기본 값이다. 콘텐츠를 자르지 않는다.
  • hidden : 콘텐츠를 요소의 크기만큼 맞추기 위해 잘라낸다. 스크롤 바를 제공하지 않는다.
    • float나 마진 병합 현상 등에서 자식 요소의 넓이나 높이를 포함시키기 위해서도 많이 사용한다. 자세한 내용은 float에서 살펴보자!
  • scroll : 콘텐츠를 요소의 크기만큼 맞추기 위해 잘라낸다. 잘려진 나머지 부분을 확인할 수 있도록 스크롤 바를 제공한다.





3. background

웹 페이지에 이미지를 넣을때 주로 사용하는 2가지 방법

  • img 태그를 사용하는 방법
  • CSS의 background 속성을 사용하는 방법

태그는 웹 페이지의 콘텐츠이며 background 속성은 콘텐츠를 꾸미기 위한 용도로 많이 쓰인다.


background의 세부 속성

  • background-image : URL을 이용해 이미지의 주소에서 이미지를 불러온다.
  • background-color : background의 색을 지정해 준다.
  • background-repeat : 배경이미지의 반복을 지정해 준다.
  • background-position : 배경이미지의 위치를 지정해 준다.
  • background-attachment : 배경이미지를 고정시킬 수 있다.

img 태그와 background-image의 사용

주로 백엔드 개발자와 협업해야 하는 공간에는 img 태그, 프론트엔드 개발자 혼자 작업하는 공간에는 background-image를 사용한다. 스크린리더가 읽지 않아야 하는 곳에서 사용하기도 한다.





4. font

font-family를 사용하면 CSS를 적용하여 글꼴을 변경할 수 있다. 이때 글꼴은 여러 개가 지정가능한데 여러 개를 지정하는 이유는 해당 서체가 없을 경우 그 다음 글꼴이 차선책으로 사용되도록 하기위해서다.

font-size를 사용하면 CSS를 적용하여 글꼴의 크기를 변경할 수 있다. 글꼴을 지정하는데 일반적인 방법 3가지는 px, %, em 단위들이 있다.

4-1. Web font

web fonts를 사용하면 사용자의 컴퓨터에 설치되어 있지 않은 글꼴을 사용할 수 있다.

예제1

<head>
    <link href = 
          'http://fonts.googleapis.com/css?family=Open+Sans:400.300'
          rel='stylesheet' 
          type='text/css'>
    <style type = "text/css">
      h1 {font-family: 'Open Sans', sans-serif;}
    </style>
</head>

추천 웹 폰트 사이트

  • Google fonts : 구글 폰트는 가장 대표적인 웹 폰트 사이트이다.
  • 눈누 : 눈누는 상업용 무료 한글 폰트 사이트로, 상업적으로 사용할 수 있는 무료 한글 폰트를 모아 놓은 사이트이다.
  • Adobe Fonts : 어도비 폰트에서도 다양한 웹 폰트를 제공한다.
  • 네이버 글꼴 : 네이버가 개발한 글꼴을 다운로드하거나 웹 폰트 URL을 통해 사용할 수 있다.

추천 웹 폰트

추천 웹 폰트





5. display:none / overflow:hidden

5-1. display ?

display 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정한다.

형식적으로는 요소의 내부와 외부 display 유형을 설정한다.

  • 외부 display 유형 : 플로우 레이아웃에 요소가 참여하는 방법을 나타낸다.
  • 내부 display 유형 : 자식의 레이아웃 방식을 설정한다.

display: none을 사용하면 공간을 차지하지 않고, 빈공간도 남겨두지 않으면서 보이지도 않게 된다.

5-2. overflow ?

overflow 속성은 요소의 콘텐츠가 너무 클 경우 요소를 어떻게 처리할 지 지정한다.

overflow: hidden을 사용하면 콘텐츠를 요소의 크기만큼 맞추기 위해 잘라낸다. 스크롤 바를 제공하지 않는다

스크린 리더

  • display: none을 사용하면 스크린리더에서 내용을 읽지 못한다.
  • overflow: hidden을 사용하면 스크린리더에서 내용을 읽을 수 있다.





6. background-position

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>보강설명</title>
    <style>
      div {
        width: 425px;
        height: 200px;
        margin: 20px;
        background-image: url("https://www.tvn-2.com/nacionales/Imagen-ilustrativa-gato-medio-bosque_18585331.jpg");
        background-size: 100px auto;
        border: 4px solid black;
      }
      .one {
        background-position: 10px 10px;
        background-size: cover;
      }
      .two {
        background-position: 10px;
        background-size: cover;
      }
      .three {
        background-position: bottom 50px right 50px;
        background-size: cover;
      }
      .four {
        /* center, right, left, bottom, top */
        background-position: center;
        background-size: cover;
      }
      .five {
        background-size: cover;
      }

      .six {
        background-size: contain;
        /* 주석처리 해보세요. */
        background-repeat: no-repeat;
      }

      .seven {
        width: 200px;
        height: 400px;
        background-size: contain;
        background-repeat: no-repeat;
      }

      .eight {
        /* 이미지의 넓이, 높이 */
        background-size: 100% 100%;
      }
    </style>
  </head>
  <body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
  </body>
</html>





몰랐던 점 ✏️

  • vmin, vmax
  • font leading 영역
  • display:none과 overflow-hidden 차이
  • 클랙 재킹, XS-Leak 공격





오늘 하루를 정리하며.. 🌃

다소 헷갈리는 CSS 개념들이 많이 등장했지만, 넘지 못할 허들로 보이진 않는다.
앞으로 넘어야 될 허들이 몇 갠데! 그리고 얼마나 더 높은데! 벌써 허들에 걸려 쓰러질 수는 없다! 넘어질 수는 있어도 쓰러질 수는 없다! 다 넘어버리고 부숴버리자!!🔥

오늘 마지막 시간에 HTML/CSS를 이용해 간단한 캐릭터를 만들어 보았다.

"천하제일 캐릭터 만들기 대회" 에서 다들 어떤 캐릭터들을 만들지 벌써부터 기대가 된다!

profile
<SeongHun />
프론트엔드 개발자..? 쉽지 않겠는걸.. 그치만 재밌는데? 좋아~ 가보자구!
이전 포스트

Flex와 가상 선택자를 배웠습니다.

다음 포스트

마진 병합 현상, 박스, 벤더 프리픽스

2개의 댓글

comment-user-thumbnail
aydennote
2022년 4월 7일

오늘도 깔끔한 정리 감사드립니다 ㅎㅎ.
제 블로그 보다 성훈님 블로그를 더 많이 들어오고 배우는 것 같아요 🤣

1개의 답글