CSS(Cascading Style Sheets)의 특징과 CSS Selector종류

HTML Tag 지정자

1. ID Selector

id :고유식별자 ( 중복될수 없다. ) , 한번에 하나의 값

eg)

<div id="wrapper">
        <div>

#wrapper {
    padding: 10px;
    height: 200px;
    background: #eeeeee; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#eeeeee, #ffffff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#eeeeee, #ffffff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#eeeeee, #ffffff); /* Standard syntax (must be last) */
}

CSS에서 #으로 접근하여 적용이 가능하다. 

2. Class Selector

class : 종류 / 테마 식별자. ( 중복되겠다 싶으면 클래스로 주면된다.) ,여러개의 값을 가질수 있다.(띄어쓰기)

<DIv class= "box">

.(점)으로 접근이 가능하다. eg) .wrapper

3. Element Selector

태그이름을 이용해서 style쪽에 쓴다. 

{ }를 열어서 css를 적용이 가능하다. 

eg)

a {
    font-weight: bold;
    border: 1px solid #cccccc;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom:5px;
    color: #333333;
    background-color: #f8f8f8;
    text-decoration: none;
}

div, span, a, p, label {
    font-size: 9pt;
}

이렇게 ,(컴마)로 공통 설정이 가능하다.

* 브라우저마다 css가 표현되는 것이 다르다.  

여러 브라우저에 대해서 하나하나 다 맞춰줘야한다. cross browsing을 지원하지 않아서 웹이 어렵다.

문서에 바로 css 바로 주는 것은 좋지않다. 따로 관리하는 것이 유지보수에 편하다.

---

css 정의하는 방법

1) 문서에 바로 적용 (Internal Style) / html파일에 바로. (절대 쓰면 안됨)

2) external Style / 우리가 지향해야할 스타일♠

3) inline Style ( style : css 정의 ) ♠

---

CSS(Cascading Style Sheets)의 특징

1. 따로 지정해줘도 같이 적용이 된다.(위에서 부터 차근차근) / 정교한 스타일 적용이 가능하다.