CSS 퀵 스타트
초급
본 과정에서는 CSS 의 기본 사항과 웹 페이지 스타일링에 CSS 를 사용하는 방법을 배우게 됩니다. 이 과정을 마치면 CSS 를 사용하여 간단한 웹 페이지를 만들 수 있습니다.
cssweb-development
💡 이 튜토리얼은 영어로 번역되었습니다. 원본을 보려면 영어로 전환
- 소개
- 강의 계획
펫 하우스로 시작하기
CSS 기초
레이아웃 및 배치
텍스트 및 타이포그래피
시각 효과 및 패턴
CSS 기본 사항 초보자 가이드
웹 개발을 위한 CSS 스타일링 기법
상단 삼각형이 있는 테두리
체커보드 배경 패턴
스트라이프 배경 패턴
물방울 무늬 배경 패턴
지그재그 배경 패턴
CSS 를 이용한 모양 분리자 만들기
CSS 동적 그림자 생성
Overflow Scroll Gradient (오버플로우 스크롤 그라데이션)
스크롤바 숨기기
CSS 를 이용한 스크롤바 스타일 사용자 정의
이미지 텍스트 오버레이
얼룩말 무늬 목록 (Zebra Striped List)
Sibling Fade CSS 효과
시각적으로 매력적인 웹을 위한 CSS 기본
시각적으로 매력적인 웹 레이아웃 제작
반응형 이미지 모자이크
고급 상호작용 및 애니메이션
CSS 팝아웃 메뉴 만들기
수평 스크롤 스냅 (Horizontal Scroll Snap)
수직 스크롤 스냅
스크롤 진행률 표시줄
CSS Focus-Within 을 활용한 양식 상호 작용성 향상
호버 시 추가 콘텐츠 표시
버튼 채우기 애니메이션
버튼 성장 애니메이션
버튼 축소 애니메이션
CSS 펄스 로더 애니메이션 제작
시각적으로 매력적인 디자인을 위한 CSS 기술
Zoom in Zoom Out Animation (줌 인 줌 아웃 애니메이션)
버튼 테두리 애니메이션
호버 그림자 상자 애니메이션
호버 시 이미지 회전
동적 높이의 부드러운 전환
호버 시 원근 변환
웹 스타일링을 위한 CSS 기본 사항
Squiggle 링크 호버 효과
CSS 를 활용한 반응형 웹 디자인
목록 요소에 대한 계단식 CSS 애니메이션
CSS 토글 스위치 만들기
수직 스크롤 이미지 갤러리
이미지 컷아웃이 있는 카드
버튼 스윙 애니메이션
CSS 로 회전하는 카드 만들기
수평 스크롤 이미지 갤러리
호버 언더라인 애니메이션
이미지 위에 마우스 오버 시 메뉴
네비게이션 목록 항목 Hover 및 Focus 효과
사용자 정의 라디오 버튼
마우스 커서 그래디언트 추적
HTML, CSS, JavaScript 를 이용한 타자기 효과 구현
플로팅 섹션 제목이 있는 목록
CSS 바운싱 애니메이션 로더
3D 회전 큐브
호버 시 이미지 오버레이
CSS 로 구현하는 애니메이션 소셜 공유 버튼
CSS 를 활용한 애니메이션 체크박스 스타일링
CSS 를 활용한 반응형 메이슨리 레이아웃
텍스트 오버레이가 있는 이미지
유효하지 않은 입력 시 흔들림 효과
이미지 로드 실패 시 대체 (Fallback)
접두사 포함 입력
빈 요소 숨기기
텍스트 없는 링크 스타일 지정
강사
Labby
Labby is the LabEx teacher.
Google Classroom에 공유
Discord에 참여하여 함께 학습하세요
지금 참여하기사용자 리뷰
" Здорово, что есть такой удобный ресурс"
— hvteg
" Nice. Really happy with the progress."
— mwaicharles01-ux
추천 코스

