css 선택자를 처음 보는 사람은 이 글을 먼저 보길 바란다 → CSS 선택자(selector) 종류 정리 요약


먼저 설명했던 css 선택자는 태그와 클래스, id값을 이용하여 스타일을 적용 한 것이다.

반면에 지금부터 설명할 것은 '속성 선택자'와 '가상 클래스'이다. 

먼저 설명할 것은 속성 선택자이다. 이것은 태그 안에서 사용하는 속성들의 값을 이용하여 스타일을 적용 하는 방법이다.

같은 태그여도 속성에 따라 다양한 스타일을 적용할 수 있다는 장점이 있다.


명칭 

선택자 

설명 

[속성]형식 

[속성]{속성: 속성 값;} 

지정한 속성을 가지고 있는 요소

[속성=값]형식

[속성=값]{속성: 속성 값;} 

주어진 속성과 값이 일치하는 요소 

[속성~=값]형식

[속성~=값]{속성: 속성 값;} 

속성과 값이 일치하는 요소를 찾는데 비교값이 여러개이면 하나만 일치해도 적용 

[속성^=값]형식

[속성^=값]{속성: 속성 값;} 

지정한 문자로 시작하는 속성 값에만 적용

[속성$=값]형식 

[속성$=값]{속성: 속성 값;} 

지정한 문자로 끝나는 속성 값에만 적용

[속성|=값]형식 

[속성|=값]{속성: 속성 값;} 

속성이 지정한 값으로 시작하면 적용 

[속성*=값]형식

[속성*=값]{속성: 속성 값;} 

해당 값이 포함되있으면 적용 


(속성 선택자)



이번에는 가상 클래스에 대해 설명하겠다. 가상 클래스는 웹 문서 소스에는 존재하지 않지만 필요에 의해 임의로 가상의 선택자를 지정하여 사용하는 것이다. 예를 들면 이미지 위에 마우스를 올려뒀다던가 하는 여러 상황에 쓰인다.


명칭 

선택자 

설명 

:link 선택자

a:link{속성: 속성 값;} 

문서 안의 하이퍼 링크 중 아직 방문하지 않은 링크에 적용 

:visited 선택자

a:visited{속성: 속성 값;}  

한번 이상 방문한 사이트에 적용. 기본 색상은 자주색(puple) 

:active 선택자 

a:active{속성: 속성 값;}  

해당 요소가 활성화되었을 때 적용 ex)클릭한 상태 

:hover 선택자 

a:hover{속성: 속성 값;}  

해당 요소 위에 마우스 포인터를 올려놓았을 때 적용(롤오버) 

:focus 선택자 

a:focus{속성: 속성 값;}  

해당 요소에 초점이 맞춰졌을 때 적용 ex)텍스트 필드 안에 초점이 맞춰질때 

:nth-child(n) 선택자

태그:nth-child(n) 

n번째 자식 요소에 스타일을 적용한다. n에는 숫자를 넣어도 되지만 odd,even 또는 2n+1, 2n 등 수식을 사용 할 수 있다. 

:nth-last-child(n) 선택자

태그:nth-last-child(n) 

:nth-of-type(n)

태그:nth-of-type(n) 

같은 태그가 여러개 나열 되있을때 n번째 항목인지를 지정하여 적용한다. 

:nth-last-of-type(n)

태그:nth-last-of-type(n) 

 :first-child

태그:first-child 

첫 번째 자식 요소에 적용할 스타일이다.

:last-child 

태그:last-child 

마지막 자식 요소에 적용할 스타일이다.

:first-of-type

태그:first-of-type 

형제 관계에 있는 요소 중 첫 번째 요소에 적용한다. 

:last-of-type

태그:last-of-type 

형제 관계에 있는 요소 중 마지막 요소에 적용한다.

only-child

태그:only-child 

부모 요소 안의 자식 요소가 유일하게 하나일 때 스타일 적용한다. 

only-of-child

태그:only-of-child 

해당 요소가 유일한 요소일 때 스타일을 적용한다.

:checked

태그:checked 

라디오 버튼이나 체크박스가 체크 되었을 때 적용할 스타일 지정한다. 

::before 

태그::before{content : " ";} 

특정 요소의 내용 앞이나 뒤에 지정한 내용을 만들 수 있다. 이때 content 를 꼭 넣어줘야 실행되며 :: 는 css3 : 는 css2이다. 

::.after

태그::after(content : " ";} 

::selection 선택자

::selection{속성:속성 값;} 

드래그되어 선택되는 영역의 스타일을 지정한다. 

:not 선택자

:not(태그){속성:속성 값;} 

not 안에 포함된 태그를 제외한 모든 부분에 스타일 적용 


(가상 클래스)

'Web development > HTML & CSS' 카테고리의 다른 글

반응형 웹 디자인이란?  (0) 2017.11.11
11가지 한글 구글 폰트  (0) 2017.09.30
CSS 선택자(selector) 종류 정리 요약  (0) 2017.07.26
CSS 정의 및 특징  (0) 2017.07.22
HTML5 태그 미지원 브라우저  (0) 2017.07.19


[ 스타일의 상속 관계 ]


웹 문서에서 사용하는 태그들은 상속의 개념이 적용된다. 그래서 부모 요소와 자식 요소가 존재한다.

예를 들어 <ul><li>목록1</li><li>목록2</li></ul> 형태가 있을 때 ul은 li의 부모 요소이고 li는 ul의 자식요소이다.

그리고 부모 요소에 있는 속성들이 자식 요소로 이어지는데 이것이 바로 '상속'이다.


상속의 예로는 body에 배경색을 넣으면 자식 요소인 <h2>와 <p> 등에도 같은 배경색이 적용된다.


그리고 스타일은 단계적으로 적용되기 때문에


p{color:red;}

p{color:blue;}


처럼 같은 태그에 다른 스타일이 적용되면 마지막으로 정의된 스타일을 적용한다. 위 소스에서는 글자색에 'blue' 가 적용된다.


선택자는 여러가지가 있다. 선택자(selector)란, 속성이 어디에 적용되는지 표시하는 것이다.


 명칭

 선택자

 설명

 전체 선택자

 * {속성:속성 값;}

 페이지에 있는 모든 요소를 대상으로 스타일을 적용한다. 

 태그 선택자

 태그 {속성:속성 값;}

 특정 태그에 스타일을 적용한다.

 클래스 선택자

 .클래스이름 {속성:속성 값;} 

 특정 클래스에 스타일을 적용한다.

 id선택자 

 #id이름 {속성:속성 값;}

 특정 id에 스타일을 적용한다.

 하위 선택자 

 상위요소 하위요소 {속성:속성 값;} 

 모든 하위 요소에 스타일을 적용한다. 

 자식 선택자

 부모요소 > 자식요소 {속성:속성 값;} 

 자식 요소에만 스타일을 적용한다. 

 인접 형제 선택자 

 요소1 + 요소2 {속성:속성 값;} 

 첫 번째 동생 요소에 스타일을 적용한다. 

 형제 선택자  

 요소1 ~ 요소2 {속성:속성 값;} 

 형제 요소에 스타일을 적용한다. 

 그룹 선택자 

 요소1,요소2 {속성:속성 값;} 

 여러 요소들에 한번에 묶어서 스타일을 적용한다. 

[ 선택자(selector) ]



 하위 선택자 

  자식 선택자  

 인접 형제 선택자

 형제 선택자 

 section ul {속성:속성 값;} 

 section > ul {속성:속성 값;}

 h1 + p {속성:속성 값;}

 h1 ~ p {속성:속성 값;}

<body>

<section>

<p></p>

<ul>

<li>

<ul></ul>

</li>

<li>

<ul></ul>

</li>

</ul>

</section>

</body>

<body>

<section>

<p></p>

<ul>

<li>

<ul></ul>

</li>

<li>

<ul></ul>

</li>

</ul>

</section>

</body>

<body>

<section>

<h1></h1>

<p></p>

<p></p>

<p></p>

</section>

</body>

<body>

<section>

<h1></h1>

<p></p>

<p></p>

<p></p>

</section>

</body>

[ 헷갈리기 쉬운 선택자들 ]






HTML 에는 수 많은 태그들이 있지만 그 중에서도 자주 쓰는 것들


종류 

설명 

<h1>~<h6> 

  제목 요소 / 숫자가 작을수록 큰 제목 

<img> 

  이미지 

<p> 

  단락 구분 

<a>

  링크 

<address> 

  주소 

<map> 

  맵 좌표 영역 설정 

<hr> 

  구분선 

<ul> 

  순서가 없는 목록 선언 

<ol> 

  순서가 있는 목록 선언 

 <blockquote>

  긴 인용 문구 요소

 <li>

  목록 

 <strong>

  강한 강조(객관적) 

 <span>

  인라인 요소 그룹화 




 

<table> : 표의 시작과 종료
속성 : width = "너빗값"(표 너비) / border="선 두껫값"(선 두께) / summary="테이블 요약 내용"(테이블 요약 내용) / cellspacing="셀 간격"(셀과 셀의 간격)

<tr> : 한 행의 시작과 종료

<tr> : 제목 열
속성 : scope="col" (열 제목) / scope="row"(행 제목)

<td> : 데이터 열
속성 : rowspan="행 개수"(행 합치기) / colspan="열 개수"(열 합치기)

<caption> : 표 제목


<colgroup> : 열 그룹 시작과 종료


<col> : 열 그룹 설정

속성 : width="열 너비"


<thead> : 표 머리 영역(셀 제목 영역)

<tbody> : 표 본문 영역(데이터 영역)

<tfoot>  : 표 바닥 영역(통계, 합계 등)




<form> : 입력 양식 영역(전송역할)

속성 : name(폼 이름) / method(전송 방식  : get \ post) / action(입력값을 전송할 페이지)

<fieldset> : 입력 요소 그룹화

<legend> : 그룹 제목


<input> : 입력 요소

속성(type) : text(한 줄 글상자) / password(비밀번호) / checkbox(체크 박스) / radio(라디오 박스) / submit(확인 버튼,전송기능) / reset(취소 버튼) / image(이미지 버튼,전송기능) / file(파일 첨부) / button(범용 버튼) / hidden(화면 표시 안됨, 숨긴 값을 전송)

속성 : value(입력값) / name(요소 이름) / id(요소 아이디)


<label> : 입력 요소 제목

속성 : for(입력 요소 아이디와 일치해야한다)


<textarea> : 여러 줄 텍스트박스

속성 : rows(지정 행만큼 높이) / cols(지정 열만큼 너비)


<select> : 선택 상자


<option>: 선택 상자 옵션

속성 : value(옵션값)

'Web development > HTML & CSS' 카테고리의 다른 글

CSS 초기화 파일(초기화 코드)  (0) 2017.07.15
HTML 기본 구조(기본 틀, 초기설정, 세팅)  (0) 2017.07.15
UTF-8 과 EUC-kr  (0) 2017.07.14
HTML 문서 구조  (0) 2017.07.13
HTML 이란 무엇일까?  (0) 2017.07.13

+ Recent posts