📚boostcourse의 웹 UI개발 강의 필기

강의 링크

📑CSS문법

6. 가상 선택자 1

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

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

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

✍코드
-html 파일
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>

-css 파일
li:first-child { color: red; }
li:last-child { color: blue; }
👉 이렇게 코드를 입력해주면

👉 실제로는 태그에 class 속성이 없지만 가상클래스가 생성되어 아래 코드처럼 동작
<ul>
    <li class="first-child">HTML</li>
    <li>CSS</li>
    <li class="last-child">JS</li>
</ul>

✍결과

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

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

✍코드
-html 파일
<a href="https://www.boostcourse.org/web344">링크</a>

-css 파일
a:link { color: blue; }
a:visited { color: gray; }

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

• :focus: 현재 입력 초점을 가진 요소에 적용
• :hover: 마우스 포인터가 있는 요소에 적용
• :active: 사용자 입력으로 활성화된 요소에 적용

✍코드
-html 파일
<a href="https://www.boostcourse.org/web344">링크</a>

-css 파일
a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }

✍결과

링크

7. 가상 선택자 2

- 가상 요소

-가상 요소는 HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여

• :before : 가장 앞에 요소를 삽입
• :after : 가장 뒤에 요소를 삽입
• :first-line : 요소의 첫 번째 줄에 있는 텍스트
• :first-letter : 블록 레벨 요소의 첫 번째 문자

✍코드
- hrml 파일
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

- css 파일
p::before { content: "###" }
p::after { content: "!!!" }
p::first-line { ... }
p::first-letter { ... }

✍결과
👉before와 after는 아래와 같이 동작
<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>

👉first-line는 아래와 같이 동작
<p>
    <first-line>Lorem ipsum dolor sit amet, consectetur 
    adipisicing elit, sed do eiu ..(..어딘가쯤..) </first-line>
    ... unt ut labore et dolore magna aliqua.
</p>

👉first-letter는 아래와 같이 동작
<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>

8. 구체성

-선택자에는 어떤 규칙이 우선으로 적용되어야 하는지에 대해 정해진 규칙이 있음.

👉구체성은 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>
👉이렇게 2개의 스타일 선언되었다면 <p>에는 color: blue가 적용됨

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

• important

p#page { color: red !important; }
<p id="page" style="color:blue">Lorem impusm dolor sit.</p>
👉이렇게 2개의 스타일 선언되었다면 <p>에는 important로 인해 color: red가 적용됨

👉important는 모든 구체성을 무시하고 우선권을 갖기 때문

9. 상속

• 상속되는 속성
  -margin, padding, background, border 등 박스 모델 속성들은 상속되지 않음
• 상속되는 속성의 구체성

-html 파일
<h1 id="page">Hello, <em>CSS</em></h1>

-css 파일
* { color: red; }
h1#page { color: gray; }
👉이렇게 2개의 스타일 선언되었다면 
h1#page { color: gray; } 구체성이 더 높지만 <em>에는 color: red가 적용됨

👉상속된 속성은 아무런 구체성을 가지지 못하기 때문