코드프렌즈
강의 목록
체험하기
프로젝트
수강료 안내
더 보기
로그인
학습자료
입문
5 챕터 · 64 수업
자기소개 홈페이지 만들기
인터넷 세상 속에 나를 표현하는 방법
시작하기
내 강의
Chapter 1
HTML, CSS가 웹사이트에 어떻게 적용될까?
Lessons
템플릿 불러오기 → 프로필 사진 넣기
이미지 조절하기
border-radius 심화
이미지의 높이, 너비 조절하기
CSS 애니메이션
위아래로 움직이는 프로필 이미지
div 태그
h1, h2 태그
p 태그
CSS 속성으로 텍스트 스타일링하기
텍스트 색상 바꾸기
Chapter 2
Hero 섹션 만들기
Lessons
요소에 여백 넣기
여백의 방향 정하기
CSS로 margin, padding 정의하기
margin 자동으로 계산하기
HTML a 태그
a 태그 target 속성
svg 태그
링크 꾸미기
Flex 레이아웃 1
Flex 레이아웃 2
Flex 레이아웃 적용
Flex 활용 자기소개 Section 만들기
Chapter 3
네비게이션 만들기
Lessons
컨테이너란?
네비게이션이란?
네비게이션 스타일링하기
네비게이션 div 스타일링하기
로고 만들기
span과 p 태그의 차이
메뉴 만들기
메뉴 항목 구성하기
메뉴 스타일링하기
버튼 만들기
버튼 스타일링 해보기
버튼 공통 스타일
primary, secondary 버튼 스타일
메뉴 내 버튼 스타일 및 아이콘 작성방법
Chapter 4
나만의 갤러리 만들기
Lessons
나만의 갤러리 만들기
그리드 레이아웃(Grid Layout)이란?
Grid에 대해 자세히 알아보기
그리드로 갤러리 만들기
HTML video 태그
video 태그의 너비와 높이 설정하기
웹페이지에 다른 웹페이지 삽입하기
갤러리에 유튜브 영상 넣기
Chapter 5
캐러셀 만들기
Lessons
캐러셀(Carousel)이 무엇인가요?
캐러셀(Carousel)의 역할
캐러셀 구성 요소
캐러셀 구조 만들기 1
캐러셀 구조 만들기 2
캐러셀 구조 만들기 3
캐러셀 컨테이너 스타일 입히기
캐러셀에 CSS 스타일 입히기
슬라이드 애니메이션
캐러셀 버튼 스타일링 1
캐러셀 버튼 스타일링 2
캐러셀 기능 만들기 1
캐러셀 기능 만들기 2
캐러셀 기능 만들기 3
Chapter 6
Footer 만들기
Lessons
푸터(Footer)란 무엇일까요?
푸터 구조 만들기 1
푸터 구조 만들기 2
푸터 스타일링 1
푸터 스타일링 2