CSS Declarations

황상진·2022년 8월 1일
CSS
0

CSS

목록 보기
7/13
post-thumbnail

CSS declarations

단위

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

절대 길이 단위

px

  • ‘화소’ 를 의미하는 Pixel(Picture + Element)의 약자로 디바이스 화면에서 이미지를 표현하는 가장 작은 단위입니다.
  • px은 절대 길이 단위로 CSS에서 많이 쓰이는 기본 단위입니다.
  • 대부분의 브라우저에서 폰트의 초기 기본 px의 크기는 16px입니다.

상대 길이 단위

em

  • 배수 단위. 부모 요소의 글자 크기를 기준점으로 합니다

%

  • 부모 요소를 기준으로 하는 백분율 단위

rem

  • root em. 최상위 요소(<html>)의 글자 크기를 기준점으로 하는 배수 단위입니다.

vw

  • 화면 넓이를 기준으로 하는 백분율 단위

vh

  • 화면 높이를 기준으로 하는 백분율 단위

vmin

  • 화면의 넓이와 높이 중 작은 값을 기준으로 하는 백분율 단위

vmax

  • 화면의 넓이와 높이 중 큰 값을 기준으로 하는 백분율 단위

ex

  • 현재 폰트의 x-height 값, 즉 현재 폰트의 소문자 x의 높이 값을 기준으로 한 백분율 단위

overflow

  • visible - overflow의 기본 값, 콘텐츠를 자르지 않는다.
  • hidden - 콘텐츠를 요소의 크기만큼 맞추기 위해 잘라냅니다. 스크롤 바를 제공하지 않습니다.
  • scroll - 콘텐츠를 요소의 크기만큼 맞추기 위해 잘라냅니다. 잘려진 나머지 부분을 확인 할 수 있도록 스크롤 바를 제공합니다.

background-image

  • background-image 속성은 html 요소뒤에 이미지를 배치할 때 사용합니다
  • 어떤 요소에서든 이미지를 사용하여 컨텐츠를 꾸밀 수 있습니다.
  1. background-image : url을 이용해 이미지의 주소에서 이미지를 불러옵니다.
  2. background-color : 요소의 배경 색을 지정합니다.
  3. background-repeat : 배경이미지를 어떻게 반복할것인지 지정합니다.
    • repeat
    • no-repeat
    • repeat-x
    • repeat-y
    • round - 이미지가 짤리지 않게, 이미지 크기 변화를 줘서 간격 없이 반복
    • space - 이미지가 짤리지 않게, 이미지 크기는 유지한채로 간격을 줘서 반복
  4. background-size
    • cover - 이미지를 넓이와 높이에 맞게 잘라냅니다.
    • contain - 이미지 넓이나 높이에 맞춰 자신의 이미지를 모두 다 넣고 반복합니다.

font

font-size

  • https://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=medium

  • medium : 웹브라우저에서 정한 기본 글자크기입니다.

  • xx-small, x-small, small, large, x-large, xx-large : 이름에서 알 수 있듯이 기본 글자 크기에서 작은 값부터 큰 값의 순입니다.

  • smaller, larger : 부모 요소의 font-size를 기준으로 하는 상대적 글자 크기입니다.

  • length : px, cm 등 고정된 길이와 %, em, rem 와 같은 가변 길이를 사용할 수 있습니다.

  • initial : 기본값으로 설정합니다.

  • inherit : 부모 요소의 속성값을 상속받습니다.

font-family

  • family-name : 궁서, 굴림, arial같은 글꼴 이름을 사용합니다. 지정한 글꼴이 사용자의 컴퓨터에 설치되어 있지 않을 경우, 글꼴은 브라우저 기본값으로 표시됩니다.
  • initial : 부모의 속성을 상속받지 않고, 기본값으로 초기화합니다.
  • inherit : 부모의 속성을 상속 받습니다.

font 다운받는 여러 방법

  • google font
// 사용예시1 : href 참고
<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>
// 사용예시2 : url 참고
<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>
  • @font-face - 브라우저 사용자의 컴퓨터에 특정 폰트가 설치되어 있지 않아도 @font-face 속성을 통해 폰트를 설치하여 사용하도록 할 수 있습니다.
@font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("https://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
    }

font format

  • eot - 마이크로소프트가 웹에서 사용하기 위해 제안한 글꼴 포맷입니다. IE 에서만 지원 가능합니다.
  • woff - 여러 회사들의 협업으로 제안된 포맷이며 가장 널리 사용되는 웹 글꼴 포맷입니다.
  • otf - 어도비와 마이크로소프트가 협력해서 만든 TTF의 개선판입니다.
  • ttf - 애플과 마이크로소프트가 고안한 벡터 글꼴 포맷입니다. 대부분의 웹 브라우저에서 웹 글꼴로 TTF를 지원합니다.
  • svg - 벡터 데이터를 저장하는 SVG를 활용한 글꼴 표현입니다.
  • woff2 - WOFF 포맷을 개선해 30% 정도 더 작은 글꼴 파일로 압축할 수 있도록 했습니다. 폰트의 용량을 줄이는데 효과적입니다.

font-weight

font-weight는 글자 굵기를 설정하는 속성입니다.

  • normal - 기본값이며 보통 굵기입니다.
  • bold - 굵은 굵기입니다.
  • bolder - 상속된 값보다 굵은 굵기입니다.
  • lighter - 상속된 값보다 얇은 굵기입니다.
  • number- 숫자로 굵기를 지정하며 100,200,300,400과 같은 숫자를 이용합니다.
  • initial- 기본값으로 설정합니다.
  • inherit- 부모 요소의 속성값을 상속받습니다.

text-align

  • 텍스트의 정렬을 표현
  • left - 왼쪽 정렬
  • right - 오른쪽 정렬
  • center - 가운데 정렬
  • justify - 마지막줄을 제외하고 양쪽으로 정렬

opacity

  • 요소의 투명도를 지정 할 수 있습니다. 이때 투명도가 들어간 요소 안의 내용물도 함께 투
    명해집니다. 값은 0.0 과 1 사이의 숫자를 지정할 수 있으며 만약 값이 0.5라면 투명도는 50%라고 할 수 있습니다.

color

  • 색상 이름, RGB값, HEX값, HSL값으로 색상을 지정할 수 있습니다.

색상 이름(color keyword)

  • 브라우저는 140 가지 색상 이름을 지원합니다. 다른 표현방식에 비해 수가 제한적입니다.

RGB, RGBA값

  • 빛의 3원색인 빨간색(Red), 초록색(Green), 파란색(Blue)를 혼합하여 색을 나타내는 방식.
  • RGB 값은 0 ~ 255의 값으로 표현됩니다.

HEX 값(16진수)

  • HEX 값은 16진수 6자리 코드로 색상을 표현하는 방식입니다. 6자리 코드는 각각 2자리씩 빨간색, 녹색, 파란색에 대한 값을 표현합니다.

HSL, HSLA

  • HSL 색상 모델은 색상(hue), 채도(saturation : 선명도), 명도(lightness : 밝기)를 통해 색상을 표현합니다. 선택사항으로 RGBA처럼 색의 투명도를 알파 채널로 표현할 수 있습니다.
profile
황상진
Web FrontEnd Developer
이전 포스트

CSS Box Model

다음 포스트

CSS Text

0개의 댓글