[CSS] CSS 기본 문법 및 속성

CSS 기본 문법

style 속성

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

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

CSS 속성과 CSS 속성 값

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

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

여러 개의 CSS 속성 사용하기

여러 개의 CSS 속성을 사용할 때는 " " 안에서 세미콜론(;)으로 구분한다.

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

 

---

CSS 속성

배경색

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

글자색

<div style="color: #ffffff;">
   ...
</div>

글꼴

여러개면 아래처럼 쉼표(,)로 구분하며, 우선 적용할 우선 적용할 글꼴 이름부터 차례대로 적는다. 

글꼴 이름이 띄어쓰기가 있는 경우엔 따옴표로 감싸서 적는다.
sans-serif 나 serif 를 사용하면 산 세리프나 세리프 타입의 글꼴을 웹 브라우저가 알아서 적용해 준다.

<div style="font-family: Poppins, 'Noto Sans KR', sans-serif;">
   ...
</div>

글자 크기

<div style="font-size: 16px;">
   ...
</div>

긁자 굵기

100에서부터 900까지, 100 단위로 올라간다.

<div style="font-weight: 16px;">
   ...
</div>

너비

<div style="width: 800px;">
   ...
</div>

높이

<div style="height: 450px;">
   ...
</div>

안쪽 여백

값 1개만 입력 시 가로, 세로 모두 입력값으로 적용한다.

값 2개를 입력 시 순서대로 세로, 가로 순으로 적용한다.

// 가로, 세로 20px 예시
<div style="padding: 20px;">
   ...
</div>

// 세로 10px, 가로 20px 예시
<div style="padding: 10px 20px;">
   ...
</div>

바깥 여백

값 1개만 입력 시 가로, 세로 모두 입력값으로 적용한다.

값 2개를 입력 시 순서대로 세로, 가로 순으로 적용한다.

auto는 바깥 여백(margin)의 가로에서만 동작한다.

// 가로, 세로 20px 예시
<div style="margin: 20px;">
   ...
</div>

// 세로 10px, 가로 20px 예시
<div style="margin: 10px 20px;">
   ...
</div>

// 세로 10px, 가로 자동(알아서 채워 넣기) 예시
<div style="margin: 10px auto;">
   ...
</div>