Inflearn brand logo image
Inflearn brand logo image
채널톡 아이콘
NEW
개발 · 프로그래밍

/

프론트엔드

비전공자를 위한 웹사이트 개발 첫걸음 #HTML, #CSS

웹사이트를 만드는 개발자가 되기 위해선 배워야 할 기술들이 많습니다. 그 많은 기술들 중 가장 먼저 배워야 할, 웹사이트의 제작의 기본인 HTML, CSS에 대해 설명합니다. HTML, CSS를 작성하는 방법을 배우고, 마지막엔 아마존이라는 실제 웹사이트를 비슷하게 만드는 프로젝트를 합니다. 그리고 만든 프로젝트를 url로 만들어 배포할 수 있도록 합니다.

2명 이 수강하고 있어요.

HTML/CSSgithub-desktop
Thumbnail

입문자를 위해 준비한
[웹 개발, HTML/CSS] 강의입니다.

이런 걸 배울 수 있어요

  • 웹페이지의 요소를 만드는 HTML 이론

  • 웹페이지의 요소를 디자인하는 CSS 이론

  • HTML/CSS를 이용한 코딩 프로젝트

  • github-desktop으로 github 사이트에 만든 코드 관리

  • 만든 웹사이트를 naver.com 처럼 주소로 만들기

비전공자를 위한 웹사이트 개발 첫걸음 (HTML, CSS)

웹사이트를 만드는 개발자가 되고 싶은데... 처음에 무엇을 공부해야 할 지 모르겠다구요??

1. 웹사이트 개발의 첫 시작은 HTML/CSS 입니다!

집을 만들기 위해선 그 집에 어떤 요소가 들어가 어떻게 디자인 되어야 하는 지 결정해야 합니다.

웹사이트도 마찬가지입니다.

웹사이트라는 집을 짓기 위해선 웹사이트에 어떤 요소가 들어가는 지 HTML로 정하고,

그 요소를 CSS로 디자인합니다.

스크린샷 2025-04-02 211748

HTML로 어떤 요소가 들어가는 지 정하고..... CSS로 그 요소를 디자인합니다

이렇게 HTML과 CSS는 웹사이트를 만드는 데 가장 기본이 되는 언어이기 때문에, 웹사이트 개발자가 가장 처음 공부해야 하는 컴퓨터 언어입니다.


그래서 2024년 개발자를 대상으로 한 Stack Overflow 설문조사를 보면 HTML/CSS는 웹사이트를 만드는 가장 기초적인 언어이기 때문에, 두 번째로 인기 있는 컴퓨터 언어임을 알 수 있습니다!!

2. 이 강의는 웹 개발 경험이 없는 분들을 위한 강의입니다

이런 분들께 추천해요!

비전공자인데, 코딩을 해 본 적이 없어요

전공자이지만, 웹사이트 개발은 처음이에요

이번 HTML/CSS강의는 웹사이트 개발 경험이 없으신 분들을 대상으로 한 강의입니다

따라서 전공에 상관 없이, 코딩 경험에 상관 없이, 웹사이트 개발을 이제 막 시작하시려는 분들께 이번 강의를 추천드립니다

선수 지식은 아예 필요 없습니다!!

3. 따라서 강의는 아래 특징을 가지고 있습니다

- 이해하기 쉬운 강의

최대한 쉽게 설명하려고 노력하였습니다. 이번 강의는 웹사이트 개발 지식이 없으신 분들을 위한 강의이므로, 초등학생도 이해할 수 있을 정도로 쉬운 강의를 만들었습니다.

banana
스크린샷 2025-04-02 223003

- 많은 반복

HTML/CSS는 다른 컴퓨터 언어에 비해 쉬운 언어입니다. 하지만, 처음 코딩을 해 보시는 분들에겐 낯설고 외울 것이 많다고 느끼실 수 있습니다.

따라서 강의 중 많은 반복 + 강의 끝나고 복습 과정을 거쳐 여러 번 같은 내용을 반복합니다

- 강의 요약본 제공

강의 내용을 필기하시다가 강의에 집중을 못 하시거나, 요약 때문에 스트레스를 많이 받으시는 분들을 위해 강의 요약본을 제공해 드립니다!! (pdf 파일)

이전에 HTML/CSS를 배우신 분들 중 강의 요약본을 보시고 100% 아는 내용이면 건너 뛰셔도 좋습니다!!

스크린샷 2025-04-02 233135

4. 강의를 듣고 나면 이런 결과물을 만들 수 있어요

HTML 이론 강의, CSS 이론 강의를 마친 후, 클론 코딩 프로젝트가 있습니다!!

Amazon 홈페이지를 보고 비슷하게 웹페이지를 구성하는 프로젝트입니다!!

또 완성된 웹페이지를 다른 사람도 접근할 수 있도록 url 주소로 만듭니다

(아래 예시들은 실제 강의보다 화질이 낮습니다)

로그인 페이지

  • 아이디, 비밀번호 입력 공간

  • 정보 제출 버튼

  • 상태 변화 애니메이션

메인 홈페이지

  • 페이지 레이아웃

  • 상태 변화 애니메이션, 자동 실행 애니메이션


상세 상품 페이지

  • 페이지 레이아웃

  • 상태 변화 애니메이션, 자동 실행 애니메이션

화면 크기에 따라 달라지는 반응형 웹페이지

  • 화면 크기에 따라 웹페이지의 구성 변화

  • 모바일, 태블릿에도 적용되는 페이지

5. 강의 학습 내용

HTML/CSS의 기초 이론을 바탕으로 웹페이지 제작, 코드 관리, 웹사이트 배포하는 방법을 배웁니다

또한 HTML/CSS에 대한 추가적인 정보를 다른 사람 도움 없이도 검색하여 활용할 수 있는 능력을 기르는 것이 목표입니다.

스크린샷 2025-04-04 223637

섹션 2: HTML 이론(무료!!)

웹페이지에서 어떤 요소들이 들어갈 지 정하는 HTML기초 이론을 알아봅니다.

  • HTML문법 (태그, 속성)

  • HTML기본 구조

스크린샷 2025-04-04 223841

섹션 3: CSS이론

HTML로 정한 요소들을 디자인하는 CSS기초 이론에 대해 알아봅니다.

  • CSS 문법 (선택자, 속성)

  • 레이아웃 구성 (box model, flex, position, media query)

섹션 4: CSS심화 이론

CSS는 HTML보다 양이 많습니다. 많이 쓰이는 추가문법, 애니메이션 추가 방법에 대해 알아봅니다.

  • CSS 추가 문법 (선택자, 속성)

  • 애니메이션 만들기 (transition, transform, animation)

스크린샷 2025-04-04 225159

섹션 5: 만든 코드 관리, 변경사항 추적

긴 코드를 쓰다 보면, 내가 어떤 과정을 거쳐 코드를 작성했는지 헷갈립니다. 또, 작성한 코드로 협업하기 어려워 집니다. 이를 위해 코드 저장 공간을 만들어 코드 관리, 변경 사항 추적하는 github 사용법에 대해 배웁니다.

  • github,github-desktop, commit

스크린샷 2025-04-04 225428

섹션 6: 아마존클론 코딩

지금까지 배운 내용을 총동원하여 해외 쇼핑 사이트인 아마존 사이트를 보고 비슷하게 웹페이지를 만들어 봅니다.

  • 파일 정리 방법, 코드 작성 규칙, 추가 문법

스크린샷 2025-04-04 225651

섹션 7: 웹사이트 배포, 주소 만들기

github의 도움을 받아 완성한 프로젝트를 naver.com, google.com 처럼 웹페이지 주소로 만들어 다른 사람에게 배포합니다.

  • github hosting, deploy

스크린샷 2025-04-04 225916

섹션 8: 반응형 웹사이트 만들기

(원래 섹션 7까지만 만들려고 했는데... 강의의 완성도를 높이고 싶어) 모바일 화면같이 작은 화면에서도 우리의 웹페이지가 동작하도록 합니다.

  • 작은 화면에서 요소 감추기, 웹페이지 구성 변경

6. 수강 전 참고사항

학습 자료

  • 강의 요약본은 각각 1강, 22강에 업로드 되어 있습니다.


선수 지식 및 유의사항

  • 실전 프로젝트에서 작성된 코드는 제공됩니다

  • 동영상에는 자체 자막이 제공됩니다. 인프런 사이트 자막은 꺼 주시기 바랍니다

  • 강의 요약본을 한 번 읽으신 후 강의를 수강하시는 걸 추천드립니다

  • 강의, 요약본의 저작권은 "바나나 코더"에 있습니다

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 웹사이트 개발을 처음 시작하시는 분

  • 웹사이트 개발 시, 가장 처음 무엇을 공부해야 할 지 모르시는 분

  • 컴퓨터 언어 자체가 처음이신 분

안녕하세요
banana-coder입니다.

커리큘럼

전체

77개 ∙ (12시간 25분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!