[CSS] 기초 정리

CSS(Cascading Style Sheet)

• 마크업 언어가 실제로 표시되는 방법을 기술하는 언어.
• CSS는 W3C의 표준이며, 레이아웃과 스타일을 정의할 때 자유도가 높은 언어이다.
• CSS는 웹 사이트에서 사용되는 스타일을 지정하기 위한 언어이다.
• 스타일은 웹 이전부터 워드프로세스 등에 사용했던 개념이다.

 

• 스타일 사용의 중요한 의미는 문서의 구조와 표현을 분리할 수 있다는 점이다.
• 구조와 표현을 분리함으로써 문서의 구조를 수정하지 않고, 스타일의 변경만으로 다양한 표현을 할 수 있다는 것을 의미한다.

 

• 선택자(selector)와 선언부(declaration block)로 이루어져 있다.
• 선언부는 속성(property)과 속성 값(value)으로 구성되어 있다.
• 선언부는 세미콜론(;)으로 속성과 속성 값을 구분하여 여러 개의 선언을 지정할 수 있다.

select{property:value; property:value}

css의 주석

/* CSS에서 사용할 수 있는 주석 */

css 단위

문자열 타입

• CSS에서 미리 정의된 키워드나 제작자가 정의한 저작자 키워드 등 텍스트로 입력하는 속성 값.

숫자 타입

• 개수 비율들을 나타낼 수 있는 정수, 실수 값, 퍼센트 값

길이 단위 타입

• 길이 단위 타입은 상대 길이 단위 값과 절대 길이 값이 있으며 상대 길이 단위 값은 특정 길이에 비율로 정해지는 값.

상대 단위

• em : 폰트의 기본 크기 값에 비례한 단위
• ex : 폰트의 기본 X 높이에 비례한 단위
• ch : "0"의 기본 폭에 비례한 단위
• rem : 최상위 요소의 폰트 크기에 비례한 단위
• vw : 뷰포트 너비에 비례한 단위
• vh : : 뷰포트 높이에 비례한 단위
• vmin : 뷰포트의 최소 너비, 높이에 비례한 단위

절대 단위

• cm : 센티미터 단위
• mm : 밀리미터 단위
• in : 인치 단위(2.54cm)
• px : 픽셀 단위(1/96 inch)
• pt : 포인트 단위(1/72 inch)
• pc : 피카 단위(12pt)

색상

RGBA형식

• color : rgba(255, 127, 45, 0.5)

HSLA 형식

• color : hsla(0, 0%, 100%, 0.5) => (색상, 채도, 명도, 투명도)

CSS 사용방법

External

• CSS 파일을 외부에 생성하여 HTML 문서에 연결하는 방식이다.
• <link> 요소를 사용하는 방법과
• @import 명령을 사용하는 두가지 방식이 있다.

Embedded

• HTML 파일 내에 CSS 코드를 직접 포함하여 스타일이 적용되도록 하는 방법.
• CSS 코드는 <style> 요소내에 선언한다.

Inline

• 특정 HTML 요소에 style 속성을 사용하여 CSS 코드를 선언하는 방법이다.
• 그러나 이런 방법은 구조와 표현의 분리하는 관점에서 바람직하지 않은 면을 가지고 있다.
• 특히 inline방식의 스타일은 선택자의 우선순위가 가장 높기 때문에 스타일의 재정의가 어렵거나 불가능한 경우가 발생할 수 있으므로 사용에 주의가 필요하다.

CSS 선택자

전체 선택자(Universal Selector)

• 전체 선택자는 모든 요소를 선택하는 방법으로, "*"를 선택자로 선언한다.

요소 선택자(Type Selector)

• 요소 선택자는 HTML 요소를 선택하는 방법이다.

클래스 선택자(Class Selector)

• 클래스 선택자는 HTML 요소의 class 속성 값을 참조하여 선택하는 방법이다.
• 이때 class 속성 값은 하나의 HTML요소에 여러 개를 지정할 수 있기 때문에 다중 class를 선택자로 지정할 수도 있다.

.note {font-size:1.6em;}

아이디 선택자(ID Selector)

• 아이디 선택자는 HTML요소의 id속성값을 참조하여 선택하는 방법이다.
• 이때 id속성 값은 하나의 HTML문서에 한 번만 사용할 수 있기 때문에 아이디 선택자를 사용하면 유일한 요소를 선택할 수 있다.

#onlyOne{font-weight:bold;}

하위 선택자(Descendant Combinator)

• 하위 선택자 방식은 선택자와 선택자를 공란으로 선언하며, 선행 선택자의 하위 요소 중 후행 선택자에 해당하는 요소를 선택하는 방법이다.

#main div{
    color:#339933;
    border:3px solid currentcolor;
    background:#FFFF00;
}

자식 선택자(Child Combinator)

• 자식 선택자 방식은 선행자인 부모 요소 하위에 포함된 후행 선택자인 자식 요소를 선택하는 방법이다.
• 부모 선택자와 자식 선택자는 ">"로 구분하여 선언한다.

#main > div{
	border:3px solid red;
}

형제 선택자(Sibling Combinators)

• 형제 선택자는 기본 형제 선택자와 인접 형제 선택자로 구분할 수 있다.
• 기본 형제 선택자는 선행 선택자와 후행 선택자를 "+"로 구분하여 선언하고,
• 인접 형제 선택자는 "~"로 구분하여 선언한다.
• [선택자] + [선택자] : 선행 선택자 뒤에 후행 선택자를 선택한다.
• [선택자] ~ [선택자] : 선행 선택자 뒤에 인접하여 등장하는 모든 후행 선택자를 선택한다.

h1+p{
color:#FF0000;
}
h2~p{
color:#0000FF;
}

속성 선택자(Attribute Selector)

• 속성 선택자는 HTML 요소의 속성을 참조하여 선택하는 방법을 의미하며, 이때 속성의 지정 여부나 속성 값의 일치 여부로 선택할 수 있다.

a[title]{
	text-decoration:underline;
}

가상 클래스 선택자(Pseudo-classes Selector)

• 가상 클래스 선택자는 요소의 상태나 상황에 따라 선택하는 방법으로, 링크의 경우 방문하기 전, 방문한 후, 링크 위에 마우스를 올려놓거나 포커스 시 등의 상황을 선택하여 스타일을 지정할 수 있다. 또한 언어에 따른 구분이나 마크업 구조에 따라 특정 요소를 선택할 수도 있다.

a:link{
    color:#0000FF;
    text-decoration:none;
}

가상 요소 선택자(Pseudo-element Selector)

• 가상 요소 선택자는 요소의 첫글자나 첫줄 또는 요소 앞이나 뒤 등 가상의 영역을 선택하고자 할 때 사용한다.

p:first-letter{
    font-size:5em;
    color:#0000FF;
    background:#FFFF00;
}

선택자 그룹화

• 앞의 모든 선택자는 콤마(,)를 사용하여 그룹으로 한번에 선언할 수 있다.
• 선택자를  그룹으로 선언할 경우, 선언된 모든 선택자에는 동일한 선언이 적용된다.

.title, #example, p{
	color:#0000FF;
}