알골의세계정복
[CSS #1] CSS한번에 끝내기 - CSS 란 무엇인가?, 선택자 본문
CSS에 대한 자세한 정보는 아래 사이트를 통해서 얻을 수 있다.
https://www.w3schools.com/css/default.asp
1. CSS 개요
- Cascading Style Sheets 의 약자
- HTML 문서에 스타일(디자인)을 입히기 위한 언어
- HTML 태그(요소)가 스크린, 화면, 종이, 또는 다른 출력 미디어에 어떤식으로 보이게 할지를 정의하는 언어
- CSS는 많은 양의 시간을 절약하고, 다양한 웹 페이지에 레이아웃을 컨트롤할 수 있다.
- HTML 은 문서의 구조를 정하고 CSS 문서에 스타일을 입힌다.
- 예시와 HTML 구문과 CSS 구문을 나눠서 문서를 가독하기 쉬우며 디자인을 입히기 쉽다.
2. CSS 문법
셀렉터 { 속성: 속성값; 속성: 속성값; ... }
h1 { color: red; font-size: 12px; }
- 셀렉터 : HTML 태그, 클래스명, ID명 등 으로 스타일을 입힐 HTML 태그를 지정한다.
3. 셀렉터
- Simple 셀렉터 : HTML 태그, 클래스명, ID명
- Combinator 셀렉터 : 단순 세렉터 사이의 관계를 통해서 셀렉터를 지정한다.
- Pseudo-class selector
- Pseudo-elements slector
- Attribute selectors : 요소들이 갖는 속성명 또는 속성값에 의해서 선택.
HTML 요소를 이용한 선택자
html-tag { text-align: center; font-size: 10px; }
ID 선택자 - ID명은 문서 내에서 중복되지 않고 유일해야 한다.
#id-name { color: red; font-sizle: 10px; }
class 선택자 - 클래스 명은 문서 내에서 중복 가능. 중복된 클래스 명을 갖는 모든 요소들을 선택한다.
.class-name { color: white; background-color: blue; }
HTML요소.class-name 선택자 - 특정 HTML태그가 특정클래스 명을 갖는 요소들을 선택한다.
html-tag.class-name { color:red; font-size: 10px; }
<p class="class-name">Hello World!</p>
태그 요소에 클래스 명을 지정할 때 복수의 클래스 명이 지정 가능하며, 이 때 띄어쓰기로 구분을 한다.
.a { color: red; } .b {font-size: 10px}
<p class="a b">This is sample.</p>
전체(*) 선택자
* { color: red; text-align: cener; }
복수 선택자 - ' , ' 이용하여 같은 스타일이 적용되는 여러개의 선택자를 지정할 수 있다.
h1, .class-name, #id-name { color: red; }
선택자에 대한 자세한 내용은 아래 링크 참고!!
https://www.w3schools.com/css/css_selectors.asp
4. 예시