[HTML/CSS] #1 HTML이해하기

9687 단어 htmlCSSCSS

HTML: Hyper Text Markup Language
Hyper Text=링크
Markup Language: 구조적, 계층적으로 표현이 가능한 프로그래밍 언어
확장자: .html

1. 태그

태그(TAG): 무언가를 표시하기 위한 이름표, 마크업 언어에서 사용된다.
시작 태그(여는 태그): <>로 표현
종료 태그(닫는 태그): </>로 태그 이름 앞에 /기호가 붙는다.
내용(Content): 시작 태그와 종료 태그 사이에 적는 내용
요소(Element): 내용을 포함한 태그 전체

<h1>Hello, HTML</h1>

<h1>이 시작 태그, </h1>이 종료 태그, Hello, HTML이 내용, <h1>Hello, HTML</h1>이 요소이다. h1은 태그 이름이다.

2. 속성

속성은 이름과 값으로 이루어져 있다.
시작 태그에서 태그 이름 뒤에 공백으로 구분 후 속성 이름="속성값"으로 표현한다.
여러 속성을 선언할 때는 공백으로 구분해서 사용한다.

<h1 id='title' class='main'>Hello, HTML</h1>

위의 예시는 2가지 속성을 선언한 것이고, id와 class는 속성이름이고, 'title','main'은 속성 값이다.

속성은 모든 태그에 사용할 수 있는 글로벌 태그와, 일부 태그에만 사용 가능한 속성이 있고, 선택적으로 사용할 수 있는 속성이 있고, 필수적으로 사용할 수 있는 속성이 있다.

3. 태그 중첩

태그 안에 다른 태그를 선언할 수 있다. 부모태그는 밖에 있는 태그이고 자식태그는 안에 있는 태그이다. 중첩되는 태그는 부모태그를 벗어나면 안된다. 태그 중첩은 여러번 되도 상관없지만 일부의 경우 정해진 태그만 중첩 가능한 경우도 있다.

<h1>Hello, <i>HTML</h1></i>
<h1>Hello, <i>HTML</i></h1>

위의 예시에서 첫 번째 줄은 부모태그가 종료된 이후에 자식 태그가 종료되었으므로 잘못 사용되었고 두 번째 줄처럼 태그를 선언해야 한다.

4. 빈 태그

태그는 기본적으로 시작코드와 종료코드가 쌍을 이루지만 그렇지 않은 경우가 있다. 이러한 태그를 내용이 없는 빈 태그라고 한다.
빈태그는 내용이 없어서 종료 태그가 필요하지 않다.
빈태그의 예시

<br>
<img src="">
<input type="">

빈 태그는 내용만 비어있을 뿐 속성을 통해서 화면에 나타내거나 화면에 표시되지 않더라도 다른 용도로 사용되는 태그다. 빈 태그의 대표적인 경우는 브라우저가 직접 화면에 내용을 그려줘야 하는 경우이다. 이런 태그는 브라우저가 내용을 대체한다고 하여 replacement 태그, 대체되는 태그라고 한다. 빈 태그에 대체되는 태그만 있는 것은 아니며 실제로 화면에 출력될 내용이 없어 다른 용도로 쓰이는 태그도 존재한다.

5. 공백

HTML은 2칸 이상의 공백은 무시한다.

<h1>Hello, HTML</h1>
<h1>Hello,     HTML</h1>
<h1>
    Hello,
    HTML
</h1>

그래서 위의 예시의 경우 모두 같은 결과가 나온다.

6. 주석

HTML의 주석시작은 <!--로, 종료는 -->로 표현한다.
예시

<!-- 여기에 작성되는 내용들은 모두 주석 처리가 됩니다. -->
<!-- 주석은 여러 줄로 작성할 수도 있습니다.
    <h1>Hello, HTML</h1>
    위 <h1>태그는 브라우저가 해석하지 않습니다.
-->

7. 문서의 기본 구조

HTML의 기본 구조는 웹 문서를 작성할 때 반드시 들어가야 하는 기본적인 내용으로 크게는 문서 타입 정의와 <html>요소로 구분한다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTML</title>
    </head>
    <body>
        <h1>Hello, HTML</h1>
    </body>
</html>

문서 타입 정의(DTD(doctype)): 이 문서가 어떤 버전으로 작성되었는지 알려주는 선언문, 최상단에 선언되어야 한다.
문서 타입 선언 후에는 <html>태그가 나와야 하고, 자식으로는 <head>태그와 <body>태그가 있다.
<html> 태그의 lang 속성은 문서가 어느 언어로 작성되었는지를 의미한다.
<head>태그에 위치하는 태그들은 브라우저 화면에 표시되지 않는다. 대신 문서의 기본 정보 설정이나 외부 스타일 시트 파일 및 js 파일을 연결하는 등의 역할을 한다.
<meta> 태그의 charset 속성은 문자의 인코딩 방식을 지정한다.
<body>태그에는 실제 브라우저 화면에 나타나는 내용이 들어가며, 앞으로 우리가 다루는 태그들 대부분이 모두 여기에 해당이 된다.
위 코드는 가장 기본적인 문서 구조로, 보통은 이보다 더 많은 태그가 들어가게 된다.

cf) 태그 참고 링크
HTML doctype declaration
HTML html tag
HTML head tag
HTML body tag
HTML meta tag

프로 그래 밍 트 랜 잭 션, XML 설정 트 랜 잭 션, 주해 구현 트 랜 잭 션
포크 트리 @POJ1610 Quad Trees

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage