CSS 작성 기초 - 선택자 사용하기

선택자 활용 기초

1. 타입선택자(type selector)
타입 선택자는 앵커, 문단, 테이블등과 같이 제목 엘리먼트 같은 특정 유형의 엘리먼트를 지정하는것

p {color: block}
a {text-decaration: underline}
h1 {font-weight: blod}

2. 하위 선택자(descendant selector)
특정 엘리먼트나 엘리먼트 묶음의 하위에 나오는 엘리먼트를 지정하는것으로, 하위 선택자는 두 개의 선택자를 공백으로 분리해서 저장

li img {cursor: pointer;}

3. ID 선택자
ID선택자란 엘리먼트를 아이디 값으로 스타일일 지정하는 것으로 선택자는 #문자를 사용한다.

#title {font-align: center;}

4. 클래스 선택자
클래스 선택자란 엘리먼트의 클래스명을 선택하여 지정하는 방법으로 선택자는 .문자를 사용한다.

.intro {boarder-style: solid;}

5. 유사 클래스 선택자
문서 구조를 기반으로 엘리먼트를 지정하는 것이 아니라, 폼 요소나 링크의 다양한 상태에 대해서 스타일을 지정해야 하는 경우가 있다. 유사 클래스 선택자를 사용하면 이런 작업을 할수 있다.

/* 방문하지 않은 링크를 파란색으로 표시 */
a:link {color: blue;}

/* 방문하지 않은 링크를 녹색으로 표시 */
a:link {color: green;}

/* 마우스가 올라오거나 클릭했을 때 링크를 빨간색으로 표시 */
a:hover, a:active {color: red;}

/* 테이블 행에 마우스가 올라올 때 빨간색으로 표시 */
tr:hover {color: red;}

/* 입력요소에 포커스가 갔을 때 노란색으로 표시 */
input:focus {background-color: yellow;}

6. 전체 선택자
와일드 카드처럼 모든 가능한 엘리먼트를 지정하는데 사용한다.
전체 선택자는 * 문자를 사용하며 주로 페이지 안에 모든 엘리먼트에 스타일을 지정할 때 사용

* {
    padding: 0;
    margin: 0
}