알골의세계정복
[CSS #1] CSS한번에 끝내기 - CSS 란 무엇인가?, 선택자 본문
CSS에 대한 자세한 정보는 아래 사이트를 통해서 얻을 수 있다.
https://www.w3schools.com/css/default.asp
CSS Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
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
CSS Selectors
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
4. 예시
