CSS
- Cascading Style Sheets
- 스타일을 사용하는 이유
- 웹 문서의 내용과 상관 없이 디자인만 바꿀 수 있음
- 다양한 기기에 맞춰 탄력적으로 바뀌는 문서를 만들 수 있음
- 웹 페이지를 표현하기 위한 스타일 규칙을 모아놓은 문서
구성
- 선택자 (Selector), 선언 (Declaration) 두 부분으로 구성됨
- 선택자는 규칙이 적용되는 Element
- 선언 부분에는 선택자에 적용될 스타일을 작성
- 선언은 중괄호로 감싸며, 속성(Property)과 값(Value)로 이루어짐
.Selector{Declaration1: value1; Declaration2: value2;}
- 속성(Property)은 선택자에서 바꾸고 싶은 요소
- (color, font, width, height, border, …)
- 값(value)은 속성에 적용할 값
- 선택자 그룹화 - 여러 선택자에 동일한 스타일을 적용할 때, comma(,)로 구분하여 나열
- 선언 안에 하나 이상의 속성을 작성할 수 있으며, 각 속성은 semi-colon(;)으로 구분
- 주석 : /* 내용 */
스타일 시트 적용
- 적용 우선 순위 : 인라인 스타일 > 내부 스타일 시트 > 외부 스타일
외부 스타일 시트 적용
- link tag
- <link>를 사용하여 외부 스타일 시트를 적용
- <link>는 <head>안에 작성하며 rel, type, href 3가지 속성을 주로 사용
- rel은 HTML 페이지와 링크된 파일간의 관계를 의미
- href는 CSS File 경로
- style tag
- <style> tag로도 외부 스타일 시트를 적용 가능. 이는 css 파일 내부에서도 사용 가능하다는 의미
- @import는 스타일 시트 중 최상단에 위치해야 함
- @import url("file path"); 또는 @imporot "file path"; 형태로 사용
- <link>와 달리 <style>의 media 속성을 통해 보여지는 미디어 타입을 설정
내부 스타일시트 적용
- style tag
- <style>을 사용하여 내부 스타일 시트를 적용
- <style> tag 내부에 CSS 규칙을 작성
- 외부 스타일 시트보다 우선적으로 적용됨
- <head> tag 내부에 작성해야 함
인라인 스타일 적용
- 개별 element마다 스타일을 지정하므로 유지보수에 용이하지 않음
- Style 속성을 사용하고 속성값으로 CSS 규칙을 작성
CSS 상속
- CSS는 상속을 통해 부모의 속성을 자식 요소에게 상속시킴
- 모든 속성(프로퍼티)이 상속되는 것은 아님
- 상속되는 속성
- Text 관련 속성 : font-family, font-size, font-weight, line-height, text-align
- opacity, visibility, color, list-style, white-space
- 상속되지 않는 속성
- Box Model 관련 : width, height, margin, padding, border, box-sizing, display
- Position 관련 : position, top/right/bottom/left, z-index, overflow, fload
- background, vertical-align, text-decoration
- 상속되지 않는 속성을 상속받는 방법
