<commit_before># CSS 기초

css에 대해서 공부하면서 새로운 것들, 외워둘 것들 등등에 대해서 정리해 나가는 파일

## 0. 종류 별 분류

- 폰트
    + `font-size` : 크기
    + `color` : 색깔
    + `font-family` : 폰트 종류
    + `font-weight` : 폰트 굵기. bold로 지정해도 되고, 100 단위로 지정해도 좋다. `normal`은 400, `lighter`는 400 이하, `bold`는 700, `bolder`는 700 이상.
    + `font-style`: `italic`으로 지정하는 용도로 많이 사용
    + `font-variant : small-caps;` : 대문자 형태를 소문자 크기로 보여주는.
- 위 폰트 속성을 `font`에다가 다 박을 수도 있다. 순서는 `font : font-style font-variant font-weight font-size/line-height font-family`
- 텍스트 줄간격 조절: `line-height: 100%`
    + px, % 단위 넣어서 사용 가능.
    + 그냥 숫자만 적으면 `em`으로 인식
    + 글씨 크기가 여러가지인 부분에선 상대단위 쓰는 것을 추천.
    + 수직정렬에 이용하기도 함.
- `text-decoration`
    + `none` : 기본값
    + `underline`: 밑줄
    + `overline`: 윗줄
    + `line-through`: 중앙 취소선같이 생긴 것.
- 배경: `background-color`
- `text-align`: 텍스트 정렬

    ```html
    <body>
      <h3 style="text-align:center">Favorite Football Teams</h3>
      <ol>
        <li style="text-align:left">The Hawthorn Football Club</li> 
        <li style="text-align:center">San Franscisco 49ers</li>
        <li style="text-align:right">Barcelona FC</li>
      </ol>     
    </body>
    ```

- `text-indent` : 양수는 들여쓰기, 음수 값을 주면 내어쓰기. 주로 `em` 값을 준다.
- `text-transform`: 글자를 강제로 대, 소문자로 바꾼다.
    + `uppercase`: 대문자로
    + `lowercase`: 소문자로
    + `capitalize`: 각 단어의 첫 글자를 대문자로
- 글자 간격
    + `letter-spacing`: 자간을 설정한다. 0이 기본 값이다.
    + `word-spacing: `: 단어 사이 띄어쓰기 간격 조절. 0이 기본값.
-`vertical-align`: 연달아 오는 inline 속성의 엘리먼트 간의 정렬을 말한다. 일반적인 중앙 정렬, 중앙 배치 그런게 아니다.
    + `baseline` : 텍스트 베이스라인 기준. 기본값.
    + `sub` : 아래 첨자
    + `super` : 윗 첨자
    + `top` : 해당 줄의 가장 높은 요소 기준으로 위에 정렬
    + `text-top` : 부모 요소의 글자를 기준으로 맨 위에 정렬
    + `bottom` : 해당 줄의 가장 낮은 요소를 기준으로 맨 아래에 정렬
    + `text-bottom` : 부모 요소의 글자를 기준으로 맨 아래에 정렬
    + `middle` : 부모 요소의 글자를 기준으로 가운데 정렬
    + `숫자단위(px)` : 베이스 라인 기준으로 양수는 위, 음수는 아래
    + `비율단위(%)` : line-height 기준으로 양수 비율은 위로, 음수 비율은 아래
- `white-space`
    + `nowrap` : 모든 줄바꿈 무시. 한 줄로 쭉 표시된다. br 태그도, 속한 박스도 무시하고 줄바꿈 일어나지 않는다.
    + `pre` : pre 요소와 동일. 띄어쓰기 O, 줄바꿈 O, 박스 초과 O
    + `pre-line` : 띄어쓰기 X, 줄바꿈 O, 박스 초과 X
    + `pre-wrap` : 띄어쓰기 O, 줄바꿈 O, 박스 초과 X

## 1. 기본

- 크기 단위
    + `px`: 모니터의 픽셀을 나타냄. 고정적인 단위다.
    + `%`: 상위 요소에 대한 상대적 단위.
    + `em`: 해당 element의 폰트 크기에 대한 상대적 단위다. 1em이 해당 폰트 크기와 같다. 그래서 폰트 크기에 따라 동적으로 크기가 변함. 소수점은 `.5` 처럼 표시한다. 그런데 폰트 사이즈를 em으로 지정하면 부모 엘리먼트의 폰트 크기를 참조한다.
- 색상
    + 기본 색상 종류: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow
    + RGB: `RGB(255, 0, 0)`
    + HEX: `#ffcc00`
- HTML 링크: `<link rel="stylesheet" type="text/css" href="file_name.css">.`
- 브라우저 지원 : 앞에 붙인다. `-webkit-`, `-moz-`, `-o-`
- `text-transform: uppercase` : 대문자로 바꾸기
- `letter-spacing: 3px;` : 글자 간격 3px
- `box-sizing: border-box;` : 설정된 width, height 값을 무조건 지킨다. 이 속성이 없을 때 padding 값이 있으면 태그의 범위가 더 넓어진다. 즉 전체 가로가 width + padding left, right 값이 되는 것. 하지만 속성이 있으며녀 무조건 가로는 width다.
- `border: none;` : input box에서 테두리선 없애기. 자동으로 있게 마련이다.
- `outline: none;` : 입력 부분이 focus 되더라도 테두리선으로 강조표시 하지 않음.
- `transition: all 0.2s ease-in-out;` : [참고링크](https://css-tricks.com/almanac/properties/t/transition/) `transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];` 형태로 사용한다.

## 2. selector

### 2.1 자식, 형제

- 자식 선택자
    + ` ` 공백: `grand parents child` 처럼 element를 순서대로 한 칸 씩 띄워서 쓰면 모든 자식을 의미한다. 자식의 자식, 자식의 자식의 자식 element도 선택된다.
    + `>` : `grand > parents > child` 처럼 `>`로 구분해서 쓰면 바로 연결된 직속 자식만이 선택된다.
- `+` : 인접 형제 선택자. Orange, Banana만 폰트 색이 빨강으로 바뀐다.

    ```css
    <div class="abc">
      <p>Apple.</p>
      <p>Orange.</p>
      <p>Banana.</p>
    </div>

    p + p {
      color: red;
    }
    ```

- `~`: 일반 형제 선택자. 아래 코드에서 Orange, Banana 변경. 바로 옆에 인접하지 않더라도 형제라면 선택된다.

    ```css
    <div class="abc">
      <p>Apple.</p>
      <p>Orange.</p>
      <div>Something else</div>
      <p>Banana.</p>
    </div>

    p ~ p {
      color: red;
    }
    ```

### 2.2 pseudo-class 선택자

#### 2.2.1 링크 관련

- `:link` : href 속성이 있는 element 선택.
- `:visited` : 방문한 링크
- `:hover` : 해당 엘리먼트 위에 커서가 올 때. 링크 아니라도 적용 가능
- `:active` : 마우스로 링크를 클릭한 순간

위 네 가지 선택자는 모두 같은 우선순위라서 순서에 따라 적용되는 것이 달라진다. 그러므로 a 태그를 쓸 때는 순서에 유의해야 함. 즉 **:link > :visited > :hover > :active** 순으로.

#### 2.2.2 다른 것
<commit_msg>CSS parent selector. pseudo class :has<commit_after># CSS 기초

css에 대해서 공부하면서 새로운 것들, 외워둘 것들 등등에 대해서 정리해 나가는 파일

## 0. 종류 별 분류

- 폰트
    + `font-size` : 크기
    + `color` : 색깔
    + `font-family` : 폰트 종류
    + `font-weight` : 폰트 굵기. bold로 지정해도 되고, 100 단위로 지정해도 좋다. `normal`은 400, `lighter`는 400 이하, `bold`는 700, `bolder`는 700 이상.
    + `font-style`: `italic`으로 지정하는 용도로 많이 사용
    + `font-variant : small-caps;` : 대문자 형태를 소문자 크기로 보여주는.
- 위 폰트 속성을 `font`에다가 다 박을 수도 있다. 순서는 `font : font-style font-variant font-weight font-size/line-height font-family`
- 텍스트 줄간격 조절: `line-height: 100%`
    + px, % 단위 넣어서 사용 가능.
    + 그냥 숫자만 적으면 `em`으로 인식
    + 글씨 크기가 여러가지인 부분에선 상대단위 쓰는 것을 추천.
    + 수직정렬에 이용하기도 함.
- `text-decoration`
    + `none` : 기본값
    + `underline`: 밑줄
    + `overline`: 윗줄
    + `line-through`: 중앙 취소선같이 생긴 것.
- 배경: `background-color`
- `text-align`: 텍스트 정렬

    ```html
    <body>
      <h3 style="text-align:center">Favorite Football Teams</h3>
      <ol>
        <li style="text-align:left">The Hawthorn Football Club</li> 
        <li style="text-align:center">San Franscisco 49ers</li>
        <li style="text-align:right">Barcelona FC</li>
      </ol>     
    </body>
    ```

- `text-indent` : 양수는 들여쓰기, 음수 값을 주면 내어쓰기. 주로 `em` 값을 준다.
- `text-transform`: 글자를 강제로 대, 소문자로 바꾼다.
    + `uppercase`: 대문자로
    + `lowercase`: 소문자로
    + `capitalize`: 각 단어의 첫 글자를 대문자로
- 글자 간격
    + `letter-spacing`: 자간을 설정한다. 0이 기본 값이다.
    + `word-spacing: `: 단어 사이 띄어쓰기 간격 조절. 0이 기본값.
-`vertical-align`: 연달아 오는 inline 속성의 엘리먼트 간의 정렬을 말한다. 일반적인 중앙 정렬, 중앙 배치 그런게 아니다.
    + `baseline` : 텍스트 베이스라인 기준. 기본값.
    + `sub` : 아래 첨자
    + `super` : 윗 첨자
    + `top` : 해당 줄의 가장 높은 요소 기준으로 위에 정렬
    + `text-top` : 부모 요소의 글자를 기준으로 맨 위에 정렬
    + `bottom` : 해당 줄의 가장 낮은 요소를 기준으로 맨 아래에 정렬
    + `text-bottom` : 부모 요소의 글자를 기준으로 맨 아래에 정렬
    + `middle` : 부모 요소의 글자를 기준으로 가운데 정렬
    + `숫자단위(px)` : 베이스 라인 기준으로 양수는 위, 음수는 아래
    + `비율단위(%)` : line-height 기준으로 양수 비율은 위로, 음수 비율은 아래
- `white-space`
    + `nowrap` : 모든 줄바꿈 무시. 한 줄로 쭉 표시된다. br 태그도, 속한 박스도 무시하고 줄바꿈 일어나지 않는다.
    + `pre` : pre 요소와 동일. 띄어쓰기 O, 줄바꿈 O, 박스 초과 O
    + `pre-line` : 띄어쓰기 X, 줄바꿈 O, 박스 초과 X
    + `pre-wrap` : 띄어쓰기 O, 줄바꿈 O, 박스 초과 X

## 1. 기본

- 크기 단위
    + `px`: 모니터의 픽셀을 나타냄. 고정적인 단위다.
    + `%`: 상위 요소에 대한 상대적 단위.
    + `em`: 해당 element의 폰트 크기에 대한 상대적 단위다. 1em이 해당 폰트 크기와 같다. 그래서 폰트 크기에 따라 동적으로 크기가 변함. 소수점은 `.5` 처럼 표시한다. 그런데 폰트 사이즈를 em으로 지정하면 부모 엘리먼트의 폰트 크기를 참조한다.
- 색상
    + 기본 색상 종류: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow
    + RGB: `RGB(255, 0, 0)`
    + HEX: `#ffcc00`
- HTML 링크: `<link rel="stylesheet" type="text/css" href="file_name.css">.`
- 브라우저 지원 : 앞에 붙인다. `-webkit-`, `-moz-`, `-o-`
- `text-transform: uppercase` : 대문자로 바꾸기
- `letter-spacing: 3px;` : 글자 간격 3px
- `box-sizing: border-box;` : 설정된 width, height 값을 무조건 지킨다. 이 속성이 없을 때 padding 값이 있으면 태그의 범위가 더 넓어진다. 즉 전체 가로가 width + padding left, right 값이 되는 것. 하지만 속성이 있으며녀 무조건 가로는 width다.
- `border: none;` : input box에서 테두리선 없애기. 자동으로 있게 마련이다.
- `outline: none;` : 입력 부분이 focus 되더라도 테두리선으로 강조표시 하지 않음.
- `transition: all 0.2s ease-in-out;` : [참고링크](https://css-tricks.com/almanac/properties/t/transition/) `transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];` 형태로 사용한다.

## 2. selector

### 2.1 자식, 형제, 부모

- 자식 선택자
    + ` ` 공백: `grand parents child` 처럼 element를 순서대로 한 칸 씩 띄워서 쓰면 모든 자식을 의미한다. 자식의 자식, 자식의 자식의 자식 element도 선택된다.
    + `>` : `grand > parents > child` 처럼 `>`로 구분해서 쓰면 바로 연결된 직속 자식만이 선택된다.
- `+` : 인접 형제 선택자. Orange, Banana만 폰트 색이 빨강으로 바뀐다.

    ```css
    <div class="abc">
      <p>Apple.</p>
      <p>Orange.</p>
      <p>Banana.</p>
    </div>

    p + p {
      color: red;
    }
    ```

- `~`: 일반 형제 선택자. 아래 코드에서 Orange, Banana 변경. 바로 옆에 인접하지 않더라도 형제라면 선택된다.

    ```css
    <div class="abc">
      <p>Apple.</p>
      <p>Orange.</p>
      <div>Something else</div>
      <p>Banana.</p>
    </div>

    p ~ p {
      color: red;
    }
    ```

- 부모 선택자
    + `:has(selector_list) { style properties }` : 자식으로 이러이러한 요소를 가지는 요소를 선택한다. `:has` pseudo class 사용.
    + 아직 실험 기능이라서 지원하는 브라우저가 없다. 그래서 JQuery로 해야함. 예를 들어 `$( "li.item-a" ).parent().css( "background-color", "red" );`
    + 참고 링크: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:has)

    ```css
    a:has(> img) { /* some style */ }
    ```

### 2.2 pseudo-class 선택자

#### 2.2.1 링크 관련

- `:link` : href 속성이 있는 element 선택.
- `:visited` : 방문한 링크
- `:hover` : 해당 엘리먼트 위에 커서가 올 때. 링크 아니라도 적용 가능
- `:active` : 마우스로 링크를 클릭한 순간

위 네 가지 선택자는 모두 같은 우선순위라서 순서에 따라 적용되는 것이 달라진다. 그러므로 a 태그를 쓸 때는 순서에 유의해야 함. 즉 **:link > :visited > :hover > :active** 순으로.

#### 2.2.2 다른 것

{'fraction_non_alphanumeric': 0.15900745521308557, 'fraction_numerical': 0.011127183709803048, 'mean_word_length': 2.3562359970126963, 'pattern_counts': {'":': 0, '<': 65, '<?xml version=': 0, '>': 80, 'https://': 3, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2731249', 'n_tokens_mistral': 5965, 'n_tokens_neox': 7213, 'n_words': 1292}