HTML

HTML과 CSS정리를 제대로 안하고 js와 react부터 공부했더니 머릿속에 대 혼돈의 카오스가 일어나기 시작했다 .. ! 따라서 HTML과 CSS를 간단하게 정리해보고자 한다.

HTML

• html은 웹을 이루는 buliding block
• html없이는 웹사이트를 만들 수 없음 - html은 mark up 언어(태그를 이용해서 구조적으로 작성)를 사용
• W3C 는 웹의 표준화를 추진하는 곳. 세상에 현존하는 모든 브라우저들이 표준에 맞게 브라우저를 구현함
• 정의된 태그는 MDN 에서 확인 가능. 정보도 가장 빠르게 업데이트 되는 곳 !
• HTML 태그를 사용할 때에는 모든 브라우저에서 사용이 가능한지 확인하고 사용하는 것이 필요
• 브라우저는 어느정도의 에러가 발생하면 이를 짐작하고 스스로 회복해서 사용자가 html을 보는데 문제가 없도록 도와줌

HTML 구조

• head 에는 ui적인 요소가 없고 metadata만 있음 (css도 head에서 연결)
• body 가 사용자에게 보여지는 최상위 컨테이너. 정의된 태그를 이용하면 브라우저 상에서 알아서 태그에 맞게 보여줌

HTML 작성

• 웹사이트를 모든 것을 body에 넣는 것이 아니라 header, footer등 에 넣어서 구조를 나누어서 작성해야 됨
• 웹사이트는 box 로 구성됨. 그 box 내부도 작은 box로 나눠질 수 있음. 사이트를 box별로 나누는 연습을 해야함. 이는 웹사이트를 만들 때 가장 중요한 무기가 될 것!!

HTML 태그

• 태그들은 box 가 되는 것, item 이 되는 것 둘 중 하나로 구분됨
• 사용자에게 보여지는 아이템이 있는가하면 sectioning을 하는 보이지 않는 box가 있음. 이는 나중에 css를 통해서 스타일링이 가능함
• html에서 추천하는 방식으로 section 태그를 이용해서 나누는 것이 중요.
  (box는 sectioning이 나누어지는 태그를 말함)
• section안에서도 article이 여러개 들어갈 수 있고 article은 반복되는 재사용이 되는 것들을 묶어 놓은 것
• div는 아무 곳에서나 사용함
• block레벨의 element는 한 줄에 하나만을 차지하는 것을 말함
• inline레벨의 태그는 공간이 허용되면 그 옆에 다른 태그의 배치가 가능
• <a> 는 hyperlink가 가능하게 하는 태그. href라는 속성에는 링크하고 싶은 주소를 적음. target값을 이용하면 창을 어디서 열 것인지 지정 가능
• <p> 는 paragraph을 뜻함. 문단을 정의할 때 사용
• <span>, <b> 는 inline 레벨
• <div> 는 block 레벨
• <input> 은 사용자에게 데이터를 받는 역할. <label>과 같이 쓰는 경우가 많음. 사용자에게 어떤 정보를 원하는지를 명확하게 표기할 수 있기 때문
• 한 페이지에 굉장히 많은 <input> 이 있을 수 있기 때문에 보통 id로 고유한 식별자를 주게 됨

마무리

• 기본적인 행동들은 css를 통해서 수정이 가능!
• 웹에서 물건을 하나하나 다 태그에 넣으면 박스가 너무 많아짐. 너무 세세하게 박스를 나눌 필요는 없음을 기억!!!!