====== CSS Selectors ====== * description : CSS Selectors * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-04 \\ ====Source of the article==== * "Do it! HTML5 + CSS3 웹표준의 정석" / 이지스 퍼블리싱 / 고경희 지음 / 개정1판 9쇄 발행 2019년 6월 3일 / * [[https://www.w3schools.com/css/css_selectors.asp|CSS Selectors]] \\ ====CSS Selectors==== CSS 선택자는 디자인하려는 HTML 요소를 선택합니다.\\ \\ CSS 선택자는 5개의 카테고리로 구분할 수 있습니다. - 단순 선택자 (Simple Selectors) : 이름, id, class 기반 HTML 요소들을 선택합니다. - 연결자 선택자 (Combinator selectors) : 요소들 사이의 특정 관계에 기반한 요소들을 선택합니다. - 의사 클래스 선택자 (Pseudo-class selectors) : 특정 상태에 기반한 요소들을 선택합니다. - 의사 요소 선택자 (Pseudo-elements selectors) : 요소의 일부분을 선택하고 디자인합니다. - 속성 선택자 (Attribute selectors) : 속성 또는 속성 값에 기반한 요소들을 선택합니다. \\ ====CSS 요소 선택자 (element Selector)==== 요소 선택자는 요소 이름에 기반하여 HTML 요소들을 선택합니다.\\


p {
   text-align: center;
   color: red;

\\ ====CSS 아이디 선택자 (id Selector)==== id 선택자는 특정 요소를 선택하기 위해 HTML 요소의 id 속성을 사용합니다.\\ 요소의 id는 페이지 내에서 고유하므로, id 선택자는 하나의 고유한 요소를 선택하기 위해 사용됩니다.\\ 특정 id를 지닌 요소를 선택하기 위해, 해시 (hash, 우물 정자(#))를 쓰고, 요소의 id 이름을 기재합니다.\\


#para1 {
   text-align: center;
   color: red;
}

\\ ====CSS 클래스 선택자 (Class Selector)==== class 선택자는 특정 class 속성을 가진 HTML 요소들을 선택합니다.\\ 특정 class룰 가진 요소들을 선택하기 위해, 마침표 (**.**, period, 피어리어드)를 쓰고, class 이름을 기재합니다.\\


.center {
   text-align: center;
   color: red;

\\ ====특정 HTML 요소들만 class에 영향을 받도록 명시할 수 있습니다.==== 기본형\\


p.center {
   text-align: center;
   color: red;
}

\\ 예제\\








This heading will not be affected
This paragraph will be red and center-aligned.   // 이 HTML 요소만이 영향을 받습니다.

\\ ====HTML 요쇼들이 하나 이상의 class도 참조할 수 있습니다.==== 기본형\\


   This paragraph refers to two classes

상기 예제에서

태그의 요소들은 class="center"와 class="large"에 따라서 디자인됩니다.\\ \\ 예제\\