CSS 메뉴·리스트·animation 완전 정리

 

 

Web Development · CSS

CSS 메뉴 · 리스트 · animation

수직 메뉴, 커스텀 순서 리스트, slideLeft animation을 정리합니다.

시작 오늘 분석할 코드

이 폴더는 CSS 선택자, 스타일 속성, 리스트 메뉴와 애니메이션을 나누어 연습합니다. 선택자가 어떤 요소를 가리키는지, 속성이 어떤 시각 효과를 만드는지, 상태 선택자와 구조 태그가 어떻게 연결되는지 확인합니다.

#menubar { display:inline-block; background:olive; } #menubar ul { margin:0; padding:0; } #menubar ul li { list-style-type:none; padding:0 15px; } @keyframes slideLeft { 0% { margin-left:100%; } 100% { margin-left:0%; } }

nav메뉴 영역을 나타내는 구조 태그입니다.

list-style목록 마커 모양을 정합니다.

padding항목 안쪽 여백입니다.

position요소 배치 기준을 정합니다.

@keyframes시간별 스타일 변화를 정의합니다.

animationkeyframes를 요소에 적용합니다.

---

1 수직 메뉴 구조

수직 메뉴 예제는 nav 안에 ul/li/a를 넣고, ul의 기본 여백과 li 마커를 제거해 메뉴처럼 만듭니다.

요소	역할	스타일
nav#menubar	메뉴 컨테이너	inline-block, olive 배경
ul	메뉴 목록	margin/padding 0
li	메뉴 항목	마커 제거, 좌우 padding
a	클릭 링크	white, underline 제거

---

2 메뉴 hover

메뉴 링크에 마우스를 올리면 violet 색으로 바뀝니다. hover는 메뉴가 클릭 가능한 요소라는 피드백을 줍니다.

a

→

white

→

a:hover violet

---

3 카푸치노 순서 리스트

카푸치노 예제는 ol의 기본 마커를 제거하고, span으로 숫자 마커를 직접 표현합니다. li 안의 p는 왼쪽 padding으로 숫자와 겹치지 않게 밀어냅니다.

선택자	역할	효과
ol	목록 기본 설정	마커 제거, padding
ol li	항목 디자인	굵은 이탤릭 큰 글자
ol li span	숫자 마커	absolute, olivedrab
ol li p	설명 텍스트	padding-left 50px

---

 

반응형

 

4 position absolute

span 숫자를 absolute로 배치하면 텍스트 흐름과 독립적으로 숫자 위치를 조절할 수 있습니다. 대신 p에 padding-left를 주어 내용이 숫자와 겹치지 않게 합니다.

absolute는 강력하지만 기준 위치와 겹침을 함께 확인해야 합니다. 작은 예제에서는 숫자 마커 위치 조절 용도로 이해하면 됩니다.

---

5 animation 응용

animation 응용 예제는 p가 오른쪽 밖에서 왼쪽으로 들어오도록 margin-left를 100%에서 0%로 바꿉니다.

지점	margin-left	의미
0%	100%	오른쪽 밖에서 시작
100%	0%	원래 위치에 도착
duration	3s	3초 동안 진행
name	slideLeft	keyframes 연결

---

6 리스트 메뉴와 애니메이션 비교

메뉴와 리스트는 구조를 다듬는 CSS이고, animation은 시간에 따른 변화를 만드는 CSS입니다. 둘 다 선택자와 속성 연결이 핵심입니다.

menu/list

정적인 구조와 hover 상태를 다듬습니다.

animation

시간에 따라 위치나 모양을 바꿉니다.

---

7 자주 하는 실수

실수	증상	해결
ul 기본 padding 제거 안 함	메뉴가 밀려 보입니다.	margin과 padding을 0으로 둡니다.
list-style 제거 안 함	마커가 남습니다.	list-style-type:none
a 밑줄 제거 누락	메뉴가 링크처럼 보입니다.	text-decoration:none
absolute 겹침	숫자와 문장이 겹칩니다.	p에 padding-left를 줍니다.
animation-name 불일치	애니메이션이 안 됩니다.	keyframes 이름과 맞춥니다.

---

8 복습 체크리스트

체크	통과 기준
nav	메뉴 컨테이너 역할을 설명합니다.
ul reset	기본 여백과 마커를 제거합니다.
a hover	링크 hover 피드백을 만듭니다.
custom marker	span으로 숫자 마커를 표현합니다.
keyframes	margin-left 변화로 슬라이드를 만듭니다.
duration	애니메이션 시간을 조절합니다.

---

9 추가 테스트

테스트	확인 내용
메뉴 항목 추가	새 li에도 같은 스타일이 적용되는지 봅니다.
배경색 변경	nav 배경과 링크 색 대비를 확인합니다.
마커 색 변경	span 숫자 색이 바뀌는지 확인합니다.
slide 시간 변경	3s를 1s로 바꿔 속도 차이를 봅니다.
시작 위치 변경	margin-left 50%와 100% 차이를 확인합니다.

---

11 메뉴 개선 연습

수직 메뉴는 구조가 단순해서 가로 메뉴, 드롭다운, 현재 메뉴 강조 같은 형태로 확장하기 쉽습니다. 먼저 ul/li/a의 기본 여백과 링크 스타일을 안정적으로 잡는 것이 중요합니다.

A

가로 메뉴 만들기li에 display:inline-block을 적용해 항목을 가로로 배치합니다.

B

현재 메뉴 강조active class를 추가해 현재 페이지 항목 색을 다르게 합니다.

C

클릭 영역 확대a에 display:block과 padding을 줘서 메뉴 전체가 눌리게 합니다.

D

hover 배경글자색뿐 아니라 배경색도 바꿔 피드백을 강화합니다.

개선	효과	힌트
display:block	링크 클릭 영역 확대	#menubar a
active class	현재 메뉴 표시	.active
border-bottom	메뉴 구분선	li 스타일
transition	hover 변화 부드럽게	color .2s
focus 스타일	키보드 접근성	a:focus

---

12 animation 확장

slideLeft는 margin-left만 바꾸는 간단한 예제입니다. 같은 원리로 opacity나 transform을 함께 조절하면 더 자연스러운 등장 효과를 만들 수 있습니다.

속성	시작	끝	효과
margin-left	100%	0%	오른쪽에서 이동
opacity	0	1	서서히 나타남
transform	translateX(100%)	translateX(0)	위치 이동
animation-duration	1s	3s	속도 조절
animation-fill-mode	none	forwards	끝 상태 유지

margin-left 애니메이션은 레이아웃에 영향을 줄 수 있습니다. 실제 UI에서는 transform: translateX를 쓰는 방식도 자주 선택합니다.

---

13 추가 점검

점검	통과 기준
메뉴 구조	nav 안에 ul, li, a가 계층적으로 들어 있습니다.
기본 여백 제거	ul의 margin과 padding이 0입니다.
마커 제거	li의 list-style-type이 none입니다.
숫자 마커	카푸치노 순서의 span 숫자가 보입니다.
슬라이드	p가 오른쪽에서 왼쪽으로 들어옵니다.

---

14 구조별 CSS 역할

메뉴, 순서 리스트, 애니메이션 문장은 모두 HTML 구조가 먼저 있고 CSS가 그 구조의 표시 방식을 바꿉니다.

구조	주요 선택자	CSS 역할
수직 메뉴	#menubar ul li a	링크를 메뉴 항목처럼 표시합니다.
카푸치노 순서	ol li span	숫자 마커를 직접 배치합니다.
카푸치노 설명	ol li p	설명 텍스트를 숫자 오른쪽으로 밀어냅니다.
슬라이드 문장	p	animation을 적용해 이동시킵니다.
keyframes	@keyframes slideLeft	시작과 끝 위치를 정의합니다.

1

HTML 계층 확인nav, ul, li, a의 부모 자식 관계를 확인합니다.

2

기본 스타일 제거목록 마커와 여백을 제거합니다.

3

상태 스타일 추가hover와 focus 상태를 지정합니다.

4

움직임 적용keyframes와 animation-name을 연결합니다.

---

15 최종 테스트

테스트	통과 기준
메뉴 링크	밑줄 없이 흰색으로 보입니다.
메뉴 hover	마우스를 올리면 violet으로 바뀝니다.
목록 숫자	커스텀 숫자 마커가 왼쪽에 보입니다.
설명 들여쓰기	p 텍스트가 숫자와 겹치지 않습니다.
슬라이드 시작	문장이 오른쪽에서 시작합니다.
슬라이드 종료	3초 후 원래 위치에 도착합니다.
메뉴 컨테이너	inline-block으로 메뉴 너비가 콘텐츠에 맞게 잡힙니다.
링크 영역	a에 padding을 주면 클릭 가능한 범위가 넓어집니다.
마커 제거	기본 목록 점이 보이지 않습니다.
커스텀 마커	span 숫자가 순서 표시 역할을 합니다.
애니메이션 이름	animation-name과 @keyframes 이름이 같습니다.
애니메이션 시간	duration 변경에 따라 이동 속도가 달라집니다.
끝 상태	필요하면 animation-fill-mode로 도착 상태를 유지합니다.
접근성	메뉴 링크에는 hover뿐 아니라 focus 스타일도 고려합니다.
성능	실무에서는 margin-left 대신 transform 이동도 검토합니다.
구조	nav, ul, li, a 계층이 깨지지 않았는지 확인합니다.
확장	active class로 현재 메뉴를 표시할 수 있습니다.
반응형	작은 화면에서는 메뉴 항목 간격과 줄바꿈을 확인합니다.
테스트	새 메뉴 항목을 추가해도 같은 스타일이 적용됩니다.
문장 흐름	슬라이드되는 p 안의 이미지와 텍스트가 함께 이동합니다.
재사용	메뉴 색상과 animation 값은 class로 분리할 수 있습니다.
마무리	구조 CSS와 움직임 CSS를 구분해서 관리합니다.
슬라이드 방향	margin-left 값을 바꾸면 시작 위치가 달라집니다.
메뉴 대비	배경색과 링크 글자색의 대비를 확인합니다.

---

핵심 한 줄 요약

menuul/li/a 기본 스타일을 정리하면 수직 메뉴가 됩니다.

list기본 마커를 없애고 span으로 직접 번호를 만들 수 있습니다.

animationmargin-left를 100%에서 0%로 바꾸면 오른쪽에서 들어오는 효과가 납니다.

Tags

#CSS#menu#list#nav#animation#keyframes#hover#position#HTML#티스토리

▼ 티스토리 태그 입력란 복사용

CSS, menu, list, nav, animation, keyframes, hover, position, HTML, 티스토리