Today I Learned 29 - CSS / 정리1

angie·2022년 8월 2일

CSS TIL

HTML&CSS

목록 보기

5/11

CSS 정리 1

: Cascading Style Sheets

CSS 정의방법

인라인 : <body> 안에 원하는 태그에 직접 style속성을 활용

<body>
    <h1 style="color: blue, font-sie: 100px">
        Hello
    </h1>
</body>

내부 참조 : <head> 안에 <style>태그를 넣어 그 안에 CSS 코드를 넣는다.

<head>
    <style>
        h1 {
            color: blue;
            font-size: 100px;
        }
    </style>
</head>

외부 참조 - 분리된 CSS 파일

<head>
    <link rel="stylesheet" href="style.css">
</head>

/* style.css */

h1 {
    color: blue;
    font-size:20px;
}

CSS 선택자

선택자 유형

기본 선택자
- 전체 선택자 *, 요소 선택자 <<태그 이름>>
- 클래스 선택자 ., 아이디 선택자 # , 속성 선택자
결합자 (combinators)
- 자손 결합자, 자식 결합자
- 일반 형제 결합자, 인접 형제 결합자
의사 클래스/요소 (pseudo class)
- 링크, 동적 의사 클래스
- 구조적 의사 클래스, 기타 의사 클래스, 의사 엘리먼트, 속성 선택자

<style>
    /* 전체 선택자 */
    * {
        color: red
    }
    
    /* 요소 선택자 */
    h2 {
        color: orange;
    }
    h3, h4 {
        font-size: 10px;
    }
    
    /* 클래스 선택자 */
    .green {
        color: green;
    }
    /* id 선택자 */
    #purple {
        color: purple;
    }
    /* 자식 선택자 */
    .box > p {
        font-size: 30px;
    }
    /* 자손 선택자 */
    .box p {
        color: blue;
    }
</style>

우선순위 (Cascading order)

=> 범위가 좁을수록 강력하다!

중요도 - 사용시 주의
- !important
우선순위 Specificity
- 인라인 > id > class, 속성, pseudo-class > 요소, psedo-element
- CSS 내부에서 같은 순위의 선택자가 사용됐을 때, 나중에 쓰여진 선택자가 더 우선된다.
CSS 파일 로딩 순서

CSS 단위

크기 단위

```
px
```
(픽셀)
- 고정적인 단위 (핸드폰, 노트북 상관없음)
```
%
```
- 백분율 단위
- 가변적인 레이아웃에서 자주 사용
```
em
```
- (부모 요소에 대한)상속의 영향을 받음
- 배수 단위, 요소에 지정된 사이즈에 상대적인 사이즈 가짐
```
rem
```
- 상속의 영향을 받지 않음
- 최상위 요소의 사이즈를 기준으로 배수 단위를 가짐

색상 단위

색상 키워드
- 대소문자 구분하지 않음
```
background-color: red;
```

RGB
- ‘#’ + 16진수 표기법
- rgb() 함수형 표기법
```
background-color: rgb(0, 255, 0)
```

HSL
- 색상, 채도, 명도
- a : alpha (투명도)
```
background-color: hsl(0, 100%, 50%)
```

Selectors 심화

결합자 combinators

자손 결함자 (공백)

하위 모든 선택자들

<style>
    div span{
        color: red;
    }
</style>

<div>
   <span>이건 빨강입니다.</span>
   <p>이건 빨강이 아닙니다.</p>
   <p><span>이건 빨강입니다.</span></p>
</div>

div 하위의 모든 span요소를 선택

자식 결함자 >

바로 아래의 선택자 요소

<style>
    div > span {
        color: red;
    }
</style>

<div>
   <span>이건 빨강입니다.</span>
   <p>이건 빨강이 아닙니다.</p>
   <p><span>이건 빨강이 아닙니다.</span></p>
</div>

div 바로 하위의 span요소 하나만을 선택

일반 형제 결합자 ~

형제 요소 중 뒤에 위치하는 선택자 모두 선택

<style>
    p ~ span {
        color: red;
    }
</style>

<span>p태그의앞에 있기 때문에 이건 빨강이 아닙니다.</span>
<p>여기 문단이 있습니다.</p>
<b>그리고 코드도 있습니다</b>
<span>p태그와 형제이기 때문에 이건 빨강입니다!</span>
<b>빨강이 아닙니다.</b>
<span>이것도 p태그와 형제이기 때문에 빨강입니다!</span>

p의 형제 요소인 모든 span요소를 선택

인접 형제 결합자 +

형제 요소 중 바로 뒤에 위치하는 요소 선택

<style>
    p + span {
        color: red;
    }
</style>

<span>p태그의앞에 있기 때문에 이건 빨강이 아닙니다.</span>
<p>여기 문단이 있습니다.</p>
<b>그리고 코드도 있습니다</b>
<span>p태그와 인접한 형제이기 때문에 이건 빨강입니다!</span>
<b>빨강이 아닙니다.</b>
<span>이것도 p태그와 형제가 아니기 때문에 이건 빨강이 아닙니다.</span>