코딩자율학습단 19기 | 8일차 학습일지 – position/float 배치 + animation/transform 효과 + 웹/아이콘 폰트

오늘 학습 정보

• 날짜/Day: 2026/01/21 (Day8)
• 교재 범위: ~6.9 웹 폰트와 아이콘 폰트 사용하기 (p.223~276)

• 출처: 코딩 자율학습단 카카오톡 채널 메시지 캡처

오늘의 핵심 키워드 3개

• 핵심 키워드 1: position / float / clear (요소 배치)
• 핵심 키워드 2: transition / animation / transform (효과)
• 핵심 키워드 3: Google Fonts / Font Awesome (웹 폰트, 아이콘 폰트)

개념 정리

2-1) 위치(배치) 속성: position / top·right·bottom·left

역할: 문서의 기본 흐름에서 요소를 원하는 위치에 배치

핵심 포인트:

• position 값에 따라 기준점과 동작이 달라지고, 위치 이동은 top/right/bottom/left로 제어

기본 형식:

• position: <값>; + top | right | bottom | left: <길이>;

짧은 예시(코드):

• .box{ position: relative; top: 20px; left: 10px; }

position 값 정리

역할: 배치 방식 선택

핵심 포인트:

• static : 기본 흐름(기본값)
• relative : 원래 위치 기준 이동(원래 자리 유지)
• absolute : 기준 요소(부모 등) 기준 배치(기본 흐름에서 제외)
• fixed : 브라우저 화면(뷰포트) 기준 고정
• sticky : 스크롤 조건에 따라 달라지는 “달라붙는” 배치

기본 형식:

• position: static | relative | absolute | fixed | sticky;

짧은 예시(코드):

• .popup{ position: fixed; right: 20px; bottom: 20px; }

2-2) float / clear: 흐름 제어 배치

역할: 요소를 좌/우로 띄워 배치하고 다음 요소의 흐름을 제어

핵심 포인트:

• float 적용 시 뒤 요소가 감싸며 배치될 수 있어, 필요하면 clear로 정리

기본 형식:

• float: none | left | right;
• clear: left | right | both;

짧은 예시(코드):

• .img{ float: left; margin-right: 10px; }
• .footer{ clear: both; }

2-3) 전환(transition) 효과 속성

역할: 속성 값 변경 시 “부드러운 변화” 적용

핵심 포인트:

• 대상 속성/진행 시간/지연 시간/속도 곡선을 개별 또는 단축으로 지정

기본 형식:

• transition-property / transition-duration / transition-delay / transition-timing-function: <속성 값>
• transition: <property>, <duration>, <timing-function>, <delay>

짧은 예시(코드):

• .box{ transition: width, 0.5s, ease, 0.2s; }

2-4) 애니메이션(animation) 속성: 키프레임 기반 변화

역할: @keyframes로 정의한 스타일 변화를 시간 흐름에 따라 실행

핵심 포인트:

• 지속/지연/반복/방향/종료 후 상태/재생 상태 등을 속성으로 제어

기본 형식:

• @keyframes
• animation-name, animation-duration, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, animation-timing-function: < 속성값>
• animation (단축)

2-4-1) animation-delay (지연)

역할: 애니메이션 시작을 늦춤

핵심 포인트:

• s, ms 단위 사용

기본 형식:

• animation-delay: <시간>;

짧은 예시(코드):

• .box{ animation-delay: 3s; }

2-4-2) animation-fill-mode (실행 전/후 상태 유지)

역할: 애니메이션 전/후에 어떤 상태를 유지할지 결정

핵심 포인트:

• none / forwards / backwards / both

기본 형식:

• animation-fill-mode: <값>;

짧은 예시(코드):

• div{ animation-name: bgchange; animation-duration: 5s; animation-fill-mode: forwards; }

2-4-3) animation-iteration-count (반복 횟수)

역할: 반복 횟수 지정

핵심 포인트:

• 숫자 또는 infinite

기본 형식:

• animation-iteration-count: <횟수 | infinite>;

짧은 예시(코드):

• .box{ animation-iteration-count: 3; }
• .banner{ animation-iteration-count: infinite; }

2-4-4) animation-play-state (재생/일시정지)

역할: 애니메이션 진행 상태 제어

핵심 포인트:

• paused로 멈춘 상태에서 시작하고, 필요 시 running으로 전환(예시에선 JS로 제어)

기본 형식:

• animation-play-state: paused | running;

짧은 예시(코드):

.box{
   animation-name: move;
   animation-duration: 10s;
   animation-fill-mode: forwards;
   animation-play-state: paused;
}
<button id="start">start</button>
<button id="paused">paused</button>
<script>
   const box = document.querySelector(".box");
   document.getElementById("start").addEventListener("click", function() => {
      box.style.animationPlayState = "running";
   });
   document.getElementById("paused").addEventListener("click", function() => {
      box.style.animationPlayState = "paused";
   });
</script>

2-4-5) animation-direction (진행 방향)

역할: 애니메이션 진행 방향 지정

핵심 포인트:

• normal / reverse / alternate / alternate-reverse

기본 형식:

• animation-direction: <값>;

짧은 예시(코드):

• .box{ animation-direction: reverse; }

2-4-6) animation 단축 속성

역할: 여러 애니메이션 속성을 한 줄로 지정

핵심 포인트:

• 필요한 값만 골라 작성 가능

기본 형식:

• animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill- mode> ;

짧은 예시(코드):

• .box{ animation:bgchange, 5s, 3, ease-in; }

2-5) 변형(transform) 효과 + 기준점(transform-origin)

역할: 요소 자체를 이동/확대·축소/기울임/회전시키는 변형 적용

핵심 포인트:

• transform은 함수로 효과를 지정하고, 기준점을 바꾸려면 transform-origin 사용

기본 형식:

• transform: <함수>;
• transform-origin: <x축 위치> <y축 위치>;

짧은 예시(코드):

• div:hover{ transform: translate(100px, 200px); }

transform 함수

역할: 변형 효과 선택

핵심 포인트:

• 이동: translate(x,y), translateX(n), translateY(n)
• 확대/축소: scale(x,y), scaleX(n), scaleY(n)
• 기울이기: skew(xdeg,ydeg), skewX(deg), skewY(deg)
• 회전: rotate(deg)

기본 형식:

• transform: 함수(값);

짧은 예시(코드):

• .box:hover{ transform: rotate(30deg); }

transform-origin (변형 기준점)

역할: 변형(특히 회전)의 기준점을 변경

핵심 포인트:

• x축(left/center/right), y축(top/center/bottom) 키워드 또는 % 단위 사용

기본 형식:

• transform-origin: <x> <y>;

짧은 예시(코드):

• .box:hover{ transform: rotate(30deg); transform-origin: top left; }

2-6) 웹 폰트(Google Fonts) 적용: @import 방식

역할: 시스템에 없는 글꼴도 웹에서 불러와 동일하게 표시

핵심 포인트:

• 폰트 선택 후 @import를 CSS 최상단에 추가, font-family로 적용

기본 형식:

• @import url(‘…’); + font-family: “폰트명”, sans-serif;

짧은 예시(코드):

@import url('https://fonts.googleapis.com/
css2?family=Poppins:wght@400;700&family=Varela+Round&display=swap');
.poppins{
   font-family: "Poppins", sans-serif;
}
.varela{
   font-family: "Varela Round", sans-serif;
}

2-7) 아이콘 폰트(Font Awesome) 적용: CDN + i 태그

역할: 아이콘을 폰트처럼 사용(크기/색상 등 CSS로 제어 가능)

핵심 포인트:

• CDN 링크를 head에 추가하고 로 아이콘 삽입

기본 형식:

• <link rel=“stylesheet”href=“…”> + <iclass=“…”></i>

짧은 예시(코드)

<head>
   <linkrel='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css'>
</head>

<body>
   <iclass="fa-brands fa-facebook"></i>
</body>
<style>
   i{
      font-size: 30px;color: #4267B2;
   }
</style>

2-8) list-style(리스트 스타일) 메모

• 역할 → 목록(ul/ol)의 기본 점/숫자 스타일 제어
• 핵심 포인트
  • 기본 목록 표시 제거는 none 사용
• 기본 형식
  • list-style: <값>;
• 짧은 예시(코드)
  • li{list-style: none; }

이슈 로그

• position: absolute는 “부모 기준”이라고만 외우면 오해가 생길 수 있어서, 기준이 되는 요소 조건을 예제 흐름으로 다시 확인해야겠다고 느꼈습니다.
• animation 단축 속성은 값 순서가 헷갈려서, 당분간은 개별 속성으로 안정화한 뒤 단축으로 정리하는 방식이 더 안전했습니다.

학습단 도서

• 「코딩 자율학습 HTML + CSS + 자바스크립트」