[웹 개발 입문 - CSS] 2장 - CSS Property

2.1 CSS Colors

  - 색상명

  - 색상 값

    - RGB 값

    - RGBA 값

    - HEX 값

    - HSL 값

      - Hue; 색조, 0~360, 360 (R) / 120 (G) / 240 (B)

      - Saturation; 채도, 0~100%, 회색 음영 (0%)

      - Lightness; 밝기, 0~100%, 검은색 (0%)

    - HSLA 값

      - Alpha; 투명도, 0에 가까울수록 투명해짐

2.2 CSS Background

  - background-color

  - background-image

    - 속성 값은 url(" ")

  - background-repeat

    - background-image가 적용되는 HTML 요소의 크기보다 작은 경우 자동으로 이미지가 상하/좌우로 반복되어 나타남

    - repeat-x, repeat-y, no-repeat

  - background-position

    - 배경 이미지의 위치를 지정하는 옵션

  - background-attachment

    - 콘텐츠 영역에 스크롤이 있을 경우 스크롤이 진행될 때 배경 이미지도 같이 스크롤 될지,

       아니면 배경 이미지는 콘텐츠가 스크롤 되더라도 고정된 위치에 있을지 결정

    - fixed, scroll

  - background 스타일 한번에 적용하기

    - background-color / image / repeat / position 하나로 축약 가능

2.3 CSS Borders

  - border-style

  - border-width

  - border-color

  - border 스타일 한번에 적용하기

    - border-width, border-style, border-color 하나로 축약 가능

  - 둥근 border

2.4 CSS Height/Width

  - auto, length, %, initial, inherit

2.5 CSS Box 모델

  - content, padding, border, margin

2.6 CSS Outline

  - outline은 border의 바깥 영역

2.7 CSS Text

  - color

  - text-align

    - justify는 양쪽 정렬, 텍스트가 삽입되어 있는 요소의 넓이를 가득 채우게 함

  - text-decoration

    - overline, line-through, underline

    - a 태그에 기본적으로 생기는 underline -> none 으로 만들기 위해 자주 사용

  - text-transformation

    - uppercase, lowercase, captialize

  - text-shadow

    - 그림자 효과 설정

2.8 CSS Fonts

  - font-family

    - Sans-serif, Serif, Monospace, Cursive, Fantasy, ...

  - font-style

    - normal, italic, oblique

  - font-weight

    - normal, bold

  - font-size

    - px, em, ...

    - 브라우저 기본 폰트 사이즈는 16px, 1em = 16px

2.9 CSS Links

  - a 태그 스타일

    - :link

    - :visited

    - :hover

    - :active

  - cursor

2.10 CSS Lists

  - list-style-type

    - circle, square, upper-roman, lower-alpha, ...

2.11 CSS Tables

  - hover 테이블

  - Striped 테이블

2.12 CSS Display

  - display: none vs. visibility: hidden

    - display: none은 요소가 숨겨지고 해당 요소가 정말 없는 것처럼 페이지에 표시됨

    - visibility: hidden은 요소가 숨겨지지만 요소가 가지고 있는 크기 만큼은 공간을 그대로 차지

2.13 CSS Position

  - position: static;

    - 기본값

  - position: relative;

    - 부모 요소와의 상대적인 위치 기준으로 설정

  - position: fixed;

    - 요소의 위치 고정

  - position: absolute;

    - position: relative;가 적용되어 있는 부모 요소 기준으로 절대 좌표로 위치 지정

  - position: sticky;

    - 사용자의 스크롤 이벤트를 기준으로 위치 지정

2.14 CSS Overflow

  - Overflow; HTML 자식 요소가 부모 요소보다 크기가 큰 경우 자식 요소를 어떻게 보여줄지 결정

  - overflow: visible;

  - overflow: hidden;

  - overflow: scroll;

  - overflow: auto;

  - overflow-x,, overflow-y

---

[Reference]

Source Code - CSS ch 02

개발자의 품격 (유튜브) - CSS