1. HTML5의 기본 문법
1.1 요소 (Element)
HTML 요소는 시작태그(start tag)와 종료 태그(end tag) 그리고 태그 사이에 위치한
content로 구성된다.
HTML document는 요소(Element)들의 집합으로 이루어진다.1.1.1 요소의 중첩 (Nested Element)
요소는 중첩될 수 있다. 즉, 요소는 다른 요소를 포함할 수 있다.
이때 부자관계가 성립된다. 이러한 부자관계로 정보를 구조화하는 것이다.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>안녕하세요</h1>
<p>반갑습니다!</p>
</body>
</html>안녕하세요
반갑습니다!
html 요소는 웹페이지를 구성하는 모든 요소들을 포함한다.
위 예제를 보면 html 요소는 body 요소를 포함하며 body 요소는 h1, p 요소를 포함한다.
이 중첩 관계(부자 관계)로 웹페이지의 구조(structure)를 표현한다.
이런 중첩 관계(부자 관계)를 시각적으로 파악하기 쉽게 indent(들여쓰기)를 활용한다.
보기좋은 코드는 읽기 쉬우며 읽기 쉬운 코드는 좋은 코드이다.1.1.2 빈 요소 (Empty Element)
content를 가질 수 없는 요소를 빈 요소(Empty element or Self-Closing element)라 한다.
아래의 예와 같이 빈 요소는 content가 없으며(필요가 없다) Attribute(속성)만을 가질 수 있다.<meta charset="utf-8">빈 요소 중 대표적인 요소는 아래와 같다.
• br
• hr
• img
• input
• link
• meta1.2 어트리뷰트 (Attribute)
어트리뷰트(Attribute 속성)이란 요소의 성질, 특징을 정의하는 명세이다.
요소는 어트리뷰트를 가질 수 있으며 어트리뷰트는 요소에 추가적 정보(예를 들어 이미지 파일의
경로, 크기 등)를 제공한다.
어트리뷰트는 시작 태그와 위치해야 하며 이름과 값의 쌍을 이룬다.
<img src="html.jpg" width="104" height="142">위의 예에서 어트리뷰트 src는 이미지 파일의 경로와 파일명, width는 이미지의 너비,
height는 이미지의 높이 정보를 브라우저에 알려준다.
이 정보들을 사용하여 브라우저는 img 요소를 화면에 출력한다.1.2.1 글로벌 어트리뷰트 (HTML Global Attribute)
글로벌 어트리뷰트는 모든 HTML 요소가 공통으로 사용할 수 있는 어트리뷰트다.
몇몇 요소에는 효과가 적용되지 않을 수 있지만, 글로벌 어트리뷰트는 대체로 모든 요소에
사용될 수 있다.
자주 사용되는 글로벌 어트리뷰트는 아래와 같다.
1.3 주석 (Comments)
주석(comment)는 주로 개발자에게 코드를 설명하기 위해 사용되며 브라우저는 주석을
화면에 표시하지 않는다.<!--주석은 화면에 표시되지 않는다.-->
<p>Lorem ipsum dolor sit amet</p>Lorem ipsum dolor sit amet
블로그 이전했습니다 -> https://young-code.tistory.com