HTML 기초, React 할때 꼭 필요한 팁! 쉽다고 무시하면 안돼요 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript
https://youtu.be/i0FN-OwJ7QI
웹사이트의 구조를 파악할 수 있는 안경
디자이너가 초안을 주거나 카피하고 싶은 웹사이트를 봤을 때 그 웹사이트가 어떤 식으로 짜여져 있고 구성이 되어 있는지 대략적으로 내가 이런 식으로 만들면 되겠다 라고 생각할 수 있는 안경
HTML(HyperText Markup Language)
레고로 치면 제일 밑바닥에 깔리는 아이
웹 contents의 구조와 의미를 결정한다.
HTML과 같이 쓰이는 CSS와 자바스크립트는 부가적인 아이들이지 HTML 없이는 웹사이트를 만들지 못한다.
HTML은 웹 브라우저 상에서 보여지도록 디자인 된 문서를 말한다. 표준화 된 markup 언어를 쓴다.
Markup language
일반적인 텍스트와 문법적으로 구분하기 위해서 문서에 annotating 된 것
<태그>contents</태그>
구조적으로 작성된 것
html 파일에 들어가야 되는 가장 기본적인 아이들
html 태그: html 파일 가장 상위에 있는 태그
html 태그 안에서 head 태그와 body 태그로 나누어 진다.
head 태그: 사용자에게 보여지는 UI적인 요소가 전혀 없다. 구글에서 검색할 때 나오는 타이틀이나 부가설명, 그리고 북마크 추가할 때 나오는 제목이나 아이콘들이 정리되어 있다. CSS파일을 연결하는 것도 head 파트에서 진행된다. 사용자에게 보여지는 정보가 없고 meta data만 있다. 상세 설명이 들어간다.
body 태그: 사용자에게 보여지는 가장 중요한 최상위에 있는 컨테이너. body 안에 작성하는 내용들이 유저한테 보이는 것. 사용자에게 보여지는 태그들로 이루어져 있다.
h1 태그: Heading
button 태그
웹 사이트는 박스들로 구성되어 있다.
웹 사이트들은 커다란 박스들로 구성되어 있고 그 박스 안에도 작은 단위의 박스로 쪼개질 수 있다. 웹 사이트들을 바라볼 때 작은 단위로 나눌 수 있어야 나중에 CSS 스타일링을 할 때 조금 더 structure 있게 스타일링 할 수 있다.
사이트를 박스별로 나누어서 구분하는 연습을 해본다.
