CSS 문법 정리

style 속성

태그에 css를 적용하려면 style이라는 속성을 사용한다.

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

 

css 속성과 css 속성 값

css 코드를 추가할 때는 css 속성: css 속성값 형태로 적는다.
 

여러 개의 css 속성 사용하기

세미콜론(;)으로 구분한다.

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

 

css 기본 단위

색 이름
red, green, yellow처럼 색상을 이름으로 사용하는 방식이다. 다양한 색을 표현하는데 한계가 있어 거의 사용하지 않는다.
css 이름 목록 : https://www.w3.org/wiki/CSS/Properties/color/keywords

CSS/Properties/color/keywords - W3C Wiki

색상 코드
색상을 16진수로 표현한 값이다. 대부분 이 방법을 사용한다. 'color picker' 등을 검색하여 색상 코드를 확인해 볼 수 있다. 주로 이미지 편집 프로그램 같은 데서 디자인을 하면서 색상 코드를 정하게 된다.
 
픽셀
화면에서 그려지는 가장 작은 정사각형을 말한다. 이 사각형을 크기의 단위로 사용한다.
 
css 속성
배경색

backgound-color: #272928

글자색

color: #ffffff

글꼴
우선 적용할 글꼴 이름부터 차례대로 적어준다. 글꼴 이름이 띄어쓰기가 있는 경우엔 따옴표로 감싸준다.

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

구글 폰트 : https://fonts.google.com/ 

Browse Fonts - Google Fonts

글자 크기

font-size: 16px

글자 굵기
100 ~ 900까지 100 단위로 올라간다. 중간이 되는 값은 400이다.

font-weight :400

글자 정렬 위치
left, center, right를 통해 정렬할 수 있다.

text-align: center

너비

width: 560px

높이

height: 380px

안쪽 여백
아래는 세로 10px, 가로 20px의 예시이다. 

padding: 10px 20px

바깥 여백
auto는 가로 크기에 맞게 알아서 여백을 채워 넣는다. 참고로 auto는 바깥 여백의 가로에서만 동작한다.

margin: 10px auto