CSS 필수 속성 2

포지셔닝

position

요소의 포지션을 설정합니다.

• static: 기본값. 요소가 문서의 일반 흐름에 따라 배치됩니다.
• relative: 요소가 원래 위치를 기준으로 이동합니다.
• absolute: 요소가 가장 가까운 위치 지정 조상 요소를 기준으로 배치됩니다.
• fixed: 뷰포트를 기준으로 고정되며, 스크롤 시에도 그 위치를 유지합니다.
• sticky: 스크롤 위치에 따라 상대적으로 이동하다가 특정 위치에 도달하면 고정됩니다.
  position : absolute;
  top : 50%;
  left : 50%;
  transform : translate (-50% -50%);
  을 이용하면 요소를 화면 가운데에 배치할 수 있습니다.

.static {
    position: static; /* 기본값 */
}

.relative {
    position: relative; /* 원래 위치를 기준으로 이동 */
    top: 10px; /* 아래로 10px 이동 */
    left: 20px; /* 오른쪽으로 20px 이동 */
}

.absolute {
    position: absolute; /* 가장 가까운 position이 설정된 조상 요소를 기준으로 위치 */
    top: 50px; /* 위에서 50px 위치 */
    right: 10px; /* 오른쪽에서 10px 위치 */
}

.fixed {
    position: fixed; /* 뷰포트를 기준으로 위치 */
    bottom: 0; /* 화면 아래쪽에 고정 */
    left: 0; /* 왼쪽에 고정 */
}

.sticky {
    position: sticky; /* 스크롤 시 상대적 위치로 이동하다가 특정 위치에서 고정 */
    top: 0; /* 스크롤 시 상단에 고정 */
}

top, right, bottom, left

position 속성에서 정의한 위치를 조정하는 속성입니다. 각각 요소의 상단, 오른쪽, 하단, 왼쪽 위치를 설정합니다.

• 길이 값: px, em, % 등 (예: 10px, 5%)
• auto: 기본값. 위치를 자동으로 결정

.relative {
    position: relative;
    top: 20px; /* 원래 위치에서 20px 아래로 이동 */
    left: 15px; /* 원래 위치에서 15px 오른쪽으로 이동 */
}

.absolute {
    position: absolute;
    top: 50px; /* 부모 요소의 위쪽에서 50px 위치 */
    right: 30px; /* 부모 요소의 오른쪽에서 30px 위치 */
}

z-index

요소의 쌓임 순서를 설정합니다. 값이 높을수록 앞쪽에 표시됩니다. position 속성이 relative, absolute, fixed, sticky인 요소에서만 작동합니다.

• 정수 값: 양수, 음수, 0 등 (예: 1, 10, 1)

.box1 {
    position: absolute;
    z-index: 1; /* 이 요소가 다른 요소보다 위에 표시됨 */
}

.box2 {
    position: absolute;
    z-index: 2; /* 이 요소가 더 위에 표시됨 */
}

float

float 속성은 요소를 왼쪽이나 오른쪽으로 이동시켜 텍스트나 인라인 요소가 그 주위에 흐르도록 만듭니다. 주로 이미지와 같은 요소를 문단 텍스트와 함께 배치할 때 사용됩니다.

• left: 요소를 왼쪽으로 플로팅합니다.
• right: 요소를 오른쪽으로 플로팅합니다.
• none: 요소를 플로팅하지 않으며, 기본값입니다.
• inherit: 부모 요소의 float 속성 값을 상속합니다.

.image {
    float: left; /* 이미지를 왼쪽으로 플로팅 */
    margin-right: 10px; /* 오른쪽 마진 추가 */
}

.text {
    /* 텍스트가 이미지 주위로 흐르게 함 */
}

clear

clear 속성은 요소가 플로팅된 요소와의 관계를 설정합니다. 이 속성을 사용하면 특정 방향의 플로팅된 요소 옆에 놓이지 않도록 할 수 있습니다.

• left: 왼쪽에 플로팅된 요소를 피합니다.
• right: 오른쪽에 플로팅된 요소를 피합니다.
• both: 양쪽에 플로팅된 요소를 모두 피합니다.
• none: 기본값으로, 어떤 플로팅된 요소도 피하지 않습니다.
• inherit: 부모 요소의 clear 속성 값을 상속합니다.

.clearfix {
    clear: both; /* 양쪽의 플로팅 요소를 피하도록 설정 */
}

.text {
    /* 다른 스타일 설정 */
}

전환 효과

transition

요소의 변화가 발생할 때, 설정된 전환 효과를 한 번에 지정하는 속성입니다. transition 속성 하나로 여러 전환 속성을 설정할 수 있습니다.
transition-property, transition-duration, transition-delay, transition-timing-function을 쉼표로 구분하여 지정합니다.

.box {
    transition: background-color 0.5s ease-in-out, transform 0.3s;
}

transition-property

전환 효과를 적용할 CSS 속성을 지정합니다. 여러 속성을 지정할 수 있습니다.

• all: 모든 속성에 대해 전환 효과를 적용
• 특정 CSS 속성: background-color, transform, opacity 등

.box {
    transition-property: background-color, transform; /* 배경색과 변환 속성에 적용 */
}

transition-duration

전환 효과가 완료되는 데 걸리는 시간을 설정합니다.

• 시간 단위: s (초), ms (밀리초) (예: 0.5s, 300ms)

.box {
    transition-duration: 0.5s; /* 전환 효과에 0.5초 설정 */
}

transition-delay

전환 효과가 시작되기 전에 지연되는 시간을 설정합니다.

• 시간 단위: s (초), ms (밀리초) (예: 0.5s, 300ms)

.box {
    transition-delay: 0.2s; /* 전환 효과 시작 전에 0.2초 지연 */
}

transition-timing-function

전환 효과의 속도를 조절하는 함수를 설정합니다. 이 속성은 전환이 시간에 따라 어떻게 진행되는지를 정의합니다.

• linear: 일정한 속도로 변화
• ease: 시작과 끝이 느리고 중간이 빠름 (기본값)
• ease-in: 시작이 느리고 끝이 빠름
• ease-out: 시작이 빠르고 끝이 느림
• ease-in-out: 시작과 끝이 느리고 중간이 빠름
• 사용자 정의: cubic-bezier(n,n,n,n) 형태로 커스터마이징 가능

.box {
    transition-timing-function: ease-in; /* 시작이 느리고 끝이 빠르게 전환 */
}

애니메이션

키 프레임 정의하기 (@keyframes)

@keyframes는 애니메이션의 단계별 상태를 정의하는 규칙입니다. 애니메이션 동안 특정 스타일이 어떻게 변할지 지정할 수 있습니다.

@keyframes animation-name {
  0% {
    /* 스타일 정의 */
  }
  50% {
    /* 스타일 정의 */
  }
  100% {
    /* 스타일 정의 */
  }
}

animation-name 속성

애니메이션에 사용할 @keyframes 규칙의 이름을 지정합니다.

값:

• none: 애니메이션을 적용하지 않음.
• animation-name: 정의한 애니메이션 이름.

.box {
  animation-name: slide;
}

animation-duration 속성

애니메이션이 실행되는 시간을 지정합니다.

• 시간 값 (s 또는 ms): 예를 들어 2s는 2초 동안 애니메이션을 실행.

.box {
  animation-duration: 2s;
}

animation-delay 속성

애니메이션이 시작되기 전에 대기할 시간을 설정합니다.

• 시간 값 (s, ms): 예를 들어 1s는 1초 대기 후 애니메이션 실행.
• 0s: 지연 없이 즉시 애니메이션 실행.

.box {
  animation-delay: 1s;
}

animation-fill-mode 속성

애니메이션이 실행 전 또는 후에 요소가 어떤 스타일을 유지할지 결정합니다.
보통 마지막에 애니메이션 마지막 키프레임을 유지하기 위해 forwards만 사용합니다.

• none: 애니메이션 실행 전/후의 상태를 유지하지 않음.
• forwards: 애니메이션이 끝난 후 마지막 키프레임 스타일 유지.
• backwards: 애니메이션이 시작되기 전에 첫 번째 키프레임 스타일 적용.
• both: 애니메이션 시작 전과 종료 후 모두 스타일 유지.

.box {
  animation-fill-mode: forwards;
}

animation-iteration-count 속성

애니메이션을 몇 번 반복할지 설정합니다.

• 숫자 값: 반복 횟수. 예를 들어 3은 3번 반복.
• infinite: 무한 반복.

.box {
  animation-iteration-count: infinite;
}

animation 속성으로 한 번에 지정하기

animation 속성을 사용하면 애니메이션 관련 여러 속성을 한 줄로 지정할 수 있습니다.

animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count> <animation-direction> <animation-fill-mode> <animation-play-state>;

.box {
  animation: slide 2s ease-in-out 1s infinite alternate forwards running;
}

변형 효과

transform 속성

transform 속성은 요소를 2D 또는 3D 공간에서 변형할 수 있도록 합니다. 변형의 종류로는 이동, 회전, 크기 조정, 기울이기 등이 있습니다.

• translate(x, y): 요소를 x, y 좌표로 이동.
• scale(x, y): 요소의 크기를 x축, y축에 따라 조정.
• rotate(angle): 요소를 주어진 각도만큼 회전.
• skew(x-angle, y-angle): 요소를 x축과 y축을 기준으로 기울임.
• matrix(a, b, c, d, e, f): 행렬을 사용한 복합 변형.

.box {
  transform: translate(50px, 100px) scale(1.5) rotate(45deg);
}

transform-origin 속성

transform-origin 속성은 변형이 시작되는 기준점을 지정합니다. 기본적으로 요소의 중심을 기준으로 변형이 이루어지지만, 이 속성을 사용하면 기준점을 변경할 수 있습니다.

• x-axis y-axis: x축과 y축의 기준점. 값으로는 left, right, center, top, bottom 또는 구체적인 픽셀이나 백분율 값을 사용할 수 있습니다.
• z-axis (3D 변형의 경우 선택적): z축에 대한 기준점.

.box {
  transform-origin: top left;
}

animation.css 라이브러리에서 애니메이션을 가져와서 사용해도 됩니다.