CSS 기초 문법

 

CSS<Cascading Style sheet>

 

문법

selector{ attr1:value; attr2:value ..}

 

스타일 시트 적용 방식

1. 인라인(태그에 직접) 방식

2. <style> 태그에 저굥

3. 외부 파일에 정의

 

우선순위

인라인 > 작성 순서에 따라서.

 

선택자 (selector)

1. 기본 선택자

 

* : 전체 선택자. * { 속성:값;...}

type : 태그 선택자. 태그명 {속성:값;...}

. : 클래스 선택자. . 클래스명 {속성 : 값;...}

# : 아이디 선택자. #아이디 {속성:값;...}

[속성] : 속성 선택자. [target] {속성:값;...}

 

 

기본 선택자 조합

 

태그 + 클래스 : 태그.클래스 {...}

태그 + 아이디 : 태그#아이디 {...}

여러 선택자 그룹화 : 선택자, 선택자, 선택자... {...}

 

 

 

2. 조합 선택기

1) 후손(Descendant) 선택기 : 공백

모든 후손 요소(태그)를 선택.

2) 자식(Child) 선택기 : >

직계 후손(자식) 요소를 선택.

3) 인접한 형제 선택기 : +

태그의 바로 다음 태그를 선택.

4) 일반 형제 선택기 : ~

같은 형제 태그 모두를 선택.

 

위의 사항은 margin, padding, border에 같이 적용.

수치 단위는 %, px

 

 

box-sizing

가로 세로의 기본값

가로 = 너비(width) + 패딩 + 테두리

세로 = 높이(height) + 패딩 + 테두리

패딩과 테두리 두께로 인하여 가로, 세로 길이가 더 크게 나오는 상황 발생하여

box-sizing으로 width와 height의 패딩과 테두리 두께를 합쳐서 계산.

 

 

 

overflow 속성

box의 크기보다 내용물이 더 많을(클) 경우 내용물을 어떻게 보이게 끔 하는지를 지정.

value

visible : 기본값. 그대로 다 보여짐. 내용물이 영역을 벗어남.

hidden : 영역을 벗어난 내용물을 보이지 않게 함.

scroll : 영역에 스크롤바를 출력.

auto : 내용물이 영역을 벗어날 때 스크롤바를 출력.

벗어나지 않으면 스크롤바 출력 안됨.

 

text-decoration 속성

글자에 들어간 꾸밈 효과와 관련된 속성

글자 자체에는 영향을 주지 않음.

밑줄, 윗줄 등과 관련된 속성.

 

value

inderline : 밑줄 출력.

overline : 윗줄 출력.

dotted : 밑줄 또는 윗줄을 점선으로 출력

wavy : 밑줄 또는 윗줄을 물결선으로 출력.

color : 밑줄 또는 윗줄의 색상을 지정

none : 밑줄 또는 윗줄을 제거.

 

 

border 속성

대부분의 요소에 테두리를 지정할 수 있음.

border-style : 선의 종류

- dotter : 점선

- dashed : 파선

- solid : 실선

- double : 이중선

- none : 없음. 선의 두께가 없음 (기본값)

- hidden : 테두리는 있으나 보이지 않게 함. 두께를 지정할 수 있음.

- inset : 음각 표현

- output : 양각 표현

 

border-width : 선의 두께. 4방향 따로 지정 가능.

border-color : 선의 색상. 4방향 따로 지정 가능.

border-radius : 둥근 테두리 작성. pixel 단위로 작성.

 

3. 의사(Pseudo) 클래스 선택자

특수한 상태에 따라 요소를 선택하는 방식.

 

link: 하이퍼 상태(링크가 걸려있는) 요소 선택.

visited : 링크가 이미 방문한 사이트인 요소 선택

hover : 마우스가 요소 위로 올라갔을 때.

active : 링크를 클릭했을 때.