📌 CSS (Cascading Style Sheet)
: HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다
- Style sheet 언어
- 구조와 표현의 분리
* Cascading: 폭포
🔺 CSS 적용 방식
외부 스타일 시트
: HTML 파일과 CSS 파일을 구분하는 방식
- <link> 태그로 연결
내부 스타일 시트
: HTML 파일 내부에 CSS를 추가하는 방식
- <style>
인라인 스타일
: HTML 태그 내부에 CSS를 선언하는 방식
- <h1 style="color: blue; font-size:100px"></h1>
🔺 기본 구조
selector {
선언부1;
선언부2;
}- 선택자(Selector)
- 선언부(Declaration block)
속성(Property)
속성 값(Value)
선언부는 세미콜론(;)으로 구분하여 여러 개 선언할 수 있다.
📌 CSS 변수(Custom Property)
:root
: 문서의 루트 요소 선택자
- HTML 파일에서 루트는 <html>
변수 선언
--변수명: 값;
변수 사용
var(변수(--변수명), 대체값):root {
--container-size: 940px;
}
.header, .visual, .main, .slogan, .footer {
width: var(--container-size, 940px);
<!-- 변수인 --container-size 값이 적용 불가능하면 940px 적용 -->
}
🔺 웹 브라우저 별 CSS3를 얼마나 지원하는지 확인하는 사이트
THE CSS3 TEST
The CSS3 Test
Your browser scores 0% Determined by passing tests out of total for features Caution: This test checks which CSS3 features the browser recognizes, not whether they are implemented correctly. Time taken: Filter: Specs tested: Want more tests? Be my guest! R
css3test.com
🔺 브라우저에서 특정 CSS3를 사용할 수 있는지 확인하는 사이트
Can I use
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
🔺 CSS 템플릿 참고 + CSS 기법 연습할 수 있는 사이트
CSS Zen Garden
CSS Zen Garden: The Beauty of CSS Design
So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into thi
csszengarden.com
참고
:root - CSS: Cascading Style Sheets | MDN
CSS :root 의사 클래스는 문서 트리의 루트 요소를 선택합니다 HTML의 루트 요소는 <html> 요소이므로, :root의 명시도가 더 높다는 점을 제외하면 html 선택자와 똑같습니다.
developer.mozilla.org