티스토리 뷰
CSS 속성공부 #1 / 단위에 대해 알아보자 / AimHo
이전에는 CSS 선택자를 살펴보았다. 이번에는 CSS 스타일 속성과 값을 이용해 웹 페이지를 디자인하는 방법에 대해 공부하도록 하겠다.
굉장히 많은 내용이 나오지만 외우려고 생각하지 말고, 이런게 있구나~ 하고 넘어가면 된다. 사용하고 싶은 속성의 코드를 모르면 구글링을 통해 이렇게 쓰는구나 하고 사용하면 된다. 코드를 여러 번 입력하다 보면 저절로 외워지기 마련이다.
CSS 단위란?
CSS의 스타일 값으로 입력할 수 있는 단위를 말한다.
여기에는 키워드, 크기, 색상, URL 총 4가지가 있다. 속성별로 한 가지 단위만 사용할 수 있는 건은 아니므로 우선 스타일의 값의 단위 종류부터 알아보자.
키워드단위
키워드는 W3C에서 미리 정의한 단어이다. 키워드를 스타일 값으로 입력하면 키워드에 해당하는 스타일이 자동으로 적용된다. 스타일 속성별로 사용할 수 있는 키워드가 존재하므로 이를 모두 설명하기는 힘들다.(무수히 많은 키워드가 존재한다)
여러 개발 환경 툴에서도 이를 인지하고 있다. 그래서 대부분 속성은 자동 완성 기능이 제공된다.
크기단위
크기는 CSS3에서 가장 많이 사용하는 단위며 종류에는 %, em, cm, mm, inch, px가 있다. 이 중에서도 가장 많이사용하는 단위는 %(백분율), em(배수), px(픽셀) 이다.
%와 em은 기본으로 설정된 크기를 기준으로 상대적인 크기를 지정한다. 이때 초기에 설정된 크기값은 %는 100% em은 1em이다.
간혹 em의 뜻을 모르는 분들이 있는데, 어렵게 생각할 것 없다. 배수를 나타내는 단위로 1.5배 = 1.5em = 150% 이다. 그럼 예제 코드를 통해 살펴보도록 하겠다.
AimHo CSS 공부 초기값
AimHo CSS 공부 150% / 1.5em
AimHo CSS 공부 200% / 2em
AimHo CSS 공부 초기값
AimHo CSS 공부 150% / 1.5em
AimHo CSS 공부 200% / 2em
앞서 %와 em은 상대적으로 크기를 지정했지만, px는 절대적인 크기를 지정한다.
AimHo CSS 공부 초기값
AimHo CSS 공부 15px
AimHo CSS 공부 30px
AimHo CSS 공부 초기값
AimHo CSS 공부 15px
AimHo CSS 공부 30px
크기단위는 font-size 외에 width, height 등 여러 속성에서 사용할 수 있다.
색상단위
색상을 입력하는 가장 간단한 방법은 영단어로 입력하는 것이다. 하지만 영단어로 표현할 수 있는 색상은 제한되어 있기 때문에 CSS3에서는 RGB(red, green, blue), RGBA(red, green, blue, alpha), HEX코드 색상단위를 제공한다.
영단어로 입력하는 방법은 간단하다. 아래와 같이 입력하면 된다.
그 다음 RGB, RGBA, HEX 코드로 입력하는 방법도 비슷하다.
URL단위
이미지나 파일을 불러올 때는 URL 단위를 사용한다. 웹 페이지에 넣을 이미지 image.png 와 이미지를 사용하여 작성할 HTML.html 파일이 한 폴더에 있다고 가정하고 설명하겠다.
background-image 속성을 사용하면 배경 이미지를 지정할 수 있다. 이때 background-image 속성에 'url(경로)' 형태로 URL 단위를 입력한다. 이미지가 존재하는 위치에 따라 URL 경로를 다음과 같이 입력하여 파일에 접근한다.
1. html파일과 이미지 파일이 같은 폴더에 있는 경우
2. Other 폴더에 이미지 파일이 있는 경우
3. 현재 폴더의 루트 폴더 어딘가 이미지 파일이 존재할 경우
오늘은 이만하고 내일은 이어서 박스 속성에 대해 알아보도록 하자!
