CSS

---

1) 배경(Background)

• background-color : 배경색
• background-image : 이미지 배경(url(...))
• background-repeat : repeat | no-repeat | repeat-x | repeat-y
• background-position : left/top/center 또는 x y 좌표
• background-size : auto | cover | contain | <length> <length>
• background-attachment : scroll | fixed | local
• Shorthand : background: color image position/size repeat attachment;

.hero {
  background: #0a0 url('/img/sky.png') center/cover no-repeat fixed;
}

---

2) 테두리(Border)

• border-width | style | color : 예) 1px solid #333
• border-top/right/bottom/left : 방향별 개별 제어
• border-radius : 둥근 모서리(단일/각 코너별/슬래시로 타원)
• outline : 레이아웃에 영향 없는 외곽선(포커스 표시에 유용)

.card {
  border: 1px solid #ddd;
  border-radius: 12px;
}

---

3) 레이아웃(Layout)

(1) 전통 레이아웃 기초

• Box Model : margin–border–padding–content
• float/clear : 좌우로 띄워 흐름을 만들고, 필요 시 clear로 해제

.thumb { float: left; margin-right: 12px; }
.meta { overflow: hidden; } /* clearfix 대용 */

(2) Flexbox 핵심

• 컨테이너: display: flex
• 축 제어: flex-direction, 줄바꿈: flex-wrap
• 정렬: justify-content(주축), align-items(교차축)
• 아이템: flex(=grow shrink basis), order, align-self

.list { display:flex; gap:12px; justify-content:space-between; align-items:center; }
.item { flex: 1 1 240px; }

---

4) 변형(Transforms) & 전환(Transitions)

• transition : 속성의 변화 과정을 시간에 따라 부드럽게

  • transition-property | duration | timing-function | delay
  • timing-function: linear | ease | ease-in | ease-out | ...

• transform : 요소를 이동/회전/확대/기울이기

  • translate(X|Y|x y), scale(X|Y), rotate(deg), skew
  • 3D: rotateX/Y/Z, translateZ, 원근감 perspective
    

.box {
  transition: transform 300ms ease, background-color .2s;
}
.box:hover {
  transform: translateY(-6px) scale(1.02) rotate(2deg);
}

---

5) 애니메이션(Animations)

• 핵심 속성:
  animation-name, animation-duration, animation-iteration-count(숫자|infinite),
  animation-direction(normal|reverse|alternate|alternate-reverse),
  animation-timing-function(linear|ease|ease-in|ease-out|ease-in-out)
  
• 규칙: @keyframes 로 중간 상태를 정의하여 이름으로 연결

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.badge {
  animation: spin 2s linear infinite;
}

실습 예시에서는 alternate/alternate-reverse 방향, 다단계 키프레임(0%/30%/50%/100%), transform(rotate/translate/scale) 조합까지 시연합니다.

---

6) HTML5 시멘틱 태그(레이아웃 구성에 유용)

• 의미 있는 영역 태그로 문서 구조와 접근성을 향상

  • header : 머리말(로고/검색/메뉴)
  • nav : 내·외부 링크 묶음(네비게이션)
  • section : 주제별 컨텐츠 블록(화면 전환 단위/그룹)
  • article : 독립적 글/게시물(섹션 내부 포함 가능)
  • aside : 보조 영역(광고/링크 모음)
  • footer : 저작권·연락처 등 하단 정보
    

<header>...</header>
<nav>...</nav>
<section>
  <article>글1</article>
  <article>글2</article>
</section>
<aside>배너</aside>
<footer>© 2025 BlueShell</footer>

---

빠른 체크리스트

• 배경: background: ... center/cover no-repeat
• 카드: border:1px solid #ddd; border-radius:12px
• 리스트 정렬: display:flex; justify-content:space-between
• 인터랙션: transition: transform .3s ease
• 반복 모션: @keyframes + animation: name 2s linear infinite
• 문서 구조: header/nav/section/article/aside/footer

---