Ect.

list-style-type

: <li>의 스타일을 설정하는 속성입니다. <ul>, <ol> 요소에 작성하는 속성입니다.

값	의미	기본값
disc	항목 타입을 속이 채워진 원형	<ul>의 기본 값
decimal	항목 타입을 숫자	<ol>의 기본값
none	항목 타입 없음
circle	항목 타입을 속이 빈 원형
square	항목 타입을 속이 채워진 사각형

outline

: <input />, <textarea> 등 포커스되었을 때 표시되는 외곽선입니다.

외곽선은 테두리와 다르며 차이점이 존재합니다. 외곽선의 경우 요소의 콘텐츠 밖에 그려지며 공간을 차지하지 않습니다.

일반적으로 outline: none;을 통해 기본적으로 표시되는 외곽선을 제거하여 사용합니다. 또한 box-shadow: none;으로 생성되는 그림자까지 제거하여 스타일을 초기화하여 사용합니다.

box-shadow

: 요소의 그림자를 설정하는 속성입니다.

box-shadow: h-offset v-offset blur spread color;

모든 개별 속성의 값은 단위 값을 사용합니다.

콤마를 사용하여 다중 그림자를 설정할 수 있습니다.

h-offset

: x축으로 얼마나 이동시킬 것인지 설정하는 속성입니다.

양수값을 작성시 오른쪽에 그림자가 생기고, 음수값을 작성하면 왼쪽에 그림자가 생깁니다. 0을 작성하면 x축 이동없이 그자리에 그림자가 생깁니다.

v-offset

: y축으로 얼마나 이동시킬 것인지 설정하는 속성입니다.

양수값을 작성시 아래쪽에 그림자가 생기고, 음수값을 작성하면 위쪽에 그림자가 생깁니다. 0을 작성하는 y축 이동없이 그자리에 그림자가 생깁니다.

blur

: 흐림 정도를 설정하는 속성입니다.

만약 0을 지정하면 하나도 흐리지 않는, 선같은 그림자가 생기게 됩니다. 값이 커질수록 더 흐려지게 설정됩니다.

spread

: 그림자의 크기를 설정하는 속성입니다.

color

: 그림자의 색상을 설정하는 속성입니다.

---

다음 박스들은 각각 설정한 그림자가 표시됩니다.

.cancel {
    background-color: #ff4949;
    box-shadow: 0 10px 16px 0 rgba(255, 73, 73, 0.35);
}

.confirm {
    background-color: #13ce66;
    box-shadow: 0 10px 16px 0 rgba(19, 206, 102, 0.35);
}

---

각 요소 아래쪽에 그림자가 생긴 것을 확인할 수 있습니다. 만약 blur 값을 0으로 설정하면 다음과 같이 표시됩니다.

.cancel {
    background-color: #ff4949;
    box-shadow: 0 10px 0 0 rgba(255, 73, 73, 0.35);
}

.confirm {
    background-color: #13ce66;
    box-shadow: 0 10px 0 0 rgba(19, 206, 102, 0.35);
}

다음과 같이 blur를 0으로 설정하면 그림자의 흐림정도가 없이 표시됩니다.

opacity

• 요소의 투명도를 설정하는 속성입니다.

• 요소의 내부 콘텐츠까지 모두 적용되므로 만약 0을 작성하면 요소 자체가 완전 투명하여 없는 요소처럼 표현됩니다.

0을 지정하면 완전 투명하게 설정되고, 1을 설정하면 완전 불투명으로 설정됩니다. 즉 0부터 1사이 소수점 숫자값을 사용합니다.

• 값	의미	기본값
  숫자	0부터 1사이의 소수점 숫자	1

• opacity: 0;은 visibility: hidden;과 동일한 효과를 보여줍니다. 즉, 레이아웃은 변경시키지 않고 화면에서 요소만 보이지 않게 합니다.

overflow

• 요소의 크기 이상으로 content가 넘쳤을 경우 content의 보여짐을 제어하는 속성입니다.

• overflow는 단축 속성으로 overflow-x와 overflow-y 개별 속성을 지정할 수 있습니다.

• 크기를 가질 수 있는 , 즉 width, heigth 값을 가질 수 있는 요소 안 콘텐츠가 요소의 크기를 벗어났을 때 벗어난 콘텐츠를 처리할 방법을 설정하는 속성입니다.

• 값	의미	기본값
  visible	넘친 부분을 자르지 않고 다 보여줌	visible
  hidden	넘친 부분을 잘라내고 안보이게 함
  scroll	넘친 부분을 잘라내고 스크롤 바를 강제로 생성
  auto	넘친 부분이 있는 경우에만 잘라내고 스크롤 바를 생성

overflow-x

• x축의 content 보여짐을 제어하는 속성입니다.

overflow-y

• y축의 content 보여짐을 제어하는 속성입니다.

transform

• 요소를 2차원 혹은 3차원의 공간에서 변형하는 것을 도와주는 속성입니다.

• 변형되는 기준은 자기 자신을 기준으로 변형됩니다. 기존 요소의 중앙을 원점으로 하여 변형이 됩니다.

• 이때 요소는 변형되기 이전 위치에 존재하는 것으로 다른 요소들에게 인지됩니다. 즉, position: relative;처럼 화면에 보여지는 위치에 존재하는 것이 아니라 실제로는 기존 위치에 존재하는 것으로 인지됩니다. 그러므로 다른 요소들에게 영향을 주지 않습니다.

• 공백으로 구분하여 여러 변환 함수를 작성할 수도 있습니다. 여러 개 작성하는 경우 순서대로 적용됩니다.

• % 단위를 사용하는 경우 자기 자신의 가로, 세로 너비 값의 비율을 의미합니다.

• 값(변환함수)	의미	단위
  none	변환 없음, 기본값	none
  scale(N)	크기	없음(정수, 배수)
  scale(x, y)	크기	없음(정수, 배수)
  scaleX(N)	크기	없음(숫자, 배수)
  scaleY(N)	크기	없음(숫자, 배수)
  rotate(Ndeg)	회전(각도)	deg, grab, rad, turn
  translate(x, y)	이동(x축, y축)	px, em, rem, % 등
  translateX(x)	이동(x축)	px, em, rem, % 등
  translateY(y)	이동(y축)	px, em, rem, % 등
  skew(deg)	비틀기	deg, grab, rad, turn
  skewX(Xdeg, Ydeg)	비틀기	deg, grab, rad, turn
  skewY(Xdeg, Ydeg)	비틀기	deg, grab, rad, turn
  matrix()

• scale 함수로 요소의 크기를 조절할 수 있습니다. 인수로는 정수를 전달합니다. 숫자 1을 지정하면 자기 자신의 크기를 유지합니다. 만약 2를 작성하면 자기 원래 사이즈보다 2배 커집니다. 0.5를 작성하면 자기 사이즈보다 0.5배로 줄어들게 됩니다.
  즉, 1보다 큰 숫자 작성시 요소 사이즈가 커지고, 1보다 작은 경우 사이즈가 줄어듭니다. 이때도 기존 자기 위치, 사이즈에 실제로 존재한다고 다른 요소들은 인식하여 다른 요소에 영향을 주지 않습니다.

• rotate 함수는 요소를 회전시키는 함수입니다. 만약 45degree를 작성하면 시계방향으로 45도 회전하게 됩니다. 만약 -45degree를 작성하면 반대 방향으로 45도 회전하게 됩니다.
  turn 단위의 경우 1turn이 시계방향으로 한 바퀴를 의미합니다. 0.5turn은 시계방향으로 반바퀴를 의미합니다.

• translate 함수는 요소를 원하는 방향으로 이동시켜주는 함수입니다. 기존 요소의 좌측 상단을 영점으로 이동합니다.

transform-origin

• transform 속성의 변형 기준점을 변경하는 속성입니다.

• 기본값은 center로 요소의 중앙을 원점으로 변형이 이루어집니다.

• 값	의미	기본값
  방향	top, bottom, right, left, center	center
  px, em, rem 등	좌측 상단을 기준으로 영점을 재설정
  % 단위	좌측 상단을 기준으로 영점을 요소 자체의 가로, 세로 너비 백분율로 재설정

---

위 그림처럼 짙은 붉은 색이 transform-origin이 center이며, translate(10px, 10px)을 적용한 결과입니다.

짙은 붉은 점이 오른쪽으로 10px, 아래로 10px 이동하게 되어 밝은 붉은점으로 원점이 이동하게 되었습니다.

위 그림은 rotate(30deg)를 적용한 결과입니다. 이 또한 기존 요소의 중앙을 원점으로 시계방향으로 30도 이동한 결과입니다.

즉, transform 속성의 변형 기준점은 요소의 중앙을 원점으로 변형이 시작됩니다.

---

이렇게 transform 변형 기준점을 변경하는 속성으로 transform-origin 속성을 사용합니다.

이때 기존 중앙에서 이동하여 변경되는 것이 아니라 요소의 좌측 상단을 기준으로 변형 기준점을 설정하게 됩니다.

transform-origin: 10px 10px;의 경우 기존 요소의 좌측 상단을 영점으로 오른쪽으로 10px, 아래로 10px 이동한 지점이 바로 새로운 변형 기준점이 됩니다.

visibility

• 요소를 보여줄 것인지 안보여줄 것인지 설정하는 속성입니다.

• 값	의미	기본값
  visible	보여짐	visible
  hidden	안보여짐

• visibility: hidden;을 설정하면 요소가 화면에서 보여지지 않게 됩니다. 이때 주의할 점은 실제로 없어진 것이 아니라 단지 화면상에서만 보여지지 않는 것이지 실제로는 아직 그 위치에 존재합니다(opacity: 0;과 유사, 레이아웃 변경 X).

• visibility: hidden; 과 display: none;을 잘 구분해야 합니다.
  display: none;같은 경우에는 요소 자체를 없는 존재로 취급하도록 설정합니다. 하지만 visibility: hidden;는 눈에서만 보여지지 않을 뿐 레이아웃을 변경시키지 않고 그 위치에 요소가 존재합니다.