CSS 위치 속성
html 요소들이 기본적인 흐름에서 벗어나 좌표값에 의해 배치하고자 할 때 사용
position
-
relative - 요소를 상대적으로 배치
-
absolute - 요소를 절대적으로 배치
- 동일한 absolute 속성을 가진 요소들 중 나중에 작성된 태그가 위로 올라감
z-index를 사용하면 요소의 쌓임 순서를 지정 가능 (값이 클수록 위에 배치)
-
fixed - 요소를 절대적으로 배치하지만, 스크롤해도 위치가 고정되어 있음
-
sticky - 요소를 절대적으로 배치하지만, 지정한 좌표의 임계점에 이르면 fixed처럼 고정됨
-
static - 기본값
-
좌표값
- top, right, bottom, left 속성
float
블록 요소를 한 줄에 배치하고 싶을 때 사용
⇒ 최근에는 grid, flex 주로 사용하기 때문에 잘 쓰지 않음
- left: 요소를 왼쪽으로 띄움
- right: 요소를 오른쪽으로 띄움
- none: 기본값, float 속성을 적용하지 않음
overflow
요소의 크기를 초과하는 내용에 대해 어떻게 처리할지 지정하는 속성
- visible: 기본값, 내용이 요소 밖으로 나가도 모두 표시됨
- hidden: 요소의 크기를 초과하는 내용을 숨김
- scroll: 요소의 크기를 초과하는 내용에 대해 스크롤바를 표시
- auto: 내용이 넘칠 때만 스크롤바를 표시
overflow-x와 overflow-y를 사용하여 가로와 세로 방향을 개별적으로 제어할 수 있음
전환 속성
transition 속성
애니메이션을 부드럽게 전환하기 위해 사용되는 속성
- transition-property: 전환 효과의 대상이 되는 속성 지정
- 예: opacity, background-color, transform 등
- transition-duration: 전환 효과가 지속되는 시간 지정
- 초(s) 또는 밀리초(ms) 단위로 설정
- transition-delay: 전환 효과가 시작되기 전의 지연 시간 지정
- transition-timing-function: 전환 효과의 진행 속도 설정 (시간에 따른 애니메이션 속도 변화)
linear: 처음과 마지막까지 동일한 속도로 전환- ease: 처음에는 속도가 느리다가 점점 빨라지고 다시 느려지는 중간 단계가 있는 전환
ease-in: 처음에는 천천히 시작되고 완료될 때까지 점점 빨라지는 전환ease-out: 처음에는 빠르게 시작하고 끝날 때 점점 느려지는 전환ease-in-out: 처음과 끝에서는 속도가 느리고 중간에 속도가 빨라지는 전환
transition: 전환 효과를 한 번에 작성할 수 있음-
순서로 작성
-
코드 예시
.button { background-color: blue; transition: background-color 0.3s ease-in-out; } .button:hover { background-color: red; } -
이 예시에서 버튼에 마우스를 올리면 배경색이 0.3초 동안 파란색에서 빨간색으로 부드럽게 변화. "ease-in-out" 타이밍 함수를 사용해 자연스러운 전환 효과 생성
-
사용예) 투명도 조절
opacity 속성: 요소의 투명도 조절에 사용. transition과 함께 사용 시 다음과 같이 적용 가능:
.element {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.element:hover {
opacity: 0.5;
}이 예시에서 요소에 마우스를 올리면 opacity가 1에서 0.5로 0.3초 동안 부드럽게 변화함. opacity는 0(완전 투명)부터 1(완전 불투명) 사이의 값을 가질 수 있음.
애니메이션 - 키프레임
키프레임 - 애니메이션 진행 과정에서 특정 시점에 발생해야 하는 여러 작업을 정의하는 문법
키프레임을 사용하여 애니메이션의 시작, 중간, 끝 등 여러 단계에서 요소의 스타일 정의 가능. 이를 통해 복잡하고 세밀한 애니메이션 생성 가능. CSS의 @keyframes 규칙을 사용하여 구현함
@keyframes colorChange {
0% { background-color: red; }
50% { background-color: yellow; }
100% { background-color: blue; }
}
.animated-element {
animation: colorChange 4s infinite;
}이 예시에서 요소의 배경색이 4초 동안 빨간색에서 노란색을 거쳐 파란색으로 변하는 애니메이션 정의. 이 애니메이션 무한 반복됨
animation 속성
CSS animation 속성: 요소에 애니메이션 적용을 위한 단축 속성. 여러 하위 속성을 한 번에 설정 가능
필수 속성:
- animation-name: 적용할 @keyframes 애니메이션의 이름 지정
- animation-duration: 애니메이션 한 주기 완료 시간 지정
선택적 속성:
- animation-fill-mode: 애니메이션 실행 전후 요소 스타일 지정
- none: 애니메이션 실행 전후에 요소의 스타일을 변경하지 않음
forwards: 애니메이션이 끝난 후 마지막 키프레임의 스타일을 유지- backwards: 애니메이션 시작 전 첫 번째 키프레임의 스타일을 적용
- both: forwards와 backwards를 모두 적용
- animation-timing-function: 애니메이션 속도 곡선 정의 (예: ease, linear, ease-in, ease-out 등)
- animation-delay: 애니메이션 시작 전 대기 시간 설정
- animation-iteration-count: 애니메이션 반복 횟수 지정 (숫자 또는 infinite)
- animation-direction: 애니메이션 재생 방향 설정 (normal, reverse, alternate, alternate-reverse)
예시 코드 animation: colorChange 4s infinite;: 필수 속성인 animation-name, animation-duration과 선택적 속성인 animation-iteration-count를 한 번에 설정한 것
변형 - transform
- translate(x, y) → 요소를 x축과 y축으로 이동
- translateX(n) → 요소를 x축
- translateY(n) → 요소를 y축
- scale(x, y) → 요소의 크기를 x축과 y축으로 확대 또는 축소
- scaleX(n) → x축 확대
- scaleY(n) → y축 확대
- rotate(angle) → 요소를 지정된 각도만큼 회전
- 사용예:
transform: rotate(45deg);- 요소를 45도 회전 - 사용예:
transform: rotate(-90deg);- 요소를 반시계 방향으로 90도 회전
- 사용예:
- transform-origin → 변형의 원점 설정
- 기본값은 요소의 중심점 (50% 50%)
- 사용예:
transform-origin: top left;- 왼쪽 상단 모서리를 기준으로 변형 - 문이 달그락거리는 효과 줄 수 있음
- 코드 보기
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>문이 열리는 효과</title> <style> .wrap { width: 100px; height: 100px; border: 2px solid black; margin: 100px; perspective: 1000px; /* 3D 효과를 주기 위한 설정 */ } .box { width: 100px; height: 100px; background-color: black; transition: all 0.5s; /* 부드러운 트랜지션 효과 */ transform-origin: left top; /* 회전 축을 왼쪽 위로 설정 */ } .box:hover { transform: rotateY(-70deg); /* Y축을 기준으로 90도 회전 */ } </style> </head> <body> <div class="wrap"> <div class="box"></div> </div> </body> </html>
- 코드 보기
- skew(x-angle, y-angle) → 요소를 x축과 y축으로 기울임
flex: 1차원 속성
Flex: CSS의 레이아웃 모델 중 하나로, 컨테이너 내 요소들을 유연하게 배치 가능. 주요 특징과 속성:
- display: flex; - 컨테이너에 적용하여 Flex 컨테이너로 생성
- flex-direction - 주축의 방향 설정:
row(기본값) - 왼쪽에서 오른쪽으로 요소 배치column- 위에서 아래로 요소 배치row-reverse- 오른쪽에서 왼쪽으로 요소 배치column-reverse- 아래에서 위로 요소 배치
- flex-wrap - 요소들이 한 줄에 들어가지 않을 때 어떻게 처리할지 설정:
nowrap(기본값) - 요소들을 한 줄에 유지wrap- 요소들을 여러 줄로 나눔wrap-reverse- 요소들을 여러 줄로 나누되, 역순으로 배치
- justify-content - 주축을 따라 요소들 정렬 (예: flex-start, flex-end, center, space-between, space-around)
- align-items - 교차축을 따라 요소들 정렬 (예: flex-start, flex-end, center, stretch, baseline)
이러한 속성들 조합으로 다양한 레이아웃 쉽게 구현 가능
grid: 2차원 속성
Grid: CSS의 강력한 2차원 레이아웃 시스템으로, 행과 열을 기반으로 요소 배치 가능. 주요 특징과 속성:
- display: grid; - 컨테이너에 적용하여 Grid 컨테이너로 생성
- grid-template-columns -
열의 크기와 개수 정의- 예:
grid-template-columns: 100px 100px 100px;또는grid-template-columns: 1fr 1fr 1fr; repeat()함수 사용 가능:grid-template-columns: repeat(3, 1fr);- 1fr을 3번 반복
- 예:
- grid-template-rows -
행의 크기와 개수 정의- 예:
grid-template-rows: 50px 50px;또는grid-template-rows: 1fr 2fr; repeat()함수 사용 가능:grid-template-rows: repeat(2, 50px);- 50px를 2번 반복
- 예:
- grid-gap - 그리드 아이템 사이의 간격 설정
column-gap: 열 사이의 간격 설정row-gap: 행 사이의 간격 설정- 예시:
grid-gap: 10px 20px;(행 간격 10px, 열 간격 20px)
- grid-column - 아이템이 차지할 열 지정 (예:
grid-column: 1 / 3;)-
-1을 활용해서 한 열을 합칠 수도 있음
grid-column: 1 / -1; -
grid-column: 1 / 3; 는 1번 열에서 시작해서 3번 열 직전까지 차지함을 의미
-
grid-column: span 2; 는 현재 위치에서 시작해 2개의 열을 차지함을 의미
두 방식의 주요 차이점:
-
1 / 3 방식: 시작과 끝 위치를 명시적으로 지정
-
span 방식: 현재 위치에서 차지할 열의 수만 지정
span 방식은 아이템의 정확한 위치를 모르거나 유동적인 레이아웃에서 유용함
-
- grid-row - 아이템이 차지할 행 지정 (예:
grid-row: 1 / 3;) - justify-items - 그리드 아이템의 수평 정렬 (예: start, end, center, stretch)
- align-items - 그리드 아이템의 수직 정렬 (예: start, end, center, stretch)
Grid 레이아웃을 사용하면 복잡한 레이아웃도 쉽게 구현 가능하며, 반응형 디자인에도 유용함. fr 단위를 사용하면 가용 공간을 비율로 나눌 수 있어 유연한 레이아웃 구성이 가능함. repeat() 함수를 사용하면 반복되는 패턴을 쉽게 정의할 수 있어 코드를 간결하게 만들 수 있음.
- Grid 레이아웃의 예시 코드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grid 레이아웃 예시</title> <style> .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; padding: 10px; } .grid-item { background-color: #f1f1f1; border: 1px solid #ccc; padding: 20px; text-align: center; } </style> </head> <body> <div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> </div> </body> </html>
이 예시는 3열 그리드 레이아웃 생성. 각 열은 동일한 너비(1fr)를 가지며, 아이템 사이에는 10px의 간격 존재
- ✅
grid-template-areasgrid-template-areas: Grid 레이아웃에서 영역을 이름으로 정의하고 배치하는 속성. 직관적인 레이아웃 구성 가능-
문자열로 각 셀의 영역 이름 지정
-
빈 공간 '
.'은 그리드 레이아웃에서 특정 셀을 비워두고 싶을 때 사용 -
주로 레이아웃의 구조를 유지하면서 특정 영역을 비우거나, 요소들 사이에 간격을 두고 싶을 때 활용
-
사이드 여백뿐만 아니라 레이아웃 내 어느 위치에서도 사용 가능
예시:
grid-template-areas: "header header header" ". main ." "footer footer footer";이 예시에서 main 영역 양 옆의 '.'은 빈 공간을 나타내며, 실질적으로 사이드 여백 역할을 함
-
연속된 셀에 같은 이름 부여 시 해당 영역 확장
예시 코드:
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto auto; grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; }이 예시에서 header가 첫 번째 행 전체, sidebar가 두 번째 행의 첫 번째 열, main이 두 번째 행의 나머지 부분, footer가 마지막 행 전체를 차지하게 됨
-
💡 추가 학습 내용
빈 태그의 접근성 문제점과 해결 방법
- 빈 태그: HTML에서 내용 없이 사용되는 요소 (예: )
- 접근성 문제: 빈 태그는 스크린 리더에 의해 읽혀 불필요한 정보 전달 가능
- 해결책:
aria-hidden="true"속성 사용 aria-hidden="true"의 역할:- 스크린 리더가 해당 요소를 무시하도록 지시
- 순수히 장식 목적의 요소에 사용 시 효과적
예시 코드:
<div class="decorative-element" aria-hidden="true"></div>이 코드는 시각적 장식 요소를 나타내지만, 스크린 리더 사용자에게는 읽히지 않아 불필요한 정보 전달 방지함
