CSS

CSS는 HTML에서 디자인을 하기 위한 스타일 시트 언어이다. 주로 HTML내 style태그 내에서 사용되거나 link로 연결해서 사용한다.

---

CSS에서는 속성을 적용시키는 3가지 방법이 있다.

태그로 지정하는 방법

Tag {
	key:value;
}

이후 다른 작업 없이 해당 태그에 이 속성이 붙게 된다.

---

클래스를 사용하는 방법

.Class {
    key:value;
}

이후 사용시 class속성으로 지정하여 불러올 수 있다. id 선택자와 달리 재사용이 가능하며,  div태그와 주로 사용된다.

---

ID를 사용하는 방법

#Id {
    key:value;
}

이후 사용시 id속성이로 지정하여 불러올 수 있다. class 선택자와 달리 재사용이 불가능하며, id를 지정하는 대부분의 태그에서 사용된다.

---

CSS에서는 특정 상태에 있는 요소를 가져오는 가상 선택자가 있다.

:hover	마우스 커서가 위에 있을 때(클릭하거나 포커스가 되어 있지 않아도 됨.)
:active	클릭하고 있는 상태
:focus	클릭하거나 포커스 되어있는 상태
:link	(주로 a태그에서)링크에 방문하지 않은 상태
:visited	(주로 a태그에서)링크에 방문한 상태
:checked	(주로 input태그에서)체크 되어 있는 상태
:disabled	(form태그에서)비활성화된 상태
:enabled	(form태그에서)활성화된 상태

 

---

CSS에서 HTML에 존재하지 않는 가상의 요소에 스타일을 지정할 수 있다. 이를 가상 요소 선택자라고 한다.

::before	요소 앞에 다른 요소 삽입
::after	요소 뒤에 다른 요소 삽입
::first-line	첫 줄에만 스타일 지정
::first-letter	첫 글자에만 스타일 지정

 

---

CSS에서 글자에 스타일을 지정할때, font를 사용한다.

font-family	글꼴 종류 지정
font-size	글꼴 크기 지정
font-style	글꼴 기울임 지정
font-weight	글꼴 굵기 지정
font-variant	소문자를 작은 대문자로 변환
font	모든 글꼴 속성 일괄 지정

---

CSS에서 글자를 꾸밀때 쓰이는 태그는 다음과 같다.

color	글자 색상 지정
text-shadow	글자 그림자 지정
text-decoration	글자에 줄 긋기(밑줄, 취소선등)
text-transform	글자의 대소문자 변환
letter-spacing	글자 간격 지정
word-spacing	단어 간격 지정

---

CSS에서 배경 부분을 설정할 수도 있다. 이때는 background속성을 사용한다.

background-color	배경 색상 지정
background-image	배경 이미지 지정
background-size	(배경 이미지를 사용한 경우)배경 이미지의 크기 지정
background-repeat	(배경 이미지를 사용한 경우)배경 이미지의 반복 형태 지정
background-attachment	(배경 이미지를 사용한 경우)배경 이미지의 부착 형태 지정
background-position	(배경 이미지를 사용한 경우)배경 이미지의 위치 지정
background	배경 속성 일괄 지정

---

이 외에도 다양한 속성이 있다. 추후 필요한 경우 더 정리할 예정이다.