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/
웹 구조화에 대한 기본적인 가이드
=> https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
웹을 구조화하여 최대한 세세하게 분류해야 추후 react 사용시 최적화된 웹을 만들 수 있다.
Box와 Item의 구별
섹션을 나누기 위해 사용되는 태그는 Box, 사용자와 직접 상호작용하거나 정보를 전달하는 태그는 Item
Inline type과 block type의 구별
줄바꿈되면 block type 공간이 허용된다는 가정하에 같은 줄에 작성될 시 inline type
'Language & Framework > HTML CSS' 카테고리의 다른 글
시맨틱 태그(Semantic Tag)는 왜 필요하고 어떻게 사용할까? 핵심만 간단하게. (0) | 2022.01.05 |
---|---|
CSS 반응형 단위의 종류와 사용. %와 vw, em과 rem의 차이점. 핵심만 간단히. (0) | 2022.01.02 |
Flexbox Froggy 정답 및 풀이 복습 (0) | 2021.12.26 |
CSS 기초 정리 및 복습 (0) | 2021.12.25 |
CSS diner 정답 및 풀이 복습 (0) | 2021.12.24 |