공도리의 HTML5와 CSS3를 이용한 홈페이지 개발
공도리의 HTML5와 CSS3를 이용한 홈페이지 개발
수강정보
(39개의 수강평)
2143명의 수강생
무료
지식공유자 : 이우진
31회 수업 · 총 4시간 33분 수업
기간 : 평생 무제한 시청
수료증 : 미발급 강의
수강 난이도 : 입문
이우진의 다른 강의 연관 로드맵

이 강의는

HTML5와 CSS3를 이용해 간단한 홈페이지를 제작하는 방법을 다루는 수업입니다.

공도리의 HTML5와 CSS3를 이용한 홈페이지 개발

HTML5와 CSS3를 익숙하게 다루고 싶으신가요? 아니, 더 간단하게 말하자면 내가 원하는 디자인의 홈페이지를 내 손으로 직접 개발하고 싶으신가요? 그렇다면 정말 잘 찾아오셨습니다. 제가 홈페이지 개발을 처음 배웠을 때 어려웠다고 느낀 점들을 쉽게 풀어 설명해드릴 수 있어 영광입니다. 저에게는 강의를 쉽게 해야 한다는 의무가 있다면 여러분에게는 외워야 할 CSS3의 스타일 속성명들과 HTML5의 태그명들이 많으니 외우고 실습해봐야 한다는 의무가 있습니다. 직접 실습을 하며 배워야만 곧 스스로가 홈페이지를 쉽게 개발할 수 있는 지름길입니다.

본 강의는 필자가 이미 만들어 놓은 홈페이지를 따라 만들어보는 데에 목적이 있습니다. 따라 만들기 위해 필요한 HTML5의 태그명이나 CSS3의 속성명들을 하나하나 천천히 배우면서 익히시면 어느새 나도 이렇게 간단한 홈페이지를 만들 수 있게 된다는 것을 알게 되실 거에요.

그럼 이제 웹 개발을 향한  첫 걸음을 천천히 내디뎌 보도록 하죠!

 

이 수업에서는 아래와 같은 내용을 배웁니다.
  • HTML5 기본 소스와  자주 사용되는 DIV 태그, A 태그, LINK 태그를 살펴봅니다.
  • 디렉토리의 개념을 알아보고 내가 접근하여 출력하려는 이미지가 위치한 폴더를 기준으로 어디에 있는지 명시하도록 어떻게 코딩하는지 알아봅니다.
  • CSS3의 기본 속성인 DIV 테두리와 사이즈, background, text-align, float 속성등을 살펴봅니다. float 값에 따라 어떻게 DIV의 레이아웃이 바뀌는지도 알아봅니다.
  • 이미지 파일로 배경넣기와 로고 넣기를 배워봅니다.
  • CSS3의 속성 중 position 속성을 이용하여 top, left, right, bottom의 속성에 대해서 살펴봅니다. 가장 중요한 position: absolute 속성과 relative 속성이 어느 차이를 가지고 있는지에 대해서도 살펴봅니다.
  • 공도리의 홈페이지 만들기 강의들을 수강하고나서 실전으로 직접 홈페이지를 만드는 연습을 해봅니다.
  • 자주쓰는 기타 CSS3 속성들에 대해서도 배워봅니다.
로고만들기 배경만들기
 

학습 목표

  • 본 강의에 포함된 공도리의 간단함 홈페이지 만들기 1탄과 2탄을 모두 수강하시면 자신이 원하는 홈페이지의 레이아웃과 디자인을 자유롭게 HTML5와 CSS3를 이용해서 개발할 수 있습니다.

도움이 되는 분들

  • HTML5, CSS3를 배우며 이미 만들어진 홈페이지를 기준으로 어떻게 만드는지에 대해서 강의를 하므로 홈페이지 개발을 처음 접하시는 분들과 홈페이지 개발이 어렵다고 느끼시는 분들께 도움이 됩니다.

 

지식공유자 소개

이우진
현재 대진대학교 컴퓨터공학과에 재학하고 있는 대학생 이우진이라고 합니다. 함께 개인 홈페이지인 공도리(http://gongdori.co.kr)를 운영하고 있습니다.

 

경력
  • 2018 미니해커톤 제 3회 공개소프트웨어 커뮤니티데이 webOS 부문 3등 수상

교육과정

모두 펼치기 31 강의 4시간 33분
섹션 0. 공도리의 홈페이지 만들기 1탄
1 강의 02 : 00
섹션 1. HTML5 익히기
6 강의 52 : 00
섹션 2. CSS3 익히기
8 강의 70 : 00
CSS 선택자 익히기
10 : 00
웹 폰트 사용하기
13 : 00
CSS 가로값과 세로값 부여하기
03 : 00
CSS 테두리 사용하기
06 : 00
CSS margin과 padding
12 : 00
CSS background 속성
14 : 00
CSS text-align 속성
06 : 00
CSS float 속성
06 : 00
섹션 3. 1탄의 꽃, 실전 개발
4 강의 47 : 00
Start! 사진으로 배경 넣기
16 : 00
Start! 로고 넣기
10 : 00
Start! 메뉴 만들기
13 : 00
Start! 나머지 콘텐츠 만들기
08 : 00
섹션 4. 공도리의 홈페이지 만들기 2탄
1 강의 02 : 00
강의를 시작하면서
02 : 00
섹션 5. HTML5 익히기
1 강의 12 : 00
DIV 중앙정렬
12 : 00
섹션 6. CSS3 익히기
6 강의 34 : 00
top, left, right, bottom 속성
10 : 00
hover 속성
08 : 00
transition 속성
03 : 00
position의 absolute 속성
05 : 00
position의 relative 속성
04 : 00
relative와 absolute
04 : 00
섹션 7. 2탄의 꽃, 실전 개발
4 강의 54 : 00
Start! 홈페이지에 배경 넣기
07 : 00
Start! 홈페이지 모습 만들기
08 : 00
Start! 홈페이지 우측 프레임 구성하기
10 : 00
Start! 홈페이지 좌측 프레임 구성하기
29 : 00

공개 일자

2018년 12월 3일 (마지막 업데이트 일자 : 2018년 12월 4일)

수강 후기

4.6
39개의 수강평
image
Caesiumy 3달 전
정말 입문하시는 분들께만 추천드려요. 강의자 분도 긴장하셨는지 코드 체계가 잡혀있지 않고, 기본적인 요소들만으로 구현에 목적을 두어 진행됩니다.
이우진

이우진 20일 전
체계가 잡혀있지 않은 코드! 많이 반성하고 많이 배우겠습니다! 최대한 저의 강의가 부디 도움이 되셨으면 좋겠습니다! ㅠㅠ 들어주시고 솔직한 수강평 남겨주셔서 감사합니다!

default_profile.png
gkrud62 21일 전
자세히 설명해주시는 건 좋은데 강의하시면서 너무 헤매시니까 듣는 사람 입장에서도 헷갈리네요. 마지막으로 갈수록 실수하시는 부분도 많고, 강의 순서에도 오류가 많은 것 같습니다.
이우진

이우진 20일 전
네 ㅠㅠ 인정합니다.. 답답하셨을 텐데 다음 진행하는 강의에서는 좀 더 신경써서 진행해보도록 하겠습니다. 따끔한 말씀 감사합니다!

default_profile.png
Katie kim 3달 전
훌륭한 강의인데 무료로 학습하다니.....배려에 감사합니다.
이우진

이우진 20일 전
들어주시는 분들이 있기에, 수강평을 긍정적이고 따끔한 한 마디로 솔직하게 작성해주신 분들 덕분에 이렇게 훌륭한 강의가 될 수 있었습니다... 저야말로! 부족한 강의었지만! 들어주셔서 정말 감사합니다!

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스