웹 퍼블리싱 시작하기 : CSS 기본 문법

style 속성

태그에 CSS를 적용하려면 style이라는 속성을 사용함

<div style="...">
   ...
</div>

 

CSS 속성과 CSS 속성 값

CSS 코드를 추가할 때는 CSS 속성 : CSS 속성값 형태로 적음

<div style="color: #272928">
   ...
</div>

 

여러 개의 CSS 속성 사용하기

여러 개의 CSS 속성을 사용할 때는 세미콜론(;)으로 구분함

<div style="color: #272928; background-color: #eeeeee">
   ...
</div>

 

CSS 기본 단위

색 이름

red, green, yellow처럼 색상으로 이름을 사용하는 방식

다양한 색을 표현하는데 한계가 있기 때문에 거의 사용하지 않음

CSS 이름 목록 : https://www.w3.org/wiki/CSS/Properties/color/keywords 

CSS/Properties/color/keywords - W3C Wiki

 

색상 코드

색상을 HEX(16진수)로 표현한 값

보통 이 값으로 색상을 사용함

구글에서 'Color Picker' 같은 걸 검색해서 색상 코드를 확인할 수 있음

 

픽셀(px)

화면에서 그려지는 가장 작은 정사각형

 

CSS 속성

배경색

 

background-color: #272928

 

글자색

color: #ffffff

 

글꼴

글꼴 이름이 띄어쓰기가 있는 경우엔 따옴표로 감싸 줌

sans-serif나 serif를 사용하면 산 세리프나 세리프 타입의 글꼴을 웹 브라우저가 알아서 적용해 줌

font-family: Poppins, 'Noto Sans KR', sans-serif

 

글자 크기

font-size: 16px

 

글자 굵기

100에서 900까지 100단위로 올라감

중간이 되는 font-weight 값은 400임

font-weight: 400

 

너비

width: 560px

 

높이

height: 380px

 

안쪽 여백

padding: 10px
padding: 10px 20px

 

바깥 여백

margin: 10px
margin: 10px 20px
margin: 10px auto

 

* 여백 순서 : 세로, 가로