CSS

선택자

/*그룹 선택자*/
h2 { color: navy; }
h2, h3 { text-align: center; }
h2, h3, p { background-color: lightgray; }

/*
    자손 선택자 
    - 하위 Element
*/
div p {스타일;}

/*
    자식 선택자
    - 바로 아래 Element
*/
div > p { background-color: #FFEFD5; }

/*
    의사 클래스 
    HTML 요소의 상태
*/

선택자.클래스이름:의사클래스이름 {속성: 속성값;} 
선택자#아이디이름:의사클래스이름 {속성: 속성값;}

/*
    구조 의사 클래스
    특정 위치에 있는 요소 선택
    - :first-child
    - :last-child
    - :nth-child
    - :nth-last-child
    - :first-of-type
    - :last-of-type
    - :nth-of-type
    - :nth-last-of-type
*/

/*
    의사 요소
    HTML 요소의 특정 부분만을 선택할 때 사용합니다.
    - ::first-letter
    - ::first-line
    - ::before
    - ::after
    - ::selection
*/

선택자::의사요소이름 {속성: 속성값;}

p::selection { color: #FF4500; } /*마우스로 선택된 부분*/


/*
    속성 선택자
*/

[속성이름]
[title] { background: black; color: yellow; }

[속성이름="속성값"]
[title="first h2"] { background: black; color: yellow; }

미디어 쿼리(for 모바일웹)

@media all and (min-width:320px){/* 스타일 지정 부분*/}
@media all and (min-width:768px){/* 스타일 지정 부분*/}
@media all and (min-width:1024px){/* 스타일 지정 부분*/}

• IE6 ~ IE8까지 미디어 쿼리 지원안함.
• IE8 이하에서 접속했을 때 반응형 스타일 시트가 아닌, 고정폭의 스타일 시트로 따로 연결해주는 것이 좀더 간단하며 접근성이 좋은(accessible) 해결책.
• 데스크탑에서는 반응형이 되지 않아도 가독성이 크게 떨어지지 않기 때문이다. 예시는 다음과 같다.

    <link rel="stylesheet" type="text/css" media="all" href="style.css"/>
    <!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/> <!-- 고정형 스타일 시트 -->
    <![endif]-->