Ep 2. HTML / CSS 입문 30일 챌린지 - 링크트리 만들기 (2주차)

유튜브 리뷰 링크: https://youtu.be/sS2b8EZqYa8

 

2주차 목표:

• html/css 연습을 위한 미니 프로젝트 1개 완성
• mdn 매일매일 복습하기 (급해하지 않고 직접 눈으로 보면서 자세히 익히기)

2022-11-07 월요일 (8일차)

• 어떤 프로젝트를 만들어 볼 것인가? -> 내가 지금 사용해보고 있는 웹 페이지는? 링크트리 실습으로도 괜찮겠다.
• 첫 부분부터 복습, 앞에는 확실히 수월합니다.

inline level 태그 - https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

block level 태그 - https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

block level의 중요한 핵심

A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its contents, thereby creating a "block".

• 초보자의 마음으로 하나씩 하나씩 나아가기 (실제로도 초보자..) 배우는 게 있으면 멋지게 하려고 하지 말고 바로 적용을 해보자  :)

2022-11-08 화요일 (9일차)

• 벌써 9일차..?? (html 파트 복습)
• [복습] head 태그와 metadata 태그
• [복습] text 태그를 다뤘습니다. text 태그만 적절하게 배치를 해도 신문을 보는 느낌은 들기 시작합니다.
• [복습] 하이퍼링크 - 이동은 a tag를 사용하자.
• [복습] 웹 사이트 구조 잡는 태그(이 파트는 사이트 만들 때 다시 복습 또 복습) -> Document and website structure

2022-11-09 수요일 (10일차)

• [복습] flexbox
• ul 태그 왼쪽 마진 존재(브라우저가 자체 스타일링을 갖고 있기 때문에 reset css 개념이 존재하고 적용 필요)
• 어떻게 중앙 정렬을 할지 이런 내용도 스스로 고민을 하시게 돼요. (기반을 다지고 모르는 내용은 찾아 보는 힘이 생긴다)
• 높이는 얼마나 주고, 어떻게 꾸밀지 등 의사결정에 대해서 스스로 결정할 수 있는 힘이 생긴다. 사용하는 사람들에게 잘 보여질 수 있도록 만들고 수정이 필요하면 수정을 하면 된다. 이게 개발이다.

2022-11-10 목요일 (11일차)

• 외부 일로 진행 X

2022-11-11 금요일 (12일차)

• mdn 학습의 장점 -> 특정 범위만 학습하는 것이 아닌 전반적인 css 학습이 가능. 예를 들어서 그리드, 플렉스 같은 키워드 학습이 아닌, float나 position 같은 전반적인 레이아웃 학습이 가능.
• 레이아웃은 눈으로 보면서 학습을 하서야 돼요. 1. 소스코드 복사, 2. 실행, 3. 브라우저에서 확인

2022-11-12 토요일 (13일차)

• 나만의 링크 트리 만들기 -> 선택자, 초기화
• a tag 버튼에 가득 차게 만들기. (block을 사용해도 되고, flex로 사용을해도 되고)

2022-11-13 일요일 (14일차)

• 링크트리 코드 작성

직접 만든 링크트리 URL: https://junngo.github.io/linktree/

소스코드 URL: https://github.com/junngo/linktree

유튜브 링크: https://youtu.be/sS2b8EZqYa8