📘5강 - CSS3 고급: 레이아웃, 스타일링, 애니메이션의 모든 것

웹프로그래밍 CSS3 고급 기능 완전 정리 📚

🎯 학습 목표

• CSS3로 HTML 태그의 출력 위치 조절하기
• CSS3로 리스트를 예쁘게 꾸미기
• CSS3로 표(table)를 예쁘게 꾸미기
• CSS3로 폼을 꾸미고 사용자 입력에 반응시키기
• CSS3로 애니메이션, 전환, 변환 효과 만들기

---

1. 배치(Layout) 🎨

📍 배치 기본 개념

CSS3로 HTML 태그가 출력되는 위치를 지정할 수 있습니다. HTML 태그는 웹 페이지에 작성된 순서와 달리 배치가 가능합니다.

배치 관련 CSS3 프로퍼티들:

• display
• position
• left, right, top, bottom
• float
• z-index
• visibility
• overflow

📦 블록 박스 vs 인라인 박스

특징

• 블록 박스: 새 라인에서 시작, 왼쪽에서 오른쪽 끝까지 통째로 점유
• 인라인 박스: 블록 안에 배치, 옆에 다른 태그 배치 가능

display 프로퍼티로 박스 유형 변경

/* span을 블록 박스로 변경 */
span {
    display: block;
    width: 100px;
    height: 60px;
}

/* div를 인라인 박스로 변경 */
div {
    display: inline;
}

/* 인라인-블록 (라인 안에 배치되지만 크기 조절 가능) */
div {
    display: inline-block;
    width: 60px;
    height: 80px;
    margin: 10px;
}

/* 요소 숨기기 */
div {
    display: none;
}

🎯 position을 이용한 배치 방법

1. 상대 배치 (position: relative)

#element {
    position: relative;
    left: 20px;
    top: 20px;
}

• normal flow의 기본 위치에서 지정된 값만큼 이동

2. 절대 배치 (position: absolute)

#element {
    position: absolute;
    left: 50px;
    top: 30px;
}

• 브라우저 화면 기준으로 절대 위치에 배치

3. 고정 배치 (position: fixed)

#fixed {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

• 브라우저 화면에 고정되어 스크롤해도 위치 변경 안됨

4. 유동 배치 (float)

#float {
    float: right;
    width: 8em;
}

• 요소를 왼쪽 또는 오른쪽으로 띄워서 배치

🔢 z-index로 레이어 순서 조절

#card1 { z-index: -3; }
#card2 { z-index: 2; }
#card3 { z-index: 7; }

• 숫자가 클수록 위에 표시됨

👁️ visibility와 overflow

/* 요소 숨기기 (공간은 유지) */
.hidden {
    visibility: hidden;
}

/* 넘치는 내용 처리 */
.scroll-box {
    overflow: scroll;
    width: 15em;
    height: 3em;
}

---

2. 리스트 꾸미기 📝

🎨 리스트 스타일링 기본

ul {
    background: goldenrod;
    padding: 10px 10px 10px 50px;
}

ul li {
    background: greenyellow;
    margin-bottom: 5px;
}

🔘 마커(Marker) 스타일링

마커 종류 변경

ul { list-style-type: circle; }      /* 원형 */
ul { list-style-type: square; }      /* 사각형 */
ul { list-style-type: decimal; }     /* 숫자 */
ul { list-style-type: upper-roman; } /* 대문자 로마숫자 */
ul { list-style-type: none; }        /* 마커 제거 */

마커 위치 조절

ul {
    list-style-position: inside;  /* 마커를 아이템 영역 안쪽에 */
    list-style-position: outside; /* 마커를 아이템 영역 바깥쪽에 */
}

이미지 마커

ul {
    list-style-image: url("media/marker.png");
}

🍕 리스트로 메뉴 만들기

#menubar ul {
    margin: 0;
    padding: 0;
    width: 567px;
}

#menubar ul li {
    display: inline;           /* 한 줄로 배치 */
    list-style-type: none;     /* 마커 제거 */
    padding: 0px 15px;
}

#menubar ul li a {
    color: white;
    text-decoration: none;     /* 링크 밑줄 제거 */
}

#menubar ul li a:hover {
    color: violet;             /* 마우스 호버 시 색상 변경 */
}

---

3. 표(Table) 꾸미기 📊

🖼️ 기본 표 스타일링

/* 표 테두리 */
table {
    border: 1px solid blue;
    border-collapse: collapse;  /* 중복 테두리 합치기 */
}

td, th {
    border: 1px dotted green;
    padding: 10px;
    text-align: right;
}

📏 셀 크기 제어

th {
    height: 40px;
    width: 100px;
}

td {
    height: 20px;
    width: 100px;
}

🎨 배경색과 효과

/* 헤더 스타일 */
thead {
    background: darkgray;
    color: yellow;
}

/* 짝수 행 줄무늬 */
tbody tr:nth-child(even) {
    background: aliceblue;
}

/* 마우스 호버 효과 */
tbody tr:hover {
    background: pink;
}

---

4. 폼(Form) 꾸미기 📝

✨ 입력 필드 스타일링

/* 텍스트 입력 필드 */
input[type=text] {
    color: red;
    border: 2px solid skyblue;
    border-radius: 5px;
}

/* 마우스 호버 효과 */
input:hover, textarea:hover {
    background: aliceblue;
}

/* 포커스 효과 */
input[type=text]:focus {
    font-size: 120%;
}

🏷️ 라벨 스타일링

label {
    display: block;
    padding: 10px;
}

label span {
    float: left;
    width: 90px;
    text-align: right;
    padding: 10px;
}

---

5. 동적 효과 (Animation, Transition, Transform) ⚡

🎬 애니메이션 (Animation)

기본 구조

/* 애니메이션 정의 */
@keyframes textColorAnimation {
    0% { color: blue; }      /* 시작 (from으로도 가능) */
    30% { color: green; }
    100% { color: red; }     /* 끝 (to로도 가능) */
}

/* 애니메이션 적용 */
span {
    animation-name: textColorAnimation;
    animation-duration: 5s;
    animation-iteration-count: infinite;  /* 무한 반복 */
}

크기 변화 애니메이션 예시

@keyframes bomb {
    from { font-size: 500%; }
    to { font-size: 100%; }
}

h3 {
    animation-name: bomb;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

🔄 전환 (Transition)

span {
    transition: font-size 5s;  /* 전환할 프로퍼티와 시간 */
}

span:hover {
    font-size: 500%;           /* 마우스 호버 시 변화 */
}

🔧 변환 (Transform)

다양한 변환 함수들

/* 회전 */
.rotate {
    transform: rotate(20deg);
}

/* 기울임 */
.skew {
    transform: skew(0deg, -20deg);
}

/* 이동 */
.translate {
    transform: translateY(100px);
    /* transform: translate(50px, 100px); X, Y 모두 이동 */
}

/* 확대/축소 */
.scale {
    transform: scale(3, 1);  /* X축 3배, Y축 1배 */
}

마우스 상호작용과 함께 사용

div#rotate:hover {
    transform: rotate(80deg);
}

div#scale:active {
    transform: scale(1, 5);
}

---

💡 실무 팁

🚀 성능 최적화

• transform은 GPU 가속을 사용하므로 애니메이션에 효율적
• transition은 사용자 상호작용에 자연스러운 효과 제공
• animation은 복잡한 키프레임 애니메이션에 적합

🎯 반응형 디자인 고려사항

• em, rem, % 단위 활용으로 유연한 레이아웃 구성
• 미디어 쿼리와 함께 사용하여 다양한 화면 크기 대응

🔧 브라우저 호환성

• 벤더 프리픽스(-webkit-, -moz-, -ms-) 필요시 추가
• 구형 브라우저를 위한 폴백(fallback) 스타일 제공

---

📚 마무리

CSS3의 고급 기능들을 활용하면 정적인 웹 페이지를 동적이고 매력적인 사용자 경험으로 변화시킬 수 있습니다. 특히 애니메이션, 전환, 변환 효과는 JavaScript 없이도 풍부한 인터랙션을 구현할 수 있게 해줍니다.

핵심 포인트:

• 배치는 사용자의 시선 흐름을 고려하여 설계
• 리스트와 표는 정보의 가독성을 높이는 방향으로 스타일링
• 폼은 사용자 경험(UX)을 고려한 직관적인 디자인
• 동적 효과는 과하지 않게, 목적에 맞게 사용

다음 단계로는 JavaScript와의 연동, 반응형 웹 디자인, CSS 프레임워크 활용 등을 학습해보시기 바랍니다! 🎉