프론트엔드 공부 순서

프론트엔드 공부 순서(Road Map)

출처 : https://github.com/kamranahmedse/developer-roadmap

Box Model, CSS Grid, Flex Box

온라인 강의로 배울때 200% 효과적으로 배우기

프로젝트는 기간 내에 무조건 완성시키기.
에버노트? 같은 노트를 작성.
직접 문제를 해결할 수 있는 능력을 연습해야 한다. 솔루션 찾기 연습을 많이 하라.
강사가 하기 전 자기가 먼저 해보기.
기본적인 맥락을 이해하고, 직접 실습해보면서 배우는게 제일 좋다.
현업에서 사람들과 프로젝트를 해보면서 성장하는게 제일 좋다.

html(Hyper Text Markup Language)

태그들을 이용해서 구조적으로 작성된 것
링크로 이루어진 사이트를 말하는거 아닌가? 그게 목적아니었나
웹컨텐츠의 구조와 의미 결정
head 태그
타이틀, 부가설명, 북마크 추가시, 아이콘
사용자에게 보여지는 정보가 아닌 메타 데이터(상세설명)만 가지고 있다.

바디에 사용자에게 보여지는 정보가 담겨있다.
w3c 웹의 표준화를 추진하는 곳, 여기서 표준화로 지정되는 태그를 만들면
브라우저(Chrome 등등)가 업데이트 해 따르도록 함.

mdn html element 페이지에 가면 모든 종류의 태그를 확인할 수 있다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element

웹사이트는 박스다. 박스 보는 눈을 길러라.

출처 : 드림코딩 엘리
Box Model
최대한 작은 박스 단위로 쪼개어서 작은 단위부터 구현하는 것이 굉장히 중요하다.
어떤 웹사이트던지, 박스로 구분하는 연습을 하자.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure

숙제 : 위키피디아 박스모델 만들어보기.

대충 그려봤다.

뭐든지 나누어 보자. react의 class 이던, 함수 이던, API이던, 너무 한 곳에 다양한 기능이 들어간 것은 아닌지, 다른 함수 클래스를 만들어 구분할 수 있으면 구분하는게 좋다.
divide and conquer

배움의 시작은 큰그림이다.
어떤 것을 배우던 큰 그림을 먼저 그려보자.

웹사이트 구조와 태그

태그들은 두가지로 나누어진다고 생각하면 된다.
BOX 와 ITEM

출처

웹사이트는 대개 이렇게 나뉜다. html 추천하는 방식. div로 나누지 말자.

• header / nav / aside / main / footer
  메인 대신에 section article 형식도 자주 쓰인다.

• article : 아티클이 여러 개가 들어갈 수 있고, 조금 더 반복되는, 재사용이 가능한 애들을 묶어 놓은 것
• section 설명은 링크로 [section]

출처
이 엘리멘트를 노드라고도 한다.

class="description" 이런 class나 id를 attributes(속성)이라고 한다.