[CSS] 속성 모음

* z-index 속성 *
- 요소를 화면에 표시할 순서를 정한다.
- 값은 0(기본값)이상의 자연수로 표시한다.
- 값이 클수록 다른 요소에 의해 가려지지 않고 화면에 표시된다.
- 용법
  ... {
    z-index: [0~?];
  }
- 값이 같다면 보다 뒤에 만들어진 요소가 위로 올라오게 된다.
- position 속성 값이 static 이라면 무시된다.
* width 및 height 속성 *
- width는 가로크기를, height는 세로크기를 지정하기 위해 사용한다.
- 단, display가 inline인 요소(span, a 등)는 그 display 값을 다른 것으로 변경하기 전에는 width 및 height 속성이 적용되지 않는다.
* transition-duration 속성 *
- 어떠한 요소에 CSS 속성이 추가되거나 변경될때 해당 추가 혹은 변경 사항이 적용되는데 걸리는 시간을 지정한다.
- 기본값이 0임으로 기본적으로는 이러한 속성이 변경될 때 즉시 변경된다.
- 중간값이 없는 속성(display, text-align 등)은 transition의 영향을 받지 않는다.
- 용법
  ... {
    transition-duration: [?ms|?s];
  }
  - 이때 ms는 밀리초 단위이고 1000ms는 1초이다. 마찬가지로 s는 초 단위이고 1s는 1000ms이다.

* transition-timing-function 속성 *
- 트랜지션의 영향을 받아 변화하는 속성이 시간의 지남에 따라 변화할 수준에 대한 설정이다.
- 용법
  ... {
    transition-timing-function: *x;
  }
  - *x
    - t% : 시간의 변화에 따른 백분율. 가령 transition-duration이 1000ms 였다면, 0ms 차가 0%, 1000ms 차가 100%이다.
    - c% : 속성 변화에 따른 백분율. 가령 opacity 값이 0% 에서 100%까지 변하는 부분이라면, 0%일때 c%가 0%, 100%일때 c%가 100%이다.
    - linear : Δt%:Δc% = 1:1, 시간 변화율에 따른 속성 변화율이 1:1로, 선형(Linear)이라 한다.
    - ease : (기본값) 베지에 곡선 함수 cubic-bezier(0.25, 0.1, 0.25, 1.0)와 같다. 초반 시간변화에 따른 변화 완료율이 가파르고, 시간이 지남에 따라 변화율이 점차 낮아진다. (가속 속도가 감속 속도보다 빠르다.)
    - ease-in : 베지에 곡선 함수 cubic-bezier(0.42, 0, 1.0, 1.0)와 같다. 천천히 시작하여 완료될 때 까지 가속한다.
    - ease-out : 베지에 곡선 함수 cubic-bezier(0, 0, 0.58, 1.0)와 같다. 빠르게 시작하여 완료될 때 까지 감속한다.
    - ease-in-out : 베지에 곡선 함수 cubic-bezier(0.42, 0, 0.58, 1.0)와 같다. 천천히 시작하여 가속하고, 끝에 다시 감속한다. (가속 속도와 감속 속도가 같다.)
    - cubic-bezier(v1, v2, v3, v4) : 직접 베지에 곡선 함수를 그린다. https://cubic-bezier.com/
* transform 속성 *
- 요소의 형태나 위치를 변화시키기 위해 사용한다.
- 각 함수는 띄우기( )로 구분하여 여러개 사용한다. 절대 transform 속성을 여러개 사용하지 않는다.
- 함수
  - rotate(?deg) : (해당 2D 상의 요소를 고정축 기준으로) 회전한다. (deg : Degree, 도)
  - rotateX(?deg) : X축으로 회전한다.
  - rotateY(?deg) : Y축으로 회전한다.
  - rotateZ(?deg) : Z축으로 회전한다.
  - scale([0.0~|0%~]) : 해당 요소를 확대/축소한다. 기본 값은 1(100%)이다.
  - translate([X축 이동량 : ?px|?rem|?%|...], [Y축 이동량 : ?px|?rem|?%|...]) : 해당 요소를 X, Y축으로 이동시킨다. 이 때 퍼센트(%)값은 부모와 관계 없이 본 요소의 크기에 대한 백분율이다.
  - translateX([?px|?rem|?%|...]) : 해당 요소를 X축으로 이동시킨다.
  - translateY([?px|?rem|?%|...]) : 해당 요소를 Y축으로 이동시킨다.
* position 속성 *
- position 속성(Property)은 해당 요소가 어떻게 위치할 것인가에 대한 설정이다.
- 기본 값은 static 이고, 사용할 수 있는 속성 값은 아래와 같다.
  - static : 해당 요소가 원래 위치해야하는 위치에 위치하도록 한다.
  - relative : 해당 요소가 원래 위치해야하는 위치에 위치하거나 해당 위치를 기준으로 움직이도록 한다.
  - absolute : position 속성 값이 static이 아닌 가장 가까운 부모를 기준으로 움직인다. 단, 그러한 부모가 없다면 문서를 기준으로 움직인다. 다른 요소나 텍스트의 흐름에 영향을 끼치지 않는다.
  - fixed : 뷰포트를 기준으로 움직이고, 스크롤의 영향을 받지 않는다. 다른 요소나 텍스트의 흐름에 영향을 끼치지 않는다.
  - ...

* top, right, bottom, left 속성 *
- position 속성 값이 static이라면 무시된다.
- top : 해당 요소의 윗변을 기준으로 이동한다. (bottom과 함께 쓰지 않는다.)
- right : 해당 요소의 우변을 기준으로 이동한다. (left와 함께 쓰지 않는다.)
- bottom : 해당 요소의 아랫변을 기준으로 이동한다. (top과 함께 쓰지 않는다.)
- left : 해당 요소의 좌변을 기준으로 이동한다. (right와 함께 쓰지 않는다.)




* padding 속성 *
- 요소의 내부 여백을 지정하기 위해 사용한다.

- 용법 (한 개)
  ... {
    padding: [?px|?rem|?%|...];
  }
  - 선택된 요소의 모든 방향에 대한 내부 여백을 지정한다.
  - 퍼센트(%)값은 해당 요소를 포함하는 부모 요소의 크기에 대한 백분율이다.

- 용법 (두 개)
  ... {
    padding: [상/하 : ?px|?rem|?%|...] [좌/우 : ?px|?rem|?%|...];
  }
  - 선택된 요소의 상/하 및 좌/우 내부 여백을 각각 지정한다.

- 용법 (네 개)
  ... {
    padding: [상 : ?px|?rem|?%|...] [우 : ?px|?rem|?%|...] [하 : ?px|?rem|?%|...] [좌 : ?px|?rem|?%|...];
  }
  - 선택된 요소의 상, 우, 하, 좌 내부 여백을 각각 지정한다. (12시 부터 시계 방향으로 네 군데)

* padding-top 속성 *
- 상부 내부 여백을 지정하기 위해 사용한다.
- 용법
  ... {
    padding-top: [?px|?rem|?%|...];
  }

* padding-right 속성 *
- 우측 내부 여백을 지정하기 위해 사용한다.
- 용법
  ... {
    padding-right: [?px|?rem|?%|...];
  }

* padding-bottom 속성 *
- 하부 내부 여백을 지정하기 위해 사용한다.
- 용법
  ... {
    padding-bottom: [?px|?rem|?%|...];
  }

* padding-left 속성 *
- 좌측 내부 여백을 지정하기 위해 사용한다.
- 용법
  ... {
    padding-left: [?px|?rem|?%|...];
  }
* overflow 속성 *
- 해당 요소의 범위를 벗어나는 자식 및 자손에 대한 처리를 위해 사용한다.
- 용법
  ... {
    overflow: *x;
  }
- 용법
  ... {
    overflow: [가로축 : *x] [세로축 : *x];
  }
  - *x
    - visible : 본 요소를 벗어나는 자식, 자손을 그냥 그대로 보이게 한다. (기본값)
    - hidden : 본 요소를 벗어나는 자식, 자손을 보이지 않게 한다.
    - scroll : 넘침 여부와 관계 없이 스크롤 바를 표시한다.
    - auto : 넘치지 않으면 아무 것도 하지 않고, 넘치면 스크롤 바를 표시한다.
* overflow 속성 *
- 해당 요소의 범위를 벗어나는 자식 및 자손에 대한 처리를 위해 사용한다.
- 용법
  ... {
    overflow: *x;
  }
- 용법
  ... {
    overflow: [가로축 : *x] [세로축 : *x];
  }
  - *x
    - visible : 본 요소를 벗어나는 자식, 자손을 그냥 그대로 보이게 한다. (기본값)
    - hidden : 본 요소를 벗어나는 자식, 자손을 보이지 않게 한다.
    - scroll : 넘침 여부와 관계 없이 스크롤 바를 표시한다.
    - auto : 넘치지 않으면 아무 것도 하지 않고, 넘치면 스크롤 바를 표시한다.
* max-width 속성 *
- 해당 요소의 최대 가로길이를 지정하기 위해 사용한다.

* max-height 속성 *
- 해당 요소의 최대 세로길이를 지정하기 위해 사용한다.

* min-width 속성 *
- 해당 요소의 최소 가로길이를 지정하기 위해 사용한다.

* min-height 속성 *
- 해당 요소의 최소 세로길이를 지정하기 위해 사용한다.
* margin 속성 *
- 요소의 외부 여백을 지정하기 위해 사용한다.
- 외부 여백은 요소의 본래 크기로 인정되지 않는다.
- 상/하 외부 여백은 display 속성 값이 inline인 것(가령 a, span 등)에 대해서는 효과를 가지지 않는다.
- 요소를 가운데 정렬하기 위해 margin 속성 값을 '0 auto'로 두지 않는다. (구시대 방식)

- 용법 (한 개)
  ... {
    margin: [?px|?rem|?%|...];
  }
  - 선택된 요소의 모든 방향에 대한 외부 여백을 지정한다.
  - 퍼센트(%)값은 해당 요소를 포함하는 부모 요소의 크기에 대한 백분율이다.

- 용법 (두 개)
  ... {
    margin: [상/하 : ?px|?rem|?%|...] [좌/우 : ?px|?rem|?%|...];
  }
  - 선택된 요소의 상/하 및 좌/우 외부 여백을 각각 지정한다.

- 용법 (네 개)
  ... {
    margin: [상 : ?px|?rem|?%|...] [우 : ?px|?rem|?%|...] [하 : ?px|?rem|?%|...] [좌 : ?px|?rem|?%|...];
  }
  - 선택된 요소의 상, 우, 하, 좌 외부 여백을 각각 지정한다. (12시 부터 시계 방향으로 네 군데)

* margin-top 속성 *
- 상부 외부 여백을 지정하기 위해 사용한다.
- 용법
  ... {
    margin-top: [?px|?rem|?%|...];
  }

* margin-right 속성 *
- 우측 외부 여백을 지정하기 위해 사용한다.
- 용법
  ... {
    margin-right: [?px|?rem|?%|...];
  }

* margin-bottom 속성 *
- 하부 외부 여백을 지정하기 위해 사용한다.
- 용법
  ... {
    margin-bottom: [?px|?rem|?%|...];
  }

* margin-left 속성 *
- 좌측 외부 여백을 지정하기 위해 사용한다.
- 용법
  ... {
    margin-left: [?px|?rem|?%|...];
  }
* grid 관련 *
- 획일적인 레이아웃을 구성하기 위해 사용한다.
- 그리드 컨테이너가 가지는 자식들의 크기가 같거나 최소 크기의 배수일때 사용한다. (주로) 가령, 유튜브나 에르메스 사이트.
- 주의 : 데이터를 담기 위해 그리드를 사용하면 안되며, 레이아웃을 구성하기 위해 테이블을 사용하여서는 안 된다. 그리드와 테이블의 역할은 다름.
- 그리드화 할 부모 요소의 'display' 속성 값을 'grid'로 지정하면 된다.

* grid-template-columns 속성 *
- 그리드 컨테이너에 부여하는 속성으로, 열 크기의 비율(혹은 고정 크기)을 지정한다. (개수도 동시에 지정함)
- 열 크기의 비율은 fr(fraction) 단위를 이용한다.
- 가령, 크기가 같은 두 개의 열을 지정하기 위해 아래와 같이 사용한다.
  - grid-template-columns: 1fr 1fr;
- 다만, 열의 개수가 많다면 repeat() 함수를 이용하여 아래와 같이 사용한다.
  - grid-template-columns: repeat(8, 1fr); /* 1fr을 8번 반복함 */
  - 위와 같이 적는 것은 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 라고 적는 것과 같다.

* grid-template-rows 속성 *
- 그리드 컨테이너에 부여하는 속성으로, 행 크기의 비율(혹은 고정 크기)을 지정한다. (개수도 동시에 지정함)
- 행 크기의 비율은 fr(fraction) 단위를 이용한다.
- 가령, 크기가 같은 두 개의 행을 지정하기 위해 아래와 같이 사용한다.
  - grid-template-rows: 1fr 1fr;
- 다만, 행의 개수가 많다면 repeat() 함수를 이용하여 아래와 같이 사용한다.
  - grid-template-rows: repeat(8, 1fr); /* 1fr을 8번 반복함 */
  - 위와 같이 적는 것은 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 라고 적는 것과 같다.

* gap 속성 *
- 그리드 컨테이너에 부여하는 속성으로, 이가 가지는 자식들 간의 여유 공간을 지정한다.
- 그리드 컨테이너의 자식들 간의 여유 공간을 주기 위해서 'margin'을 사용하지 않는다.
- 속성 값을 하나만 주면 위/아래, 좌/우 여백을 설정한다. 가령 gap: 1rem; 을 지정하면 모든 여백을 1rem으로 설정한다.
- 속성 값을 공백으로 구분하여 두개 주면 각 값은 상/하, 좌/우 순서대로 적용된다. 가령 gap: 1rem 2rem; 을 지정하면 상/하 여백이 1rem, 좌/우 여백이 2rem이 된다.

* grid-column-start, grid-column-end 속성 *
- 그리드 컨테이너 자식에게 부여한다.
- 'grid-column-start' 속성은 해당 그리드가 시작할 열 인덱스 번호를 지정한다.
- 'grid-column-end' 속성은 해당 그리드가 끝날 열 인덱스 번호를 지정한다.

* grid-row-start, grid-row-end 속성 *
- 그리드 컨테이너 자식에게 부여한다.
- 'grid-row-start' 속성은 해당 그리드가 시작할 행 인덱스 번호를 지정한다.
- 'grid-row-end' 속성은 해당 그리드가 끝날 행 인덱스 번호를 지정한다.
* font-family 속성 *
- 서체를 지정하기 위해 사용한다.
- 로컬에 있는 폰트를 사용하지 않는다.
- 용법
  ... {
    font-family: '폰트 1', '폰트 2',..., [serif|sans-serif|monospace|cursive];
  }
  - 콤마(,)로 구분하여 여러개의 폰트를 이용할 수 있다.
  - 먼저 적은 폰트(위에서 '폰트 1')가 뒤에 나오는 다른 폰트 보다 우선 순위를 가진다.
  - 마지막으로 명시하는 폰트는 serif 혹은 sans-serif 혹은 monospace여야한다.

* font-size 속성 *
- 글씨의 크기를 지정하기 위해 사용한다.
- 별도로 지정하지 않으면 기본 1rem임. (브라우저도 기본 설정이라면 16px)
- 용법
  ... {
    font-size: [?px|?rem|...];
  }

* font-weight 속성 *
- 글씨의 굵기를 지정하기 위해 사용한다. (폰트에서 지원해야만 한다.)
  ... {
    font-weight: *x;
  }
  - *x
    - normal : 일반 굵기
    - bold : 굵은 굵기
    - lighter : 부모 요소의 글씨 굵기보다 얇은 굵기
    - bolder : 부모 요소의 글씨 굵기보다 굵은 굵기
    - 100 부터 900까지 100단위 : 폰트 자체가 가진 굵기(100, 200, ..., 800, 900)
* flex 관련 *
- display 속성 값이 'flex' 혹은 'inline-flex'인 부모(Flex 컨테이너)가 가지는 자식 요소들의 흐름을 쉽게 설정하기 위해 사용한다.

* flex-direction 속성 *
- Flex 컨테이너에 지정하는 속성이다.
- 이가 가지는 자식 요소들에 대한 흐름의 방향을 지정한다.
- 이때 자식 요소들의 display 값과 관계 없이 정렬한다.
- 속성 값 :
  - row : 행방향(가로방향) 정렬
  - row-reverse : 행방향(가로방향) 역정렬
  - column : 열방향(세로방향) 정렬
  - column-reverse : 열방향(세로방향) 역정렬

* justify-content 속성 *
- Flex 컨테이너에 지정하는 속성이다.
- 'flex-direction' 속성 값의 방향과 수평한 방향에 대한 정렬이다.
- 속성 값 :
  - flex-start(start) : 흐름의 방향에 대한 시작점 부터의 정렬.
  - flex-end(end) : 흐름의 방향에 대한 끝점 부터의 정렬.
  - center : 흐름의 방향에 대한 가운데 정렬
  - left : 흐름의 방향에 대한 화면상 왼쪽 정렬.
  - right : 흐름의 방향에 대한 화면상 오른쪽 정렬.
  - space-between : 자식 요소들 간 거리를 같은 비율로 나누어 정렬.
  - space-around : 자식 요소들 간 거리를 같은 비율인 x로, 양 끝 빈 공간에 대해 x/2로  나누어 정렬.

* align-items 속성 *
- Flex 컨테이너에 지정하는 속성이다.
- 'flex-direction' 속성 값의 방향과 수직한 방향에 대한 정렬이다.
- 속성 값 :
  - flex-start : 시작점 정렬. (flex-direction 속성 값이 row|row-reverse 일때 위쪽 정렬)
  - flex-end : 끝점 정렬. (flex-direction 속성 값이 row|row-reverse 일때 아래쪽 정렬)
  - center : 가운데 정렬.
  - stretch : 늘어뜨림.

* align-content 속성 *
- Flex 컨테이너에 지정하는 속성이다.
- 개행이 이루어지지 않은 Flex 컨테이너 혹은 'flex-wrap'이 'nowrap'인 경우 무시된다.
- 'align-items' 속성 같은 경우, 각 축에 대한 'flex-direction'과 수직한 방향으로의 정렬이나, 'align-content'는 전체 내용과 컨테이너간의 'flex-direction'과 수직한 방향으로의 정렬이다.

* flex-wrap 속성 *
- Flex 컨테이너에 지정하는 속성이다.
- 'justify-content' 방향으로 넘치는 자식 요소에 대해 'align-items' 방향으로 개행할 것인가에 대한 설정이다.
- 속성 값:
  - nowrap : 개행하지 않는다. (기본값)
  - wrap : 개행한다.

* flex-basis 속성 *
- Flex 컨테이너의 자식에게 부여하는 속성이다.
- 해당 요소의 기본 크기를 지정한다. 'flex-direction'과 수평한 방향의 크기를 지정하는데, 'row' 혹은 'row-reverse'일 때 'width'와 같고, 'column' 혹은 'column-reverse'일 때 'height'와 같다.

* flex-grow 속성 *
- Flex 컨테이너의 자식에게 부여하는 속성이다.
- 해당 요소가 'flex-direction'과 수평한 방향으로 (빈 공간을 차지하며)늘어나는 비율을 지정한다. 기본 값은 0이며 0일 때 늘어나지 않는다.

* flex-shrink 속성 *
- Flex 컨테이너의 자식에게 부여하는 속성이다.
- 해당 요소가 'flex-direction'과 수평한 방향으로 줄어드는 비율을 지정한다. 기본 값은 0이며 0일 때 줄어들지 않는다.

* flex *
- Flex 컨테이너의 자식에게 부여하는 속성이다.
- 'flex-grow', 'flex-shrink', 'flex-basis' 속성 값을 한번에 적을 때 사용한다.
- flex : [flex-grow 값] [flex-shrink 값]; /* 이 때 flex-basis 값은 auto가 된다. */
- flex : [flex-grow 값] [flex-shrink 값] [flex-basis 값];
- flex : [flex-grow와 flex-shrink값|flex-basis 값]; /* 길이 단위 없이 숫자만 적으면 flex-grow와 flex-shrink 값이 되며, 이가 아니라면 flex-basis 값을 지정하게 된다. */
  - flex: 1; 은 flex-shirnk와 flex-grow 값을 1로 지정하는 것이 된다.
  - flex: 1rem; 은 flex-basis값을 1rem으로 지정하는 것이 된다.
* filter 속성 *
- 색상과 관련된 효과(카메라에 있는 그것)를 위해 사용한다.
- 함수를 이용하며 함수 이용시 공백( )으로 여러개의 함수를 이용할 수 있다. (절대 filter 속성을 여러개 사용하지 않는다.)
- 함수
  - blur([?px|?rem|...]) : 해당 요소의 내용을 주어진 길이 만큼 흐린다.
  - brightness([0.0~|0%~]) : 해당 요소의 밝기를 조절한다. 기본 값은 1(혹은 100%)이며 값이 작아지면 어두워지고, 커지면 밝아진다.
  - contrast([0.0~|0%~]) : 해당 요소의 대비를 조절한다. 기본 값은 1(혹은 100%)이다.
  - drop-shadow([X축 오프셋 : ?px|?rem|...] [Y축 오프셋 : ?px|?rem|...] [퍼짐 정도 : ?px|?rem|...] [색상]) : 해당 요소의 투명한 부분과 그렇지 않은 부분의 경계에 대해 그림자를 생성한다.
  - grayscale([0.0~1.0|0%~100%]) : 해당 요소의 회색조를 조절한다. 기본 값은 0(혹은 0%)이며 값이 커지면 채도가 빠져 흑백 사진이 된다.
  - invert([0|1|0%|100%]) : 해당 요소를 반전시킨다. 기본 값은 0(혹은 0%)이며 값이 커지면 색이 반전된다. 중간 값을 사용하지 않는다.
* display 속성 *
- 요소의 표시 유형을 지정하기 위해 사용한다.
- 용법
  ... {
    display: *x;
  }
- *x
  - block : 부모 요소의 가로크기를 전체 차지하는(한 줄을 다 차지 하는) 표시 방식(기본적으로 div 등이 그러함)
  - inline : 일반 텍스트 처럼 취급된다.
  - inline-block : 일반 텍스트 처럼 취급되나, block의 속성(가로/세로 크기 지정, margin-top, margin-bottom 적용 등)을 일부 가진다.
  - flex : 해당 요소를 flex 컨테이너로 만든다.
  - inline-flex : 해당 요소를 flex 컨테이너로 만드나 inline-block 처럼 취급된다.
  - grid : 해당 요소를 grid 컨테이너로 만든다.
  - inline-grid : 해당 요소를 grid 컨테이너로 만드나 inline-block 처럼 취급된다.
* cursor 속성 *
- 해당 요소에 마우스를 올렸을 때 표시할 커서의 종류를 지정한다.
- 용법
  ... {
    cursor: *x;
  }
- *x 값
  - auto: 해당 요소의 종류나 역할에 따라 마우스 커서를 자동으로 지정한다. (기본값)
  - default: 평소 상태의 마우스 커서.
  - none: 마우스 커서를 그리지 않는다. (SEO 점수 개박살남)
  - pointer: 클릭할 수 있는 모양의 커서. 주로 클릭하면 무슨일이 발생하거나, 링크인 것에 사용된다.
  - text: 텍스트 필드에서의 커서. 아이빔(I)이라고 하기도 한다.
  - 추가 커서 : https://developer.mozilla.org/ko/docs/Web/CSS/cursor
* color 속성 *
- 글씨의 색을 지정하기 위해 사용한다.
- 용법
  ... {
    color: [*literal|rgb(...)|rgba(...)|#...];
  }
* border 속성 *
- 요소의 테두리를 그리기 위해 사용한다.
- 테두리는 크기에 영향을 미친다.

- 용법
  ... {
    border: [none | [[크기 : ?px|?rem|...] [모양 : *x] [색상]]];
  }
  - none 값을 주게 되면 테두리가 없어진다.
  - *x
    - dotted : 원형 점선
    - dashed : 직사각형 점선
    - solid : 실선
    - double : 이중 실선
    - 기타 : https://developer.mozilla.org/ko/docs/Web/CSS/border-style

* border-top 속성 *
- 상단 테두리를 그리기 위해 사용한다. 용법은 border와 같다.

* border-right 속성 *
- 우측 테두리를 그리기 위해 사용한다. 용법은 border와 같다.

* border-bottom 속성 *
- 하단 테두리를 그리기 위해 사용한다. 용법은 border와 같다.

* border-left 속성 *
- 좌측 테두리를 그리기 위해 사용한다. 용법은 border와 같다.

* border-radius 속성 *
- 요소의 각 꼭지점을 둥글게할 반지름을 지정한다.
- 용법
  ... {
    border-radius: [?px|?rem|?%|...];
  }
  - 좌상, 우상, 우하, 좌하측 꼭지점을 둥글게할 반지름을 설정한다.
  - 퍼센트(%) 값은 해당 요소 크기에 대한 비율로, width와 height가 같은 요소에 대해 해당 값을 50%로 지정할 경우 정원(正圓)을 만들 수 있다.
  - 해당 값을 터무니 없이 크게 지정하면 소시지 모양을 만들 수 있음.

* border-top-left-radius 속성 *
- 좌측 상단 꼭지점을 둥글게할 반지름을 설정한다. 용법은 border-radius와 동일하다.

* border-top-right-radius 속성 *
- 우측 상단 꼭지점을 둥글게할 반지름을 설정한다. 용법은 border-radius와 동일하다.

* border-bottom-left-radius 속성 *
- 좌측 하단 꼭지점을 둥글게할 반지름을 설정한다. 용법은 border-radius와 동일하다.

* border-bottom-right-radius 속성 *
- 우측 하단 꼭지점을 둥글게할 반지름을 설정한다. 용법은 border-radius와 동일하다.
* background-image 속성 *
- 어떠한 요소의 배경 이미지를 지정하기 위해 사용한다.
- 이때 배경 이미지는 <img> 태그와 달리 태그가 아니므로 공간을 차지하지 않는다.
- 항시 url("주소") 함수와 함께 사용한다. (쌍따옴표 있어야함)
- 콤마(,)로 구분하여 여러개의 배경 이미지를 지정할 수 있는데, 먼저 적은 배경이미지가 위로 올라온다.
- 용법(한 개)
  ... {
    background-image: url("이미지 주소");
  }
- 용법(여러개)
  ... {
    background-image: url("이미지 주소 1"), url("이미지 주소 2"),...;
  }

* background-position 속성 *
- 표시되는 배경 이미지의 기준이되는 위치를 지정한다.
- "background-image" 속성이 없다면 의미없음.

- 용법 (한 개)
  ... {
    background-position: [top|right|bottom|left|center];
  }

- 용법 (두 개)
  ... {
    background-position: [top|bottom|center] [right|left|center];
  }

* background-repeat 속성 *
- 배경 이미지의 반복과 관련된 설정이다.
- 값 repeat-x : X축으로만 반복한다.
- 값 repeat-y : Y축으로만 반복한다.
- 값 repeat : X축과 Y축으로 반복한다. (기본값)
- 값 no-repeat : 반복하지 않는다.
- 용법 (한 개)
  ... {
    background-repeat: [repeat-x|repeat-y|repeat|no-repeat];
  }

- 용법 (두 개)
  ... {
    background-repeat: [X축 반복 설정 : repeat|no-repeat] [Y축 반복 설정 : repeat|no-repeat];
  }

* background-size 속성 *
- 배경 이미지의 크기를 지정하기위해 사용한다.

- 용법
  ... {
    background-size: [?px|?rem|?vw|?vh|?%|...];
  }
- 위 용법에서 퍼센트(%)는 배경 이미지를 포함하는 요소의 가로 크기에 대한 비율이다. 이 때 세로크기는 설정한 가로크기에 맞게(찌그러지지 않게) 자동으로 설정된다.

- 용법
  ... {
    background-size: [가로 크기 : ?px|?rem|?vw|?vh|?%|...] [세로 크기 : ?px|?rem|?vw|?vh|?%|...];
  }
- 위 용법에서 퍼센트(%)는 배경 이미지를 포함하는 요소의 가로와 세로크기에 대한 비율이다. 단, 비율이 깨어질 수 있음으로 사용에 유의한다.

- 용법
  ... {
    background-size: [cover|contain];
  }
- contain : 배경 이미지가 요소의 크기 내에서 잘리는 부분 없이, 표시할 수 있는 가장 큰 크기를 가지게 된다.
- cover : 배경 이미지가 요소의 빈 공간을 모두 덮을 수 있는 한도 내에서 가장 작은 크기를 가지게 된다.














* background-color 속성 *
- background-color 속성(Property)은 선택한 요소의 배경 색상을 지정하기 위해 사용한다.

'Front > HTML | CSS' 카테고리의 다른 글

[CSS] 결합자  (0) 2023.01.31
[CSS] 선택자 모음  (0) 2023.01.31
[CSS] 의사클래스 모음  (0) 2023.01.31
[HTML] HTML이란?  (1) 2023.01.30
[HTML] tag 모음3  (2) 2023.01.30