프론트엔드 강의를 들으며 처음 보거나 정확히 알지 못했던 CSS 개념들을 하나씩 정리해 보았습니다.
transition
button {
transition: all 250ms ease-in;
}- transition은 CSS 속성의 값이 바뀔 때 애니메이션 효과 ✨ 를 줄 수 있는 속성입니다.
- all → 모든 CSS 속성에 대해 트랜지션을 적용하겠다는 의미입니다.
- 250ms → 0.25초 동안 애니메이션이 진행됩니다.
- ease-in → 애니메이션이 천천히 시작되고 빠르게 끝나는 곡선입니다.
💡 언제 쓰나요?
- 버튼에 마우스를 올릴 때 색상이나 크기 변화가 부드럽게 보이도록 만들고 싶을 때 사용합니다.
white-space: nowrap
.tab-title {
white-space: nowrap;
}- 텍스트가 줄바꿈되지 않도록 만들어주는 속성입니다.
- 기본적으로 텍스트는 요소 너비를 벗어나면 자동 줄바꿈이 되는데,
nowrap은 이 줄바꿈을 강제로 막고 한 줄로 유지시켜줍니다.
💡 언제 쓰나요?
- 탭, 버튼, 제목 영역 등에서 텍스트가 잘리지 않게 하고 싶을 때 사용합니다.
z-index
- HTML 요소의 쌓이는 순서(레이어 순서)를 지정할 수 있는 속성입니다.
- 숫자가 클수록 화면 위쪽(앞쪽)에 배치됩니다.
- 단, z-index는 반드시 position이 설정된 요소에만 효과가 적용됩니다.
(relative, absolute, fixed, sticky 중 하나여야 함)
💡 언제 쓰나요?
- 모달, 드롭다운 메뉴, 툴팁 같은 요소를 다른 요소 위에 띄우고 싶을 때 사용합니다.
📌 position: relative & position: absolute
- 요소의 위치를 조정할 수 있도록 해주는 속성입니다.
position: relative
- 원래 자리에 머무르면서, 기준 좌표로부터 이동할 수 있게 만듭니다.
- 동시에, 자식 요소 중 absolute가 있다면 그 자식의 기준점이 됩니다.
position: absolute
- 기준점이 되는 조상 요소를 기준으로 정확한 위치에 배치됩니다.
- 만약 상위 요소들 중 position이 지정된 요소가 없다면, body를 기준으로 위치가 잡힙니다.
예시
.container {
position: relative;
}
.tooltip {
position: absolute;
top: 10px;
left: 20px;
}- 이 경우 .tooltip은 .container를 기준으로 위치합니다.
::after
.project__title::after {
content: '';
display: block;
width: 100%;
height: 2px;
background-color: #333;
}- ::after는 가상 요소로, 실제 HTML에 없는 콘텐츠를 CSS로 추가할 수 있게 해줍니다.
- 요소의 맨 뒤쪽에 콘텐츠를 삽입하는 용도로 사용합니다.
- 반드시 content 속성이 있어야 보입니다.
💡 언제 쓰나요?
밑줄 효과, 강조선, 아이콘 삽입 등 스타일링용 장식에 자주 쓰입니다.
요약
| 개념 | 의미 및 역할 |
| transition | CSS 속성 변화에 애니메이션 효과 부여 |
| white-space: nowrap | 줄바꿈 없이 텍스트를 한 줄로 유지 |
| z-index | 요소의 쌓임 순서를 제어 (앞/뒤 순서) |
| position: relative | 자신의 위치 기준으로 이동, 자식 absolute 기준점 |
| position: absolute | 가까운 position 설정 조상을 기준으로 위치 |
| ::after | 요소 뒤에 가상의 콘텐츠 삽입, 꾸미기용 |