HTML 개요

WEB/HTML

HTML 개요

gartenhh 2021. 7. 15. 10:24

HTML이란?

Hypertext Markup Langauge

문서의 특정 텍스트 영역에 의미를 부여하고, 논리적 영역으로 구조화하며, 여러 콘텐츠를 삽입할 수 있게 해주는 요소들로 구성된 마크업 언어.

요소(Elements)

각 컨텐츠의 여러 부분을 감싸고 마크업
대소문자 구분하지 않는다(단, 가독성 등의 이유로 소문자로 주로 작성)

기본 구성

여는 태그(opening tag) : < 요소 이름 >
닫는 태그(closing tag) : </ 요소 이름 >
내용(content) : 요소의 내용

내포된 요소(Nesting elements)

요소 안에 다른 요소가 들어갈 수 있다. 이 때, 중첩되지 않게 열고 닫는 것이 잘 이뤄져야 한다.

블럭 레벨 요소(Block level element) vs 인라인 요소(Inline element)

블럭 레벨 요소

웹페이지 상에 블록을 만드는 요소. 앞뒤 요소 사이에 새로운 줄을 만들고 나타낸다. (줄 바꿈)

블록 레벨 요소는 주로 페이지의 구조적 요소를 나타낼 때 사용된다.

블록 레벨 요소는 인라인 요소에 중첩될 수 없지만, 다른 블록 요소에는 중첩될 수 있다.

인라인 레벨 요소

항상 블록 레벨 요소 안에 포함되어 있다. 문장, 단어와 같은 작은 부분에만 적용 가능하며 새로운 줄을 만들지 않는다.

e.g. <a>, <em>, <strong>

html5에서 요소 분류를 재정의했다.

빈 요소(Empty elements)

단일 태그(Single tag)를 사용하는 요소도 있다. 주로 문서에 무언가를 첨부하기 위해 사용한다.

e.g. <img>

void 요소라고 불리기도 한다.

속성(Attributes)

<p class="editor-note">My cat is very grumpy</p>

요소에 실제로 나타내고 싶지는 않지만 추가적인 내용을 담고 싶을 때 사용

요소 이름과 속성 사이에 공백 필요, 속성 사이에도 공백 필요
속성 이름 다음에는 = 붙음
속성 값은 따옴표로 감싸야 함

Boolean 속성

값이 없는 속성. 일반적으로 속성의 이름과 동일한 하나의 값만을 가질 수 있다.

e.g.

<input type="text" disabled="disabled">
//또는
<input type="text" disabled>

속성값의 따옴표 사용

따옴표를 생략하는 것이 허용되기도 하나, 여러 속성을 사용할 경우 마크업이 잘못 해석될 가능성이 있으므로 따옴표를 생략하지 않는 것이 좋다. (오류 또는 예상치 못한 동작 가능)
따옴표는 큰 따옴표 또는 작은 따옴표 모두 가능하다. (단, "string' 또는 'string"과 같이 섞어 쓰는 것은 불가능)
따옴표 안에 같은 따옴표를 쓰고 싶다면 HTML Entities를 사용하면 된다.( " -> ", ' -> ')
```
<a href='https://grdnr13.tistory.com/' title='What&apos;s up?'>example.</a>
```
e.g.

HTML 문서의 구조

개별 요소를 결합해 전체 HTML 페이지를 구성해보자!

예시)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test page</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

<DOCTYPE html> : 유효한 문서 형식을 나타내는 짧은 문장.
<html></html> : <html>요소. 페이지의 전체 컨텐츠를 포함한다.
<head></head> : <head>요소. 홈페이지 이용자에게는 보이지 않는다. 키워드, 홈페이지 설명, CSS 스타일 등을 담고 있다.
<meta charset="utf-8"> : HTML 문서의 문자 인코딩 설정을 UTF-8로 지정. 문자 인코딩 문제 일부 해결 가능
<title></title> : <title>요소. 페이지 제목을 설정한다. 브라우저 탭 또는 북마크에 표시되는 제목으로도 쓰인다.
<body></body> : <body>요소. 페이지에 표시되는 모든 콘텐츠를 포함

예시

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My hobbies</title>
  </head>
  <body>
    <h1>These are my hobbies</h1>
    <p><ul>
          <li><a href="https://open.spotify.com/">listening to <strong>music</strong></a></li>
          <li><a href="https://store.steampowered.com/">playing <strong>computer games</strong></a>
          </li>
    </ul></p>
  </body>
</html>

Entity references

HTML에서 <,>,',",&은 HTML 구문에 포함되는 특수문자다. 이런 특수문자를 텍스트에 포함하기 위해서는 문자 참조 코드를 이용해야 한다.

특수문자	문자 참조 코드
<	`<`
>	`>`
"	`"`
'	`'`
&	`&`

HTML 주석

<!-- 주석 -->

저작자표시 비영리 (새창열림)