제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part2 - [중급편]

더 강력해진 CSS 기술로, 웹사이트 품질을 한 단계 끌어올리세요!

“제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part2”는 CSS의 심화 개념들을 체계적으로 정복할 수 있도록 구성된 강의입니다.
Position(Static, Relative, Absolute, Fixed, Sticky)부터 Transition, Transform, Animation, Flexbox, Grid, 그리고 반응형 웹(Responsive Design)까지, 현업 웹 디자이너 & 퍼블리셔가 꼭 알아야 할 기능들을 총망라했습니다.

이 강의가 특별한 이유

1. 탄탄한 커리큘럼

   • CSS 핵심 원리(포지션, 애니메이션, 반응형 등)를 기초부터 응용 단계까지 차근차근 익히며, 실제 프로젝트에 어떻게 적용하는지 알려드립니다.

2. 실습 중심 학습

   • 카드 레이아웃, 로딩 스피너, 이미지 확대 효과 등 다양한 미니 프로젝트가 마련되어 있습니다. 이론만 듣고 끝나는 것이 아니라, 손으로 코드를 작성하고 결과를 확인하며 습득할 수 있습니다.

3. 심미성과 구조

   • Flexbox와 Grid를 활용해 깔끔하고 직관적인 레이아웃을 구성하고, 미디어쿼리를 통해 다양한 디바이스에 대응하는 반응형 웹을 실전에서 설계해 봅니다.

4. 포트폴리오 업그레이드

   • 강의 내 다양한 예제와 프로젝트를 통해 포트폴리오에 바로 활용할 수 있는 결과물을 만들어 낼 수 있습니다.

   • 개인 프로젝트나 팀 협업에서도 디자인 퀄리티를 높이는 핵심 역량을 갖추게 됩니다.

5. 수강생 친화적 접근

   • 이미 HTML+CSS 기초를 배우신 분이 중급 단계로 올라갈 수 있도록, 자주 혼동하는 개념도 상세 설명과 예제를 통해 풀어드립니다.

   • 문제 해결 시 질문 게시판을 통해 빠르게 피드백을 주고받을 수 있습니다.

이런 내용을 배워요.

1. CSS Level 2 - Position

   • Relative, Absolute, Fixed, Sticky, Z-index 이해

   • 프로젝트: 계단식 레이아웃, V 모양 레이아웃, Fixed 레이아웃 등

2. CSS Level 2 - Transition

   • Transition Property, Duration, Timing-Function, Delay

   • 프로젝트: 버튼 호버 효과, 이미지 확대 효과 등

3. CSS Level 2 - Transform

   • Translate, Rotate, Scale, Skew

   • 프로젝트: 카드 회전, 텍스트 이동, 3D 효과 구현

4. CSS Level 2 - Animation

   • Keyframes, 반복 횟수, 방향 설정, Fill-Mode

   • 프로젝트: 로딩 스피너, 페이드인 효과, 텍스트 색상 변화, 카드 슬라이드 등

5. CSS Level 3 - Flexbox

   • Container & Items, Direction, Wrap, Justify-Content, Align-Items 등

   • 프로젝트: 카드 레이아웃, 반응형 내비게이션바, 대시보드, 블로그 포스트 레이아웃

6. CSS Level 3 - Grid

   • Grid-Template, fr 단위, gap, areas, auto-flow 등

   • 프로젝트: 반응형 이미지 갤러리, 대시보드, 포트폴리오 섹션 등

7. CSS Level 3 - Responsive Design

   • 미디어쿼리, 유연한 그리드, 반응형 타이포그래피

   • 프로젝트: 반응형 웹 디자인 종합 실습