CSS-class선택자

hanahana·2022년 7월 29일
CSS

네이버 부스트코스-html/css

목록 보기
7/17
post-thumbnail

class의 값으로 선택할수있다.

<p class="foo">내용</p>

일때 p는 class foo라고 선언되었음으로

.foo{font-size:30px;}

로 앞에 . 을 찍고 class이름을 입력해주면 그 클래스에 해당되는 요소에 스타일이 적용된다

다중 class

<p class="foo bar">내용</p>

일때 이 p의 값은 class foo, bar 2개의 값으로 선언되어있다

.foo{font-size:30px{
.bar{color:blue;}

이렇게 2가지 값을 선언하면 위의 p는 두가지 클래스가 중복선언되어있기에 중복값이 모두 적용된다.

ID 선택자

 <p id="bar">내용</p>

id의 값을 선언했을때에는 아래와 같이 사용가능하다

#bar {background-color:yellow;}

#id값을 쓰고 {}안에 내용을 넣어 선언하면 된다.

  • 기호가 아닌 # 을 사용한다
  • 태그의 class속성이 아닌 id 속성을 참조한다
  • 문서내에 유일한 요소에 사용한다
    • id선택자로 규칙을 정할수 있는 요소는 단 하나뿐이다.
  • 구체성

선택자의 조합

/*요소와 클래스의 조합*/
p.bar{내용}

/*다중 클래스*/
.foo.bar{내용}

/*아이디와 클래스의 조합*/

#foo.bar{내용}

속성 선택자

  • 단순 속송으로 선택
p[class]{color:silver;}
p{class][id] {text-decoration:underline;}
<p class="foo"> Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>
  • 정확한 속성으로 선택
  • 부분 속성으로 선택

출력값

class에는 silver로 색이 지정되었기때문에 전부 색이 변하였고

id와 class가 동시에 있는 요소에는 밑줄을 선언하여소 html에만 밑줄이 그어졌다

부분 속성값으로 선택

  • [class~”bar”] : class속성값이 공백으로 구분한 bar 단어가 포함되는 요소
  • [class^=”bar”]: class속성의 값이 bar로 시작하는 요소
  • [class$=”bar”]: class속성값이 bar로 끝나는 요소
  • [class*=”bar”]: class속성값이 bar가 포함되는 요소
p[class~="color"]{font-style:italic;}
p[class^="color"]{font-style:underline}
p[class$="color"]{font-style:strong}
p[class*="color"]{color:green}
<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>

출력값

  • class값이 공백으로 구분되어 있는 color가 포함된 red에는 italic이 적용되었다. : class~

    • class값이 color로 시작한 red에는 underline이 적용 되었다 : class^
    • class값이 color로 끝나지 않는 red에는 strong이 적용되지 않았다 : class$
    • class의 값에 color가 포함된 red의 색은 green으로 적영되었다 : class*

  • class값이 공백으로 구분되어 color가 포함된 blue는 italic이 적용되었다 : class~

    • class값이 color로 시작하지 않는 blue는 underline이 적용되지 않았다 : class^
    • class값이 color로 끝나는 blue에는 strong이 적용되었다 : class$
    • class의 값에 color가 포함된 blue의 색은 green으로 적영되었다 : class*

  • class값에 공백으로 구분한 color가 없는 rainbow는 italic이 적용되지 않았다 : class~

    • class값이 color로 시작하는 rainbow는 underline이 적용되었다 : class^

    • class값이 color로 끝나지 않는 rainbow에는 strong이 적용되지 않았다다 : class$

    • class의 값에 color가 포함된 rainbow의 색은 green으로 적영되었다 : class*

      문서 구조 관련 선택자

      실행결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/4-6.html

<html>
<body>
    <div>
    <h1><span>HTML</span>: Hyper Text Markup Language</h1>
    <span>CSS는 문서를 꾸며줍니다</span>
</div>
<span>Javascript는 문서를 능동적으로 제어할수 있습니다.</span>
<p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다.</p>
</body>
</html>

트리 형태로 관계 표현

  • html
    • head
    • body
      • div
        • h1
          • span
        • span
      • span
      • p
  1. html은 head와 body를 자식요소로 가지고 있다.
  2. head와 body는 html을 부모요소로 가지고 있으며 서로 형제요소이다
  3. body는 div span p를 자식요소로 가지고 있따
  4. div는 h1과 span을 자식요소로 가지고 있다
  5. h1와 span은 형제요소이며 html은 조상요소이다

자손 선택자

div span{color:red;}

div를 공백으로 두고 span을 선택하면 div의 자손인 span을 선택한다는 의미이다.

그 외의 span에는 해당되지 않는다

  • 출력값

div안에 있는 span 요소에만 red값이 적용된걸 알수있다.

자식 선택자

div>span{color:green;}
  • 출력값

div의 직접적 자식요소인 span에만 해당 태그가 적용된것을 확인할수 있다.

인접 형제 선택자

div+span{color:blue;}
  • 출력값

div와 인접한 형제 요소인 span요소만 변화한것을 알수있다. div에는 적용되지 않는다.

조합해서 사용

body>div table+ul{color:darkblue;}
<div>
  <table>
    <tr>
      <td>1</td><td>2</td>
    </tr>
    <tr>
      <td>1</td><td>2</td>
    </tr>
  </table>
  <ul>
    <li>목록</li>
    <li>목록</li>
  </ul>
</div>
  • 출력값

body태그의 자식요소인 div안에 있는 자손요소중 table태그에 인접한 형제요소인 ul태그에 스타일이 선언되었음을 알수있다.

가상 선택자

가상클래스

미리 정의 해놓은 상황에 적용되도록 약속되어있는 보이지 않는 클래스

:pseudo-class{
property:value;
}

가상 클래스 앞에 : 를 넣어준다

  • 문서 구조와 관련된 가상 클래서

    • :first-child : 첫번째 자식요소 선택

    • :last-child : 마지막 자식요소 선택

      li:first-child{color:red;}
li:last-child{color:blue;}
      <ul>
      <li>html</li>
      <li>Css</li>
      <li>JS</li>
    </ul>

    • 출력값

    첫번째 li인 html에는 red 마지막 li인 JS에는 blue가 적용되었다.

링크와 관련된 가상 클래스

  • :link : 하이퍼링크이면서 아직 방문하지 않은 앵커
  • :visited : 이미 방문한 하이퍼링크를 의미
a:link {color:blue;}
a:visited {color:gray;}
<a href="http://www.naver.com">네이버</a>
	<a href="http://www.google.com">구글</a>
	<a href="http://www.daum.net">다음</a>

  • 출력값

    • 링크 클릭 전
    • 링크 클릭 후
    • 링크 클릭전에는 link의 선언을 클릭후에는 visited의 선언을 따르고 있음을 알수있다

사용자 동작 관련 가상 클래스

  • :focus : 현재 입력 포커스를 갖고 있는 요소에 적용
  • :hover : 마우스 포인터가 위치해 있는 요소에 적용
  • :active : 사용자 입력에 의해 활성화된 요소에 적용
a:focus{background-color:yellow;}
a:hover{font-weight: bold;}
a:active{color:red;}
  • 동적인 동작이라 출력값을 보이지 못해 설명하자면 마우스를 가져다 되면 bold가 나타난다
  • 마우스를 클릭하거나 탭키로 선택하면 바탕이 노란색으로 변한다
  • 클릭하면 글씨가 빨간색으로 변한다, 이 경우 마우스+선택됨 이라는 3가지 요소가 동시에 나타나기에 노란배경+굵은글씨+빨간글씨 새가지 요소가 동시에 보여진다.

동작관련 가상 클래스 시현은 (여기)[https://hana78786.github.io/Study_hana/bostcourse_htmlcss/4-7.html] 에서 확인가능하다

가상 요소

미리 정의해놓은 위치에 삽입되도록 약속되어있는 보이지 않는 요소

  • :before : 가장 앞에 요소를 삽입
  • :after : 가장 뒤에 요소를 삽입
  • :first-line : 요소의 첫번째 줄에 잇는 텍스트
  • :first-letter : 블록 레벨 요소의 첫 번째 문자
p:before{
        color:red;
        content:"before 가상 요소를 활용한 내용";
      }
/*p태그를 사용한 가장 앞에 content가 삽입되고 색깔은 red이다*/

      p:after{
        color:blue;
        content:"after 가상 요소를 활용한 내용"
      }
/*p태그 가장 마지막에 content가 삽입되고 color는blue이다*/

      p:first-line{
        color:yellow;
      }
/*브라우저에 보이는 첫째줄의 색이 yellow가 된다 브라우저 크기에 따라 yellow로 지정되는 길이는 변한다
*/

      p:first-letter{
        color:skyblue;
        font-size:3em;
      }
/*첫줄 첫번째 글자가 skyblue 3배 크기로 출력된다*/
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

출력값

https://hana78786.github.io/Study_hana/bostcourse_htmlcss/4-8.html

구체성

  • 선택자를 얼마나 명식적으로 선언했느냐를 수치화 한것
  • 0,0,0,0
    • 0,1,0,0 :선택자에 있는 모든 id속성값
    • 0,0,1,0 : 선택자에 있는 모든 class속성값 기타속성 가상 클래스
    • 0,0,0,1: 선택자에 있는 모든 요소, 가상요소
    • 전체선택자는 0,0,0,0을 갖는다
    • 조합자는 아무 구체성도 갖지 않는다.
h1{내용} /* 0,0,0,1*/
body h1 {내용} /*0,0,0,2*/
.grape{내용}/*0,0,1,0*/
*bright{내용}/*0,0,1,0*/
p.bright em.dark{내용}/*0,0,2,2*/
#pags{내용}/*0,1,0,0*/
div#page{내용}/*0,1,0,1*/
  • inlinestype (태그 내부에 직접 스타일을 적용하는것)이 가장 높은 구체성을 갖는다 1,0,0,0
    • <p id=”page” stype=”color:blue”>Lorem ipsum dolor sit</p>
    • 일때 page나 p를 head태그에 스타일로 아무리 미리 입력했더라도 직접적으로 입력한 스타일이 가장 높은 구체성을 갖기때문에 헤드태그나 스타일 시트로 입력한 css의 영향을 받지 않는다.
  • ! IMPORTANT
p#page{color:red !important;}
<p id=”page” stype=”color:blue”>Lorem ipsum dolor sit</p>

!important를 선언하면 다른 모든 선언을 무시하고 가장 높은 구체성을 얻게된다 이 경우 inline태그로 ㅠblue를 선언했지만 그 위에 !important가 우선시되어 red로 색이 나오게 된다.

상속

h1{color:gray;}
<h1>Hello <em>Css</em></h1>

결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/4-9.html

h1이 gray로 선언되어서 h1안에 있는 em값까지 gray로 나타난다

em은 h1의 자식요소이기에 상속이 되었지만 모든 요소가 자식요소에게 상속되는것은 아니다

  • magin, padding, background, border.. 같은 박스 모델 속성은 상속되지 않는다
*{color:red;}
      h1#page{color:blue;}
<h1 id="page">Hello <em>Css</em></h1>

em요소가 *선언인 red로 표현되었다.

상속된값은 구체성을 가지지 않으며 0,0,0,0에도 속하지 않는다

하지만 *선언이 없었다면 blue로 표현되었을 것이다.

캐스캐이딩

  • 중요도와 출처
    • important로 선언된 규칙이 우선한다
    • 출처는 제작사. 사용자, 자용자 에이전트 (user Agent)로 구분한다

      1. 사용자 !important

        1. 거의 사용되지 않는다

      2. 제작자 !important

      3. 제작자 스타일

        1. 가장 기본적이고 일반적인 스타일로 대부분이 여기에 해당된다

      4. 사용자 스타일

      5. 사용자 에이전트 스타일

        순으로 중요도가 정해진다. 

        p#bright{color:silver;}
p{color:red}
        <p id="bright">Hello, Css</p>

        일때 p선언보다 p#bright선언이 구체성이 높기때문에 본문은 silver로 프린트된다

선언순서

p{color:silver}
p{color:red;}

일때 나중에 선언된 요소가 우선되기때문에 red로 출력된다

  • 원하는 요소의 문법을 모를땐 CSS selectors cheetsheet보고 힌트 얻기
  • 개발자요구 열어 실제 적용된 규칙을 보기
  • CSS selector game(CSS Dinner)로 문법 연습해보기
profile
hanahana
hello world
이전 포스트

CSS 선택자

다음 포스트

3주차 과제

0개의 댓글