Ep 1. HTML / CSS 입문 30일 챌린지 (1주차)

 

유튜브 vlog: https://youtu.be/FTxB6ZEzs6k 

 

챌린지 설명 및 마음가짐:

• 30일 동안 매일매일 html과 css을 학습하고 실력 향상을 목표!!
• 초심자로서 그리고 비 전공자의 마음으로 챌린지를 진행합니다. (실제로 html, css 초심자입니다 ㅠ.ㅠ)

목표:

• HTML/CSS를 사용하여 웹사이트를 만들 때 자신감이 있다. (2개 프로젝트 정도 진행)
• 반응형까지 학습하여 웹이나 스마트폰에서도 화면이 제대로 보일 수 있도록 한다.

2022-10-31 월요일 (1일차)

• 어떤 방법으로 학습할지 서치
• ref: https://developer.mozilla.org/en-US/docs/Learn/HTML
• ref: https://developer.mozilla.org/en-US/docs/Learn/Front-end_web_developer
• 부족하거나 모르는 문법을 학습하고, 문법을 넘어 조금 더 잘 활용할 수 있도록 프로젝트 진행 필요

2022-11-01 화요일 (2일차)

• block level vs inline level (block level 은 inline 태그 안에 nested 되지 않는다.)
• 메타 데이터라 함은 설명을 하기 위한 데이터.
• html 기본, head & metadata

2022-11-02 수요일 (3일차)

• html을 사용하여 웹 구조잡기 (기본)
• 웹페이지 이동은 a 태그를 활용하여 이동
• (페이지 이동의 근본은 a tag!!!! 네비게이션 메뉴든 다른 페이지 이동할 때)
• 하이퍼링크(a 태그)와 id 사용하여 원 페이지 내에도 이동이 가능
• 텍스트를 위한 태그 아는 것 보다 많이 존재
• 심플 웹사이트를 기획 -> 만들기

2022-11-03 목요일 (4일차)

• Multimedia and embedding
• css 학습 시작

2022-11-04 금요일 (5일차)

• css의 전반적인 큰 그림 그리기
• 미디어 쿼리도 초기에 배워야 개발을 하면서 써먹을 수 있겠다. 나중에 변경할려고 하면 일이 너무 커지겠다.
• 전체적으로 살펴 볼 수 있도록 하자!! 직접 찾아서 할 수 있도록.

2022-11-05 토요일 (6일차)

• 30분 정도 복습 ㅠ.ㅠ

2022-11-06 일요일 (7일차)

• box model: block vs inline
• css는 overflow가 발생해도 숨기지 않는게 원칙. 데이터 손실이 발생하면 알 수 없기 때문에 일단 화면에 보여준다.
• css 레이아웃 입문 (flex, grid, float, position 개념들)

7일차를 마치며 점검 사항

• 30일 첼린지 동안 MDN - HTML/CSS 문서 읽고 또 읽기. 튼튼한 기본을 만들어 줄거야.
• 프로젝트 만들기를 통해서 연습하기

참고해야 될 자료

:: 레이아웃 -> https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts

:: 문서의 내용을 다 이해를 하지 못해도 좋다. 하지만 이런 내용이 있다는 것은 알고 있어야, 필요할 때 다시 공부하고 사용할 수 있다.