좌충우돌 개발자의 길

[CSS] 헷갈리는 부분 타파하기! 본문

STUDYING/HTML & CSS

[CSS] 헷갈리는 부분 타파하기!

sustronaut 2022. 5. 3. 22:54

1. id와 class 선택자의 차이점

  • 문서 내에 유일한 요소에 사용
  • 구체성 

가장 큰 차이점 : class와 달리 id는 문서 내에서 유일해야 함

클래스 선택자 : 여러 요소에 같은 클래스를 넣고 같은 규칙을 적용 할 수 있었습니다.

id 속성값 : 문서 내에 유일하게 사용이 되어야함. 결국, id 선택자로 규칙을 적용할 수 있는 요소는 단 하나뿐임.

 

2. 선택자의 조합

/* 요소와 class의 조합 :
<p>이면서 class 속성에 bar가 있어야 적용*/
p.bar { ... }

/* 다중 class 
class 속성에 foo와 bar가 모두 있어야 적용*/
.foo.bar { ... }

/* id와 class의 조합 
 id가 foo이며 class가 bar인 요소에 적용*/
#foo.bar { ... }

 

3. 속성 선택자 

- 단순 속성

p[class] { color: silver; } /*p태그인데 class가 있는 애면 color: silver를 집어넣어라*/
p[class][id] { text-decoration: underline; } /*p태그인데 class와 id가 있으며 text-decoration을 넣어라*/

<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p> /*p[class]와 p[class][id] 모두 적용됨*/

- 정확한 속성값으로 선택

p[class="foo"] { color: silver; } /*p태그인데 class(속성이름)의 속성값이 foo이면 color: silver 적용해라*/
p[id="title"] { text-decoration: underline; }

- 부분 속성값으로 선택

  • [class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
  • [class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
  • [class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
  • [class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택
<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>

p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */

 

4. 부모, 자식, 조상, 형제

  • 부모 요소 : 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 단 하나뿐
  • 자식 요소 : 부모 요소와 반대라고 생각하면 되며 자식 요소는 여러 개일 수도 있음.
  • 조상 요소 : 그 요소를 포함하는 모든 요소로, 부모 요소를 포함하여 여러 개일 수도 있음.
  • 형제 관계 : 같은 부모를 가지고 있는 요소들은 서로 형제 관계
    • 인접관계 : 형제 관계에 있는 요소 중 바로 뒤에 이어 나오는 요소를 인접해 있음.

- 인접관계 헷갈림 주의! (무조건 바로 뒤에 나올 때만 적용)

/*pink 적용x*/
<style>
        strong + p{
          color:pink;  
        }
    </style>
</head>
<body>
    <div class="wrap">

        <strong> title </strong>
        <span>wow</span>
        <p> description </p>
        
/*pink 적용o*/
<style>
        strong + p{
          color:pink;  
        }
    </style>
</head>
<body>
    <div class="wrap">

        <strong> title </strong>
        <p> description </p>

 

5. 문서 구조 관련 선택자

- 유의점 : 요소들이 많이 나열되어 있더라도 제일 우측에 있는 요소가 실제 선택되는 요소

/*자손 선택자*/
div span { color: red; }

/*자식 선택자*/
div > h1 { color: red; }

/*인접관계 선택자*/
div + p { color: red; }

/* body 요소의 자식인 div 요소의 자손인 table 요소 바로 뒤에 인접한 ul 요소 선택! */
body > div table + ul { ... }

 

6. 가상 클래스(pseudo class)

우리가 직접 요소에 클래스를 선언하는 것은 아니고, 약속된 상황이 되면 브라우저 스스로 클래스를 적용

 

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

  • :first-child : 첫 번째 자식 요소 선택
  • :last-child : 마지막 자식 요소 선택

- 앵커 요소와 관련된 가상 클래스

  • :link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
  • :visited : 이미 방문한 하이퍼링크를 의미

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

  • :focus: 현재 입력 초점을 가진 요소에 적용
    • 입력 폼 요소에 텍스트를 입력하려고 마우스 클릭해서 커서를 입력 폼 위에 올려놓으면 그때 입력 폼 요소가 초점을 받는 상태
    • 키보드의 탭 키를 이용해서 요소를 탐색하다 보면 링크나 버튼에 점선 테두리가 이동하는 것을 볼 수 있는데, 점선 테두리가 위치하는 것도 초점을 받은 상태
  • :hover: 마우스 포인터가 있는 요소에 적용
  • :active: 사용자 입력으로 활성화된 요소에 적용
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>
li:first-child { color: red; }
li:last-child { color: blue; }

a:link { color: blue; }
a:visited { color: gray; }

 

7. 가상 요소

- 가상 클래스와 가상 요소의 차이점

  • 가상 요소는 현재 문서 내에 존재하지 않는 구조, 즉 문서에 존재하지 않는 요소에 내용을 추가할 수 있고, 또 스타일도 부여할 수 있음
  • ex) 가장 자주 쓰이는 가상 요소는, 요소의 앞이나 뒤에 별도의 내용을 추가하는 것으로 이 때 추가되는 새 콘텐츠는 HTML 코드에 직접 추가되지 않고 브라우저 화면에만 나타남.
  • 가상클래스와 구분하기 위해 :: 으로 작성

- 주요 가상 요소

  • :before : 가장 앞에 요소를 삽입
  • :after : 가장 뒤에 요소를 삽입
  • :first-line : 요소의 첫 번째 줄에 있는 텍스트
  • :first-letter : 블록 레벨 요소의 첫 번째 문자
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
p::before { content: "###" }
p::after { content: "!!!" }
p::first-line { ... }
p::first-letter { ... }

/*결과1*/
<p>
    <before>###</before>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <after>!!!</after>
</p>

/*결과2*/
<p>
    <first-letter>L</first-letter>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
    <!-- 모니터 가로 해상도에 따라 요소가 포함하는 내용이 변동됩니다. -->
    <first-line>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiu ..(..어딘가쯤..) </first-line>... unt ut labore et dolore magna aliqua.
</p>

 

8. 구체성

h1 { color: red; }
body h1 { color: green; }

이 둘 중 어느것을 선택? body h1을 선택 -> 왜? 구체성이 높으니까

 

- 구체성 규칙 (선택자의 구체성)

 

구체성은 4개의 숫자 값으로 이루어져 있음

값을 비교할 때는 좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클수록 높은 구체성을 갖음

구체성은 아래의 규칙대로 계산 

  •  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 */
#page { ... }  /* 0,1,0,0 */
div#page { ... }  /* 0,1,0,1 */

 

- 인라인의 구체성

p#page { color: red; }
<p id="page" style="color:blue">Lorem impusm dolor sit.</p>

첫 번째는 0, 1, 0, 1의 구체성을 가지는 선택자로 스타일을 선언

두 번째는 요소에 직접 인라인 스타일 방식으로 스타일을 선언

결과적으로 <p>에는 color: blue가 적용

인라인 스타일의 구체성 값은 1, 0, 0, 0이며 규칙들 중 가장 큰 구체성을 갖기 때문

 

 

- important

important 키워드는 별도의 구체성 값은 없지만, 모든 구체성을 무시하고 우선권을 갖음

p#page { color: red !important; }
<p id="page" style="color:blue">Lorem impusm dolor sit.</p>

/*red 색깔임*/

 

- 상속되는 속성의 구체성

* margin, padding, background, border 등 박스 모델 속성들은 상속되지 않음

* { color: red; }
h1#page { color: gray; }
<h1 id="page">Hello, <em>CSS</em></h1>

전체 선택자의 구체성은 0, 0, 0, 0 이며 id 선택자의 구체성은 0,1,0,1 

그렇다면 <em>에는 어떤 color가 적용? color: red가 적용-> 상속된 속성은 아무런 구체성을 가지지 못하기 때문

 

9. cascading 규칙

  1. 중요도(!important)와 출처
  2. 구체성
  3. 선언 순서
  1. 스타일 규칙들을 모아서 중요도가 명시적으로 선언되었는지에 따라 분류
    1. 중요도가 명시적으로 선언된 규칙들은 그렇지 않은 규칙들보다 우선
    2. 중요도가 있는 규칙들끼리는 아래 다른 규칙들을 적용
  2. 스타일 규칙들을 출처에 따라 분류
    1. 제작자(사이트를 실제 제작하는 개발자가 작성한 CSS) 스타일 규칙이 사용자 에이전트 스타일 규칙보다 우선
  3. 스타일 규칙들을 구체성에 따라 분류
    1. 구체성이 높은 규칙들이 우선
  4. 스타일 규칙들을 선언 순서에 따라 분류합니다.
    1. 뒤에 선언될 수록 우선시 함

 

10. CSS 선택자 모음 사이트

https://www.w3schools.com/cssref/css_selectors.asp

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

[CSS] 미디어쿼리  (0) 2022.05.09
[CSS] 레이아웃  (0) 2022.05.08
[CSS] 폰트, 텍스트  (0) 2022.05.07
[CSS] 단위, 배경, 박스모델  (0) 2022.05.05
[HTML] 헷갈리는 부분 타파하기!  (0) 2022.05.03
'STUDYING/HTML & CSS' Related Articles more