프론트엔드 #1 HTML에 대해서
사실 프론트엔드 부분은 몇개월전 부터 공부를 시작했다. microsoft의 ONE NOTE라는 전자필기장으로 혼자 공부하며 필기했었는데, 다른 사람들과도 공유하면 싱크(?)가 안맞고 필기했던게 다 꼬인다. 이번에 개발 블로그를 시작했으니 지금까지 필기하고 공부했던 부분을 여기다가 복습도 할 겸 다시 포스팅하기로 했다.
1. HTML 이란?
HTML : Hyper Text Markup Language의 약자
HTML은 브라우저에서 실행 가능한 가장 기본적인 파일, HTML은 Markup언어로 구조적으로 이루어져있다.
Html 의 기본적인 구조
<!DOCTYPE html> --> 도큐먼트 타입은 html이라고 정의
<html>
<head> --> 사용자에게 보여지는 UI적인 요소가 아님 메타데이터만 존재 (상세설명)
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body> --> 사용자에게 보여지는 최소한의 컴포넌트 UI (유저에게 보여지는 부분)
<h1>Heading1</h1> --> 제일 큰 태그
<h2>Heading2</h2> --> 그 다음 작은 태그
<button>click</button> --> 버튼 태그
</body>
</html>결과화면
<h1> 태그의 제일 큰 크기의 Heading1
<h2> 태그의 그 다음 큰 크기의 Heading2
<button> 태그의 진짜 클릭이 가능한 버튼 'click!'
HTML 코드를 텍스트로만 적었을 뿐인데 어떻게 이쁘게 꾸며져서 나오게 되는가??
바로 W3C!! (World Wide Web Consortium) : 웹의 표준화를 추진하는 곳!!!
<Chrome, Firefox, safari, Edge>
<지원가능하고 더 다양한 태그들을 확인할 수 있는 사이트>
Mdn : https://developer.mozilla.org/en-US/docs/Web
--> 물론 더 이상 지원안되는 태그들도 볼 수 있고, 태그들의 사용예제도 볼 수 있다.
※ HTML은 이상한 태그를 입력해 넣어도 동작은 한다.
<body> 태그에
<mathPlus>I'm MathPlus!!</mathPlus>
를 입력해서 실행해보았다.
결과는?
<유효한 태그를 사용했는지 확인할 수 있는 사이트>
The W3C Markup Validation Service
Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.
validator.w3.org
Validate by Direct Input 탭을 클릭해서 HTML 코드를 직접 복붙해서 유효성 검사를 진행해보았다.
보다시피 에러문구가 뜬다. 이런식으로 코드의 유효성을 확인할 수 있다.