들어가기 앞서..
TIL은 Today I Learned로서 배웠던 정보를 간략하게 정리하는 글입니다.
참고로 배운 내용은 https://poiemaweb.com/html5-syntax
poiemaweb홈페이지를 참고 하였습니다.
무엇을 배울까 ?
HTML기본 문법, 주석, 요소 , 빈요소, 어트리뷰트, 속성
HTML 기본 문법
HTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다.
다음은 HTML은 기본 코드이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>안녕하세요</h1>
<p>반갑습니다!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>안녕하세요</h1>
<p>반갑습니다!</p>
</body>
</html> - HTML5 문서는 반드시 !DOCTYPE html 으로 시작하여 문서 형식을 HTML5로 지정한다.
- 실제적인 HTML document은 2행부터 시작되는데 (html)과 (/html) 사이에 기술한다.
- (head)와 (/head) 사이에는 document title, 외부 파일의 참조, 메타데이터의 설정 등이 위치하며 이 정보들은 브라우저에 표시되지 않는다.
- 웹브라우저에 출력되는 모든 요소는 (body)와 (/body) 사이에 위치한다.
요소 (Element)
HTML 요소는 시작 태그(start tag)와 종료 태그(end tag) 그리고 태그 사이에 위치한 content로 구성된다.
빈 요소 (Empty Element)
빈 요소는 단일로 행동하며 요소를 닫는 행위를 하지 않는다
대표적인 빈요소는 아래와 같다.
어트리뷰트 (Attribute) 속성
어트리뷰트는 속성 값이다. 속성값으로 요소에 추가적 정보(예를 들어 이미지 파일의 경로, 크기 등)를 제공한다. 어트리뷰트는 시작 태그에 위치해야 하며 이름과 값의 쌍을 이룬다.
<img src="html.jpg" width="104" height="142">
<img src="html.jpg" width="104" height="142">위의 요소는 img요소로 파일명과 넓이, 높이의 속성을 가지고 있다.
글로벌 어트리뷰트 (HTML Global Attribute)
글로벌 어트리뷰트는 모든 HTML 요소가 공통으로 사용할 수 있는 어트리뷰트다.
주석 (Comments)
주로 개발자에게 코드를 설명하기 위해 사용되며 브라우저 화면에 표시되지 않는다.
<!--주석은 화면에 표시되지 않는다.-->
<!--주석은 화면에 표시되지 않는다.-->
프론트엔드 개발자 초보에서 고수까지!