로드맵

ref. frontend roadmap (beginner version) - roadmap.sh

HTML, CSS는 프론트엔드 개발의 기초이예요! 해당 내용들을 잘 이해하지 않고 넘어가면 나중에 큰 어려움을 겪을 수 있어요. 양이 많지만 꼭 시간 투자를 아낌없이 해서 이해하고 넘어가 보아요! 😄

공부할 내용 📚

여러분의 공부를 돕기 위해 준비한 자료들이에요. 따라서 꼭 준비된 자료만 공부할 필요는 없어요! 자신만의 방식으로 공부하고 과제만 잘 수행하면 돼요! 😄

HTML

HTML은 “프로그래밍 언어"가 아닌 마크업 언어로 웹 페이지의 구조를 정의하는 언어에요. 여러분이 브라우저 주소창에 “skku.edu"를 입력해서 서버에 요청을 보내면 가장 먼저 받는 파일이 HTML 문법으로 작성된 파일이에요. 즉 웹의 시작이니 정말 중요하겠죠!

모든 태그를 외울 필요는 없어요! 필요할 때 구글링을 통해 찾아보면 돼요! 😄 다만 대충 어떤 태그가 있는지는 알아두면 좋아요!

CSS

HTML에서 구조화를 잘했지만 아직은 단순히 문서일 뿐이에요. CSS는 HTML 문서를 꾸며주는 역할을 해요. CSS를 잘 이해하고 사용하면 웹 페이지를 성능적으로도, 디자인적으로도 더욱 효과적으로 만들 수 있어요!

중요 🫣

  • Flex - 정리 영상
    • Flex에 대해서 정리해놓은 영상이에요!
  • Flex - 1분코딩
    • Flex는 CSS의 레이아웃을 잡는 속성이에요. 정말 중요하니 꼭 공부해 보세요!
  • Grid - 정리 영상
    • Grid에 대해서 정리해놓은 영상이에요!
  • Grid- 1분코딩
    • Grid는 Flex와 비슷한 레이아웃을 잡는 속성이에요. 정말 중요하니 꼭 공부해 보세요!
  • CSS 시작하기 - MDN
  • CSS reference - MDN
  • Flexbox froggy (optional)
    • 재미있게 Flex를 공부할 수 있는 게임이에요! 레이아웃을 짜는 flex와 grid는 정말 중요한 내용이에요! 꼭 공부하고 넘어가세요! 최소한 flex라도 꼭 잘 이해하고 넘어가야 해요!

프로젝트 실습 📝

매주 배운 내용을 복습 및 활용하기 위해 프로젝트를 진행해요. 저희가 준비한 프로젝트는 아래와 같아요.

메인 페이지
디테일 페이지

위와 같이 포켓몬 도감(?) 사이트를 만드는 것이 이번 스터디 프로젝트에요.

포켓몬 도감 사이트는 메인 페이지와 디테일 페이지로 구성되어 있어요. 메인 페이지에서는 포켓몬의 이름, 이미지, 간단한 정보를 보여주고 디테일 페이지에서는 포켓몬의 이름, 이미지, 상세 정보을 보여줘요.

이번 주는 HTML, CSS만을 사용해서 메인 페이지 하나와 디테일 페이지 10개를 만드는 것이 목표예요!

깃과 깃헙을 반드시 사용해서 프로젝트를 관리해주시고 프로젝트를 완성하면 Github Page를 통해 배포해 주세요! 😄 이와 관련된 설명은 9. Git, Github.md를 참고해 주세요!

다른 기술 스택을 사용할 줄 알더라도 HTML, CSS만을 사용해서 만들어 보세요! 😄

프로젝트 실습 Tip 📌

몇 가지 팁을 알려드릴게요!

1. VSCode를 사용해요

VSCode는 HTML, CSS를 작성하기에 정말 좋은 에디터예요. VSCode 설치하기

추가로 Live Server VSCode Extension을 사용하면 HTML, CSS를 작성하면서 바로바로 결과를 확인할 수 있어요.

2. 프로젝트 구조 

- 3w : root 폴더
  - pokemon
    - 1.html : detail 페이지
    - 2.html
    - 3.html
    - ...
    - 10.html
    - style.css : detail 페이지 공통 CSS 파일
  - index.html : 메인 페이지
  - style.css : 공통 CSS 파일
  - reset.css : CSS 초기화 파일

본인이 원하는 구조로 프로젝트를 구성해도 괜찮아요!

3. 데모 사이트 분석

매주 데모 사이트를 제공할 거예요. 데모 사이트를 분석해서 어떻게 만들어야 할지 참고해 보세요!

데모 사이트 분석

처음에는 그냥 외관만 보고 따라 만들다가 막히는 경우 위 사진과 같이 개발자 도구를 통해 분석하면서 만들어 보세요! (사진 링크도 개발자 도구 참고해서 얻을 수 있습니다!)

질문, 토론은 언제나 환영입니다🤗