[필기정리] Day36 - CSS 선택자(Selector)

Web/CSS

2020. 7. 30. 13:18

# CSS란(Cascading Style Sheet)?

  마크업 언어가 실제 표시되는 방법을 기술하는 언어로,

  HTML는 정보, CSS는 디자인으로 각 기능이 나누어져 있어 수정 및 관리가 용이해진다는 장점이 있다.

 

# html 내에 CSS를 삽입하는 방법

1. <style> 태그를 사용한다.

   현재 더 많이 쓰이는 방식이다.

2. <style> 속성을 사용한다.

 

# <style> 태그 

   HTML의 <head> 내에 작성해주는 태그이다.

   CSS의 문법으로 디자인적 효과들을 줄 수 있다.

 

ex) <style> 태그 사용 예시

<html>
	<head>
    	<title>CSS의 기본 형식</title>
    	<style>
        	* { color: blue; }
    	</style>
	</head>
    <body>
    </body>
</html>

 

 

 

# 선택자(Selector) : CSS로 HTML문서에 스타일을 입힐 요소를 선택하는 문자

                          (jQuery에서도 해당 선택자 문법이 동일하게 적용되므로 정확히 아는 것이 중요하다!)

- 기본 형식

 

- 선택자 종류

선택자명 사용형태 예시 기타
태그 선택자 태그명{ 스타일 속성 : 스타일 값;} div{color : blue;}  
클래스 선택자 .클래스명{스타일 속성 : 스타일 값;} .coding{color : blue;} .select는
전체 클래스 선택자를
선택한 형태이다.
id 선택자 #아이디명{스타일 속성 : 스타일 값;} #bear{color : blue;} id는 중복되지 않기 때문에
단 한 번만 사용한다.
(자바스크립트
문제 가능성 있음)
속성 선택자 선택자 [속성이름 = 속성값]
{스타일 속성 : 스타일 값}		 input [type="text"]
{background: red;}		  
후손 선택자 선택자1 선택자2 {스타일} bear h1 >가 없으면 후손
자손 선택자 선택자1 > 선택자2 {스타일} bear > h1 >가 있으면 자손
반응 선택자 태그명 : hover
태그명 : active		 bear : hover
bear : active		  
상태 선택자 input:checked
input:focus
input:enabled
input:disabled		 input:checked
input:focus
input:enabled
input:disabled		  
구조 선택자 태그명:first-child
태그명:last-child
태그명:nth-child(수열)
태그명:nth-last-child(수열)		 bear:first-child
{border-radius : 10px 0 0 0;}
bear:nth-child(2n)
{background-color:blue;}		 px 숫자가 
0에 가까울수록 
직각에 가깝고
멀수록
둥근모양에 가까워진다

① 태그 선택자 : 태그명에 해당되는 모든 태그에 스타일을 적용하는 형태

                     여러 개 태그에 ","를 통해 속성을 줄 수 있다.

                     ㄴ ex) body, p, h1, h2, h3, h4, h5 {margin : 0;}  

 

② 클래스 선택자 : 작성한 클래스명에 해당하는 클래스에만 스타일을 적용하는 형태

                        클래스명 앞에 "."을 붙여 사용한다.

 

③ id 선택자 : 작성한 id명에 해당하는 id에만 스타일을 적용하는 형태

                  id명 앞에 "#"을 붙여 사용한다.

 

//Tip : 태그 선택자와 클래스 선택자를 사용해 조금 더 정확하게 선택 가능하다.

         ex) li.select - 태그가 li면서 select클래스인 것을 선택하는 것

 

//Tip : 우선순위 - id 선택자 > 클래스 선택자 > 태그 선택자

                        ㄴ 각 id 당 단 한번만 사용하기 때문이다!

 

④ 속성 선택자 : 태그 안에서 사용하는 속성들의 값에 따라 스타일을 적용하는 형태

                     선택자[속성] - 특정한 속성이 있는 태그를 선택한다. 
                     선택자[속성=값] - 특정한 속성 안의 값이 특정 값과 같은 태그를 선택한다. 

 

                    input 태그는 이름이 모두 같지만 type 속성에 따라 형태가 달라진다.

                    그래서 input 태그를 선택할 때는 선택자를 많이 사용한다. 

 

⑤ 후손 선택자 : 해당 태그 아래에 위치한 모든 태그 

                      ex) 아들, 딸 

      ↕ (차이점 비교하기!)

⑥ 자손 선택자 : 해당 태그의 바로 한 단계 아래에 위치한 태그 

                      ex) 손자, 증손녀

 

//Tip : <table> 요소 선택 시 자손 선택자 사용을 지양하는 것이 좋다.

        <tbody>가 자동 생성되면서 원하는 결과가 적용되지 않을 수 있기 때문이다!

        특정 요소를 선택하고자 할 땐, id나 클래스를 활용하여 선택하면 해결된다.

          ↕

        후손 선택자는 사용 가능하다! 

 

⑦ 반응 선택자 : 사용자의 반응으로 생성되는 특정한 상태를 선택 적용하는 형태

 ㄴ ⓐ hover : 특정 태그 위에 마우스 커서를 태그에 올린 경우

     ⓑ active : 사용자가 마우스로 클릭한 태그 선택 시

 

⑧ 상태 선택자 : 지정된 특정 상태 조건을 충족하는 태그에만 선택 적용하는 형태

 ㄴ ⓐ checked : input 태그 중 체크 상태 요소 선택 (checkbox, radio)

    ⓑ focus : input 태그에 초점이 맞춰진 요소 선택

    ⓒ enabled : input 태그의 값을 사용할 수 있는 요소 선택

    ↕

    ⓓ disabled : input 태그의 값을 사용할 수 없는 요소 선택

 

⑨ 구조 선택자 : 특정한 위치에 있는 태그를 선택할 때 사용

 ㄴ ⓐ first-child : 형제 관계에서 첫 번째로 등장하는 태그 선택

    ⓑ last-child : 형제 관계에서 마지막으로 등장하는 태그 선택

    ⓒ nth-child(n) : 형제 관계에서 앞에서 n번째로 등장하는 태그 선택

    ⓓ nth-last-child(n) : 형제 관계에서 뒤에서 n번째로 등장하는 태그 선택

 

  

# 스타일 시트 주석

   /* 주석 입니다. */

 

이후에 나오는 자바스크립트나 자바의 여러 행 주석과 같은 형태이다.

스타일시트에서는 한 줄 주석은 사용할 수 없고 여러 행 주석 형태만 가능하다. 

# not Selector : 특정 선택자가 아닌 곳에 적용하고 싶을 때 사용

ex)

<!DOCTYPE html>
<html>
	<head>
      <style>
      p {
        color: #000000;
      }

      :not(p) {
        color: #ff0000;
      }
      </style>
   </head>
</html>

 

# 박스 모델(box model)

박스 모델의 형태

- 마진(margin) : 바깥 쪽 여백 영역, 테두리와 이웃하는 요소 사이의 간격                    

- 테두리(border) : 내용과 패딩 주변을 감싸는 테두리   

- 패딩(padding) : 안쪽 여백 영역, 내용과 테두리 사이의 간격 

- 콘텐츠(content) : 내용 영역

 

 

// Tip : 한 줄에 모든 위치를 담는 경우 맨 위를 시작으로 시계방향 순서이다.

           ex) 5px dotted solid 5px (top right bottom left)

          3개가 있는 경우 위 / 좌우 / 아래 순서로 적용된다.

          ex) 5px red solid (top / left right / bottom)  

          2개만 있는 경우 위 아래 / 좌 우 순서로 적용된다. 

          ex) 2px dotted (top bottom / left right) 

 

ex) 단축표현 예시

<h1 style="border:2px solid Tomato;">Hello World</h1>

 

# border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 정하는 속성이다. 
   border-collapse에서 separate | collapse | initial | inherit 중 기본값은 separate이다.

- separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둔다.
- collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앤다.
               겹치는 부분은 한 줄로 나타냅니다. 
- initial : 기본값으로 설정한다. 
- inherit : 부모 요소의 속성값을 상속받는다.

 

//Tip : 색상 참고 사이트

 

 

CSS color 자료형은 sRGB 색 공간의 한 색을 표현하며, 추가로 알파 채널 투명도 값도 가질 수 있어 자신이 가리키는 색상과 배경이 어떻게 합성되어야 하는지 지정할 수 있습니다.

developer.mozilla.org

// Tip : Selector 연습 문제 

 

728x90
저작자표시

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

[필기정리] Day38 - CSS 문제 및 해답  (0) 2020.08.03
[필기정리] Day38 - CSS 선택자, overflow, position 등  (0) 2020.08.03
[필기정리] Day37 - CSS 문제 및 해답  (0) 2020.07.31
[필기정리] Day37 - 색상표현단위, 박스속성 등  (0) 2020.07.31
[필기정리] Day36 - CSS 문제 및 해답  (0) 2020.07.30

티스토리툴바