html 코드
css 코드
| 기능명 | 설명 | 적용 예시 | 목적/효과 |
|---|---|---|---|
background-color |
배경 색상 지정 | body { background-color: #1b1f23; } |
다크모드 배경 적용 |
color |
글자 색상 지정 | p { color: #eeeeee; } |
가독성 높은 텍스트 컬러 |
font-family |
글꼴 설정 | font-family: 'Pretendard', sans-serif; |
브랜딩에 맞는 글꼴 통일 |
border-radius |
테두리 둥글게 | section { border-radius: 12px; } |
부드럽고 현대적인 UI |
box-shadow |
그림자 효과 | img:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); } |
입체감, 시각적 집중 유도 |
transition |
애니메이션 효과 | transition: transform 0.3s ease; |
hover 시 부드러운 전환 |
transform: scale() |
요소 확대 | img:hover { transform: scale(1.03); } |
호버 시 강조 느낌 |
display: flex |
요소 중앙 정렬 | #lightbox { display: flex; align-items: center; justify-content: center; } |
라이트박스 중앙 표시 |
max-width, max-height |
크기 제한 | img { max-width: 100%; max-height: 65%; } |
반응형 이미지 제어 |
z-index |
겹치는 순서 조정 | #lightbox { z-index: 9999; } |
라이트박스를 최상단에 표시 |
position: fixed |
위치 고정 | #lightbox { position: fixed; } |
항상 화면 중앙에 고정 |
onclick 이벤트 |
클릭 시 함수 실행 | <img onclick="openLightbox(this)"> |
클릭 시 라이트박스 열기 |
JavaScript function |
기능 정의 | function openLightbox(img) { ... } |
클릭 시 이미지 확대 기능 |
.class:hover |
호버 스타일 지정 | img:hover { ... } |
마우스 올릴 때 스타일 변화 |
margin, padding |
여백 조정 | margin: 0 auto;, padding: 48px; |
요소 간 간격/내부 여백 제어 |
a:hover 스타일 |
링크 호버 효과 | a:hover { background-color: #3a3a3a; } |
인터랙션 반응 유도 |
display: block |
인라인 요소 블록화 | img { display: block; } |
여백 정리, 예측 가능한 배치 |
object-fit: contain |
이미지 비율 유지 | img { object-fit: contain; } |
라이트박스 내 비율 유지 |