본문 바로가기

Language & Framework/HTML CSS

HTML 기초 정리 및 복습

HTML (Hyper Text Markup Language)

* HT (Hyper Text) : 웹 브라우저에서 보이도록 디자인된 문서

* M (Markup) : 표준화된 마크업(태그) 사용

* 웹의 가장 기본적인 빌딩 블럭(토대)로써 CSS, Java script는 부가적인 역할을 할 뿐 HTML 없이는 웹 사이트가 존재할 수 없다

* 태그는 (tag name)으로 시작해서 (/tage name)으로 끝난다

 

jsbin 예제 ⬇️

응애

 

<!DOCTYPE html> <!--html5를 선언한다.-->
<html> <!--가장 상위에 위치해야함-->
  <head> <!--사용자에게 직접 닿지 않는 내부적 요소들을 포함한다-->
    <meta charset="utf-8"> <!--가변 인코딩 방식. 대부분의 언어를 지원함.-->
    <meta name="viewport" content"width=device-width> <!--브라우저 너비를 창 너비에 맞춘다.-->
    <title>애기 개발자</title> <!--북마크시 표시, 태그로 표시 등-->
  </head>
  <body> <!--사용자에게 직접적으로 전달되는 부분-->
    <h1> HTML 기초 <h1> <!--헤딩1 타입으로 문자 작성-->
    <h2> 응애 나 애기 개발자 <h2> <!--헤딩2 타입으로 문자 작성-->
    <button> 양또띠 </button> <!--버튼생성-->
    <yangddoddi> 양또띠양또띠 </yangddoddi> <!--존재하지 않는 명령어를 인식해도 스스로 인식해서 컨텐츠에 삽입한다-->
  </body>
  </html>

 

HTML은 모든 웹 브라우저에서 똑같이 적용된다

W3C(World Wide Web Consortium)에서 웹 표준화를 추진하여 모든 브라우저에서 같은 명령어로 동일한 효과를 가질 수 있도록 지원.

그러나 모든 태그가 똑같이 지원되는 것은 아니므로 별도 확인이 필요하다.

이는 MDN(Mozilla Developer Network)에서 확인 가능하다.

=> https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#browser_compatibility

미리 호환성을 확인하고 태그를 사용해야 한다.

 

새로운 버전에서 더 이상 지원되지 않는 태그도 확인 가능하다

 

만약 존재하지 않는 태그를 입력하여 에러가 발생해도 자체적으로 어느 정도는 해결해서 콘텐츠를 출력한다.

validator 사이트에 들어가서 코드 혹은 url을 입력하면 잘못된 태그를 보여준다.

링크 => https://validator.w3.org/

 

yangddoddi 태그만 잘못됐다고 나와야 하는데.. 뭔가 잘못했지만 지금으로써는 뭐가 잘못됐는지 모르겠다..

 

웹 구조화에 대한 기본적인 가이드

=> https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure

 

Document and website structure - Web 개발 학습하기 | MDN

At this point you should have a better idea about how to structure a web page/site. In the last article of this module, we'll study how to debug HTML.

developer.mozilla.org

 

웹을 구조화하여 최대한 세세하게 분류해야 추후 react 사용시 최적화된 웹을 만들 수 있다.

 

크게는 head navigaitonbar sidebar maincontents 그리고 footer로 분류된다.
웹 개발을 위해서는 최대한 세세하게 분류할 수 있어야 한다.

 

Box와 Item의 구별

섹션을 나누기 위해 사용되는 태그는 Box, 사용자와 직접 상호작용하거나 정보를 전달하는 태그는 Item

Inline type과 block type의 구별

줄바꿈되면 block type 공간이 허용된다는 가정하에 같은 줄에 작성될 시 inline type

 

섹션을 나누는 용도로 사용되는 태그와 사용자와 상호작용을 위해 작성되는 태그
같은 줄에 작성되면 inline 줄바꿈되면 block
command + option + i를 누르면 웹 사이트의 소스를 확인할 수 있다.