[CSS] Chapter 4-1

CSS란?

캐스캐이딩 스타일시트(Cascading Style Sheets)의 약자로 HTML 태그를 화면상에 어떻게 표현할지를 설정한다.

 

CSS는 디자인, 레이아웃, 다양한 기기 및 화면 크기에 따른 디스플레이의 다양성 문제를 포함한 웹 페이지의 스타일을 정의할 때 사용한다. PC 화면, 태블릿 화면, 스마트폰 화면의 크기는 각각 다르고 다양하다. 웹 페이지를 작성할 때 이들 화면의 종류에 따라 보이는 화면이 달라야 한다는 것을 알고 있어야 한다. 화면에 크기에 반응하여 자동으로 내용이 최적화되어 보인다면 매우 편할 것인데 이때 CSS로 해결할 수 있는 것이다. 이를 '반응형 웹' 이라고 한다.

 

CSS는 작성하려는 위치에 따라 크게 3가지 방법으로 작성할 수 있다.

1. 스타일시트를 태그의 style속성에 기술
   • <p style="color : blue;">연습</p>
2. 스타일시트를 HTML 문서 내에 포함해서 작성
   • <style> </style> 태그 내에 작성하는 방식
3. 스타일시트를 별도의 파일로 작성
   • 별도의 파일 .css 확장자 형태로 저장
   • <link> 태그를 사용해 적용하는 예제를 작성한다.

 

CSS 기본 규칙

스타일시트를 구성하는 규칙 집합은 실렉터와 선언 블록 ({})으로 구성된다. 실렉터에는 태그명, id 속성 값, class 속성 값이 올 수 있다. 실렉터에는 태그명, id 속성 값, class 속성 값이 올 수 있다.

실렉터 {
}

ex

h1{
}

 

선언 블록 안에는 선언들을 기술할 수 있으며, 선언들은 속성과 값의 쌍으로 이루어진다. 속성과 값은 콜론(:)으로 구분하며, 0개 이상의 선언을 나열할 수 있다. 선언과 선언 사이는 세미콜론(;)으로 구분한다.

실렉터{
속성 : 값;
}

ex

h1{ /*2개의 선언 나열*/
color:green;
font-size:20px;
}

 

 

실렉터의 종류

 

타입 실렉터 : HTML 태그명(엘리먼트명)으로 스타일시트 집합을 작성한다.

h1{
color:green;
font-size:20px;
}

 

유니버설 실렉터에는 속성 실렉터, ID 실렉터, Class 실렉터가 있다.

속성실렉터는 태그에 지정한 속성명이 있는 경우에만 스타일을 지정하는 방법으로 같은 태그 중 지정한 속성이 있는 태그에 스타일을 지정할 때 사용한다.

p[id] {
color : blue;
}

 

Class 실렉터는 여러 태그에 같은 스타일을 적용하기 위해 사용한다.

.area{
color:blue;
}

 

ID 실렉터는 태그의 id 속성의 값을 실렉터로 사용하는 방법이다.

div#display {
color:red;
}

 

속성을 크게 나누자면 다음과 같다.

• 색상과 배경(Colors and Backgrounds) 지정
• 폰트(Fonts) 지정
• 텍스트(Text) 지정
• 테이블(Table) 지정
• 테두리(Border) 지정
• 박스 모델(Box mode) 지정
• 가시성(Visibility)과 위치(Positioning) 지정

background-color

속성
값	<color>| transparent(투명한 색상지정) | inherit(부모로부터 상속)
기본 값	transparent(투명한 색상 지정)
적용 대상	모든 태그

 

background-image

속성
값	<uri> | none(없음) | inherit(부모로부터 상속)
기본 값	none(없음)
적용 대상	모든 태그

 

background-repeat

속성
값	repeat(수평, 수직 양방향으로 반복) | repeat-x(수평으로만 반복) | repeat-y(수직으로만 반복) | no-repeate(반복 안 함) | inherit(부모로부터 상속)
기본 값	repeat(반복)
적용 대상	모든 태그

 

background-attachment

속성
값	scroll(스크롤) | fixed(고정) | inherit(부모로부터 상속)
기본 값	scroll(스크롤)
적용 대상	모든 태그

 

background-position

속성
값	[ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit(부모로부터 상속)
기본 값	0% 0%(X와 Y의 크기로 쌍(pair)으로 기술
적용 대상	모든 태그

 

background

속성
값	[<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit(부모로부터 상속)
기본 값	individual properties(각각의 속성 값들)
적용 대상	모든 태그

 

font-family

속성
값	[[ <family-name> | <generic-family> ] [, <family-name>| <generic- family>]* ] | inherit(부모로부터 상속)
기본 값	웹 브라우저에 따라 다름
적용 대상	모든 태그

 

font-style

속성
값	normal | italic(기울임꼴) | oblique(기울임꼴) | inherit(부모로부터 상속)
기본 값	normal (스타일 없는 일반 형태)
적용 대상	모든 태그

 

font-variant

속성
값	normal | small-caps | inherit(부모로부터 상속)
기본 값	normal (스타일 없는 일반형태)
적용 대상	모든 태그

 

font-weight

속성
값	noraml | bold | border | lighter | 100 | 200 | 300 | 400  500 | 600 | 700 | 800 | 900 | inherit(부모로부터 상속)
기본 값	normal (스타일 없는 일반 형태)
적용 대상	모든 태그

 

font-size

속성
값	<absolute-size> | <relative-size> | <length> | <percentage> | inherit(부모로부터 상속)
기본 값	medium(중간 크기)
적용 대상	모든 태그

 

font

속성
값	[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <line-height'>? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit(부모로부터 상속)
기본 값	각각의 속성 값들
적용 대상	모든 태그