CSS
Cascading Style Sheets의 약자
스타일 사용이유
- 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.
- 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다.
웹 페이지를 표현하기 위한 스타일 규칙을 모아 놓은 문서
웹 브라우저 별 CSS3 지원
CSS 구성
CSS 규칙은 선택자(selector)와 선언(declaration) 두 부분으로 구성
선택자는 규칙이 적용되는 엘리먼트
선언 부분에서는 선택자에 적용될 스타일을 작성
선언은 중괄호로 감싸며, 속성(property)과 값(value)로 이루어짐
속성은 선택자에서 바꾸고 싶은 요소 (color, font, width, height, border, …)
값은 속성에 적용할 값
여러 선택자에 동일한 스타일을 적용할 때, comma(,)로 구분하여 나열. (선택자 그룹화)
선언 안에 하나 이상의 속성을 작성할 수 있으며, 각 속성은 semi-colon(;)으로 구분.
주석 : /* 내용 *
외부 스타일 시트 적용
<link>를 사용하여 외부 스타일 시트를 적용
<link>는 <head>안에 작성하며 rel, type, href 3가지 속성을 주로 사용
rel은 HTML 페이지와 링크된 파일간의 관계를 의미.
href는 CSS file 경로를 의미함.
link와는 달리 style tag 안에 설정, 이는 css 파일 내부에서도 사용가능하다는 뜻
@import는 스타일 시트 중 최상단에 위치해야 함
@import url(”file path”); 또는 @import “file path”; 형태로 사용
<link>와 달리 <style>의 media 속성을 통해 보여지는 미디어 타입을 설정
내부 스타일 시트 적용
<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, float
- background, vertical-align, text-decoration
상속되지 않는 속성을 상속받기
- inherit를 사용하여 상속받기
요약
<link rel=”stylesheet” href=”../css/style.css”>를 사용하여 외부 스타일시트를 적용
내부 스타일 시트는 <head> tag 내부에 <style></style> tag를 정의하고 CSS를 정의
인라인 스타일을 이용해서 각 element마다 스타일을 적용할 수 있는 방법도 있지만 유지보수에 용이하지 않다.
'CSS' 카테고리의 다른 글
| CSS 포지셔닝 (0) | 2023.03.09 |
|---|---|
| CSS Display (0) | 2023.03.09 |
| CSS Box Model (1) | 2023.03.09 |
| CSS 속성 (0) | 2023.03.09 |
| CSS 선택자 (0) | 2023.03.09 |