로그인

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등 수상

강좌 평가

4.9

18 개의 수강평
  • 5 점17
  • 4 점1
  • 3 점0
  • 2 점0
  • 1 점0
  1. 이정근의 프로필 사진

    쉽고 핵심적이고, 바로 적용이 가능한 강의

    5

    수업이 정말 핵심적으로 중요한 것들을 바로 배우고 적용할 수 있어 좋아요.
    최고의 강의인 것 같아요. 감사합니다.
    새소식에 홈페이지 제작 이미지 파일 URL을 따로 링크해주셨네요.
    홈페이지 들어가서 회원가입이 안되서 해맸어요..ㅜ

    • 이우진의 프로필 사진

      불편을 드려 죄송합니다 ㅠㅠ

      5

      우선 좋은 강의평가에 대단히 감사드립니다! ㅠㅠ 제가 강의를 할 수 있는 유일한 원동력이 바로 수강평이지요 ㅠㅠ…! 감사합니다! 또한 이전 수강평에서 문의해주셨듯이 리뉴얼 중인 홈페이지 개발기간이 길어짐에 따라 정상적인 이용이 불가피하였는데요! 현재 다시 원래의 홈페이지로 복구하여 정상적인 이용이 가능하십니다! 어렵게 강의 자료를 구하시게 된 점에 대해서 정말로 죄송합니다 ㅠㅠㅠ… 더 좋은 강의로 다시 찾아오겠습니다!! 감사합니다!

  2. 이정근의 프로필 사진

    쉽고 핵심적이고, 바로 적용이 가능한 강의

    5

    수업이 정말 핵심적으로 중요한 것들을 바로 배우고 적용할 수 있어 정말 좋은 것 같아요.
    강의 들으면서 홈페이지 만들기 제 1탄 이미지 자료들을 받아야해서 공도리 홈페이지 가입을 하려고 하는데,
    회원가입이 잘 안되는데, 어떻게 진행해야하는지좀 알려주실 수 있을까요…?

    • 이우진의 프로필 사진

      아 죄송합니다!

      5

      공도리 홈페이지 리뉴얼 중이어서 홈페이지를 리뉴얼 중인 홈페이지로 바꾸었습니다만! 리뉴얼 기간이 길어질 것 같아 다시 원래의 홈페이지로 복원시켜놓은 상태입니다! 현재 정상적인 회원가입과 실습 파일 다운로드가 영상처럼 가능하십니다!

  3. 부캐릭의 프로필 사진

    강의 잘 들었습니다.

    5

    덕분에 html, css 공부 잘 했습니다.

  4. 허원재의 프로필 사진

    좋은 강의 감사합니다.

    5

    쉽고 좋은 강의 입니다!!!

  5. 부르릉의 프로필 사진

    제일 듣기 편한거 같아요

    5

    엥? 듣기만했는데 홈페이지가 나오네?

  6. 최자원의 프로필 사진

    좋은 강의 감사합니다.

    5

    간단한 페이지를 만들어야 하는 와중에 좋은 강의를 찾았네요.
    짧다는 점이 무조건 어려울 거라는 점을 보완해 주는 것 같습니다.
    질문 하나만 드리면 메인홈페이지에서 버튼 클릭해 다른 화면으로 넘어가려면 각가의 html파일을 만들어줘야 하는 건가요?

    • 이우진의 프로필 사진

      좋은 강의 평가에 감사드립니다!!

      5

      우선 좋은 강의 평가 한 말씀에 감사드립니다! 강의 평가 먹고 살고 있습니다 ㅎㅎ.. 질문에 대한 답변을 드리자면, 네 맞습니다! 메인 홈페이지에서 버튼을 클릭해서 다른 화면으로 넘어가기 위해서는 각각의 HTML 파일을 만들어 A태그로 연결시켜주어야 합니다. 추가적인 지식을 한 가지 안내해드리자면! 여기서 파악할 수 있는 것은 HTML은 고정적인 페이지를 보여줄 때, 거의 페이지의 모습이 변동이 없을 때에만 사용하면 된다는 것이지요. 유동적으로 변하는 페이지이면서 유저의 이벤트에 따라 반응해야하는 동적인 페이지는 PHP, JAVASCRIPT 등을 이용하여 개발하게 됩니다. 추후 진행될 강좌들인데 많은 기대 부탁드립니다!

  7. Choi의 프로필 사진

    깔끔합니다^^

    5

    설명 깔끔합니다^^
    강의하나하나가 짧아서 재밌게보고있어요

    • 이우진의 프로필 사진

      좋은 강의평 감사합니다.

      5

      좋은 강의평 감사합니다! 저도 강의들을 때 긴 강의는 보기가 싫었었거든요. 그 경험을 살려서 필요한 부분만, 필요한 내용만 설명하는 컨셉을 잡아서 강의를 해보았어요. 🙂 앞으로도 좋은 강의 많이 내보겠습니다! 감사합니다!

  8. 안교남의 프로필 사진

    정말 감사합니다.개발 할줄도 몰랐었는데..덕분에 이해가 가요

    5

    정말 좋아요. 이제 마지막 8강의 남기고 이렇게 글쓰지만요….저는 html, css, javascript매일 기초책만 봤어요..개발을 하고 싶어도 개발 아무도 안알려주고.. 빌어먹을 학원은.어휴..원장 한대 치고 싶었음…진짜 하나하나 알려주고 개발을 어떻게 하는지 자세히 알려주심..이제야 어떻게 만드는지 감도 잡히고 홈페이지들 소스랑 css보니간 머리로 다 그려지네요…자바스크립트만 뺴고요..ㅠㅠ..감사합니다..대학생중에 그렇게 홈피도 코딩으로 만들고 해커도 하실정도면. 대단하신분인걸로 추측됩니다…학교 과에서 수석하시죠??와..부럽네요…그.홈피랑 화면창 보시니간 사업애기도 써져있던데. 대박나세요.!!!

    • 이우진의 프로필 사진

      좋은 강의 평가 감사합니다!

      5

      저의 강의가 정말 도움되셨다니 정말 다행입니다. 사실 저도 처음해보는 강의인지라 다른 분들께 도움이 될지 의아하였었거든요! 자바스크립트에 관해서도 천천히 배우시면 분명 금방 따라하실 수 있을거에요! 좋은 강의평에 힘입어 얼른 다음 강의도 준비해보겠습니다! 🙂 감사합니다!

  9. 박희옥의 프로필 사진

    좋은강의 감사합니다.

    4

    수업내용이 참 쉽고 재미있었습니다.
    도움이 많이 되었어요. 감사합니다.

    • 이우진의 프로필 사진

      좋은 평가 감사합니다! 이후에는 데이터베이스 강의를 진행할건데 데이터베이스 강의도 도움이 되셨으면 좋겠습니다! 감사합니다!

      5

      좋은 평가 감사합니다! 이후에는 데이터베이스 강의를 진행할건데 데이터베이스 강의도 도움이 되셨으면 좋겠습니다! 감사합니다!

강좌 교육과정

공도리의 홈페이지 만들기 1탄
강의를 시작하면서학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:02:00
HTML5 익히기
HTML5 기본 소스 익히기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:06:00
DIV 태그 익히기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:11:00
A 태그 익히기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:06:00
IMG 태그 익히기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:00
디렉토리 익히기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:07:00
LINK 태그 익히기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:12:00
CSS3 익히기
CSS 선택자 익히기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:00
웹 폰트 사용하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:13:00
CSS 가로값과 세로값 부여하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:03:00
CSS 테두리 사용하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:06:00
CSS margin과 padding학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:12:00
CSS background 속성학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:14:00
CSS text-align 속성학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:06:00
CSS float 속성학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:06:00
1탄의 꽃, 실전 개발
Start! 사진으로 배경 넣기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:16:00
Start! 로고 넣기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:00
Start! 메뉴 만들기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:13:00
Start! 나머지 콘텐츠 만들기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
공도리의 홈페이지 만들기 2탄
강의를 시작하면서학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:02:00
HTML5 익히기
DIV 중앙정렬학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:12:00
CSS3 익히기
top, left, right, bottom 속성학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:00
hover 속성학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
transition 속성학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:03:00
position의 absolute 속성학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
position의 relative 속성학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:04:00
relative와 absolute학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:04:00
2탄의 꽃, 실전 개발
Start! 홈페이지에 배경 넣기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:00
Start! 홈페이지 모습 만들기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
Start! 홈페이지 우측 프레임 구성하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:10:00
Start! 홈페이지 좌측 프레임 구성하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:29:00
  • 무료
  • 평생
  • 31개 강의, 총 4 시간 33 분
  • 위시리스트

실시간 인기 강좌

우리는 성장기회의 평등을 추구합니다. 🎄

경제적, 시간적 제약없는 양질을 교육으로 누구나에게 성장 기회를 균등하게 주는 것. 그것이 우리의 목표입니다.

지식공유참여 고객센터
top
(주)인프랩 | 대표자:이형주 | TEL:070-4178-0406 | E-MAIL: course@inflearn.com | 사업자번호:499-81-00612
주소:성남시 분당구 삼평동 대왕판교로 645번길 12 경기창조경제혁신센터 8층 R19 | 개인정보보호책임자:이형주
통신판매업:2017-서울강남-01544 | ©INFLAB. ALL RIGHTS RESERVED