[CSS3] CSS3 기초

CSS는 Cascading Style sheets 의 약자로

웹페이지를 더 이쁘게 만들어주는 언어이다. HTML에서 태그 마다 하나씩 스타일 속성을 지정하기 힘든 부분을 해결해준다.


적용방법은 3가지 방법이 있다.

1. HTML 태그에 직접 적용하는 방법
ex) <div style="background:#ff0000">
2. HTML 문서 내에 style 태그로 CSS3를 적용하는 방법
     ex) <style> div{
background:#ff0000
}
3. HTML 외부에서 .css 파일을 이용해서 적용하는 방법
ex) <link href="firstcss.css" type="text/css" rel="stylesheet">



CSS3의 선택자와 속성

1. CSS3 선택자
html요소에 스타일을 적용하려면 어디에 적용할지 목적어가 필요하다(판사님 제 말엔 목적어가 없습..읍읍.)
그 목적어를 선택자라고 하는데, CSS3에서 HTML 요소 중에서 선택하는 방법으로는 태그, 클래스, 아이디 선택자를 제공하고 있다.

2. CSS3 속성
선택자를 이용해서 HTML요소를 선택한 후, 적절한 속성을 적용한다.

ex) <style>
div{
선택자
background : #ffd800;
 속성             속성값
}
요로케 쓴다


3. 전체 선택자 : 전체에 한번에 적용하는 선택자
(탕수육에 소스를 부어버려서 찍먹 부먹의 선택권을 박탈시키는 방법)
*{
color : ffd800;
}

4. 태그 아이디, 클래스 선택자
-태그 선택자        : 특정 태그 선택할 때 사용, 태그이름으로 사용
ex) div { }, p { }
-아이디 선택자     : html 태그에 아이디를 지정하고, 지정된 아이디의 태그를 선택하는 선택자, 앞에 #(샵)을 붙여 사용
ex) #header { }. #footer { }
-클래스 선택자     : html태그에 클래스를 지정하고, 지정된 클래스의 태그를 선택하는 선택자, 아이디 선택자와의 차이점은
   유니크한 이름을 사용하며 클래스는 여러개의 태그에 동일한 이름을 줄 수 있다., 앞에 .(점)을 붙여 사용
ex) .header { }, .footer { }




다양한 선택자들 알아두면 편리한 선택자

1. 속성 선택자 : 태그 속성 또는 속성 값을 이용하는 방법
방법 : 태그선택자[속성] 또는 태그선택자[속성=속성값]
ex) a[href]{
color : #ff0000;
}
ex) a[href='http://www.google.com'] {
color : #ff0000;
}

2. 링크 선택자 : <a> 태그에 CSS3 속성을 적용할 때 사용
link 선택자 : <a> 태그를 선택 할 때 사용
ex) #content a:link::after {
content:'-' attr(href);
}
=> a 태그에서 content에 들어간 문자 다음에 -(하이픈) 을 삽입하고 뒤에 href에 들어가 있는 주소를 출력

3. 부정 선택자 : 명시한 선택자들 외의 요소를 선택할 때 사용
방법 : :not 선택자를 이용해서 명시한 선택자들 외의 html요소를 선택
ex) li:not(.fa) {
background-color:#ffd800
}
=> li 태그 중 클래스 이름이 fa가 아닌 li태그를 선택해서 스타일을 적용한다.

4. 문자선택자 : 문자의 특정 속성을 이용해서 CSS3를 적용할 때 사용
- :first-letter : 첫번째 문자를 선택할 때 사용
ex) #history1 :first-letter{
font-size:2em
}

- :first-line : 첫번째 행을 선택할 때 사용
ex) #history1 :first-line{
font-weight:bold
}

5. 후손 및 자손 선택자 : HTML의 계층구조를 이용해서 CSS 적용
-후손 선택자 : 특정 html 태그의 아래에 있는 모든 태그 요소를 선택할 수 있다.
ex) div li {
background-color:red
}

-자손 선택자 : 특정 html태그의 아래에 있는 특정 태그 요소를 선택할 수 있다.
ex) div > h1 {
font-weight : bold
}


6. 동위, 반응, 상태 선택자
-동위 선택자 : html 태그 계층 구조를 고려하여 동등한 위치에 있는 태그 요소를 선택한다.
ex) h3~div {
font-size:10px
}
=>h3 태그 뒤에 위치하는 모든 div 태그

h3+div{
font-size:20px
}
=>h3 태그 바로 뒤에 위치하는 div 태그



-반응 선택자 : 웹사이트를 이용하는 사용자의 반응에 따라 html태그 요소를 선택한다.
ex) :hover<> 마우스가 태그위에 올라왔을 때 선택된다.

-상태 선택자 : html태그 요소의 상태에 따라서 선택한다.
ex) :focus<> 초점이 맞추어진 상태
     :checked <>input 태그 중 checked 상태