[mdn web docs 정리하며 읽기] _ HTML 시작, html 이란? html 요소의 구조, html 속성, html 문서 구조, html 특수문자

1. HTML이란?

HTML(Hypertext Markup Langage, 하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니지만,

우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어이다.

HTMl은 elements로 구성되어 있으며 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업한다.

그리고 tags는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나 단어를 강조하는 등의 역할을 한다.

Hello HTML! 이라는 문장을 그 자체로 표현하고 싶으면 태그 중  태그로 감싸 elements를 문단으로 명시할 수 있다.

<p>Hello HTML!!</p>

참고! html 요소는 대소문자를 구분하지 않는다. <title> 요소는 <TITLE>, <Title> 등과 같이 사용 가능하나
가독성을 위해 소문자로 작성함

2. HTML 요소(Element)의 구조

여는 태그(opening tag) : 요소의 이름과 열고 닫는 꺽쇠 괄호로 구성, 요소 시작부터 효과 적용
닫는 태그(closing tag) : 요소의 끝(단락의 끝 부분)에 위치하고 닫는 태그를 적어주지 않으면 오류남
내용(content) : 요소의 내용, 단순한 텍스트
요소(element) : 여는 태그, 닫는 태그, 내용을 통들어 요소(element)라고 함

2-1. 포함(내포)된 요소(Nesting elements)

요소 안에 다른 요소가 들어갈 수 있는데 이런 요소는 내포되었다고 표현한다.

Hello HTML 이라는 문단을 강조하기 위해서 'Hello'라는 단어를 강조하는 요소를 중첩하여 사용할 수 있다.

<p> <strong> Hello </strong> HTML </p>

2-2. 블록 레벨 요소 vs 인라인 요소(Block versus inline elements)

HTML에는 블록 레벨 요소와 인라인 요소, 두가지 종류의 요소가 있다.

블록 레벨 요소 (https://developer.mozilla.org/ko/docs/Glossary/Block-level_content)
웹페이지 상에 블록(block)을 만드는 요소
블록 레벨 요소는 앞뒤 요소 사이에 새로운 줄을 만들고 나타내는데
즉, 블록 레벨 요소 이전과 이후 요소사이의 줄을 바꾼다.
ex) 개발자는 블록 레벨 요소를 사용하여 단락(Paragraphs), 목록(list), 네비게이션 메뉴(Navigation Menus), 꼬리말(Footers) 등을 표현할 수 있음
그러나 블록 레벨 요소는 인라인 요소에 중첩될 수 없으나 다른 블록 레벨 요소엔 중첩 가능
인라인 요소(https://developer.mozilla.org/ko/docs/Glossary/Inline-level_content)
항상 블록 레벨 요소내에 포함되어 있다.
인라인 요소는 문서의 한 단락같은 큰 범위에는 적용될 수 없고 문장, 단어 같은 작은 부분에 대해서만 적용될 수 있다.
인라인 요소는 새로운 줄을 만들지 않는데
즉, 인라인 요소를 작성하면 그것을 작성한 단락내에 나타나게 된다.
ex) 하이퍼링크를 정의하는 요소 <a>, 텍스트를 강조하는 요소인 , 등

<em>first</em><em>second</em><em>third</em>

<p>fourth</p><p>fifth</p><p>sixth</p>

은 인라인 요소로, 3개의 요소는 서로 같은 줄에 나오고

는 블록 레벨 요소로 각 요소들은 새로운 줄에 나타나며 위 아래에 여백이 있다. (이는 기본 브라우저가 문단에 제공하는 기본 CSS styling때문에 적용되는 부분이다.)

2-3. 빈 요소(Empty elements)

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

ex) <img> 요소는 해당 위치에 이미지를 삽입하기 위한 요소

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

위에 대한 결과는 왼쪽 과 같이 나온다.

빈 요소는 가끔 Void 요소라고 불리기도 한다.

3. 속성(Attributes)

요소는 아래 이미지와 같이 속성을 가질 수 있다.

속성은 요소에 실제로 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용한다.

위의 사진은 스타일에 관련된 내용이나 기타 내용을 위해 해당 목표를 구분할 수 있는 class 속성을 부여했다.

속성을 사용할 때에는 다음과 같은 내용을 지켜야한다.

요소 이름 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 되고 하나 이상의 속성이 있는 경우엔 속성 사이에 공백이 있어야 한다.
속성 이름 다음엔 등호(=)가 붙는.
속성 값은 열고 닫는 따옴표로 감싸야 한다.

<a href="url 링크 주소">

a는 요소 href는 속성이므로 위의 내용과 비교해서 보면 지켜야하는 내용들을 쉽게 이애할 수 있다.

- href : 이 속성에는 내가 연결하고자 하는 웹 주소 지정

- title : 링크에 대한 추가 정보 ( 링크 위로 마우스를 옮겼을 때 나타남 )

- target : 링크가 어떻게 열릴 것인지 지정 ( target="_blank" 로 지정하면 링크를 새탭에서 보여주고 현재 탭에서 링크를 보여주고 싶으면 이 속성 생략하면 된다.)

3-1. 참과 거짓 속성(Boolean attributes)

값이 없는 속성도 볼 수 있는데 이건 허용된 것이고 이를 불린 속성이라고 한다.

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

예를 들어 disabled 속성을 양식 입력 요소에 할당하면 사용자가 데이터를 입력할 수 없도록 비활성화(회색으로 표시) 할 수 있다.

<input type="text" disabled>

<input type="text">

이는 위와 같은 결과를 보여준다.

3-2. 속성값의 따옴표 생략

속성값에 따옴표를 꼭 붙이는 것이 오류를 피할 수 있고 코드의 가독성이 좋아지기에 생략을 하면 안된다.

하지만 속성값이 하나인

<a href=https://www.mozilla.org/>favorite website</a>

위의 코드를 실행했을땐 문제가 없겠지만

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>

위의 코드처럼 title 속성이 추가되면 문제가 발생하게 된다. ""가 없기 때문에 title은 속성값 The와 두개의 불 속성값 Mozilla, homepage를 가진다고 생각 할 것이다.

3-3. 작은 따옴표, 큰 따옴표?

둘 중 아무거나 써도 상관은 없다.

<a href="http://www.example.com">A link to my example.</a>

<a href='http://www.example.com'>A link to my example.</a>

그렇기 때문에 위의 두 문장은 똑같이 동작을 한다.

하지만, 주의해야할 점은 두 개를 섞어서 쓰면 안된다는 것이다.

<a href="http://www.example.com'>A link to my example.</a>

" 큰 따옴표로 시작하여 ' 작은 따옴표로 둘러싸면 오류가 난다.

그리고 만약 문장 안에서 한가지의 따옴표를 사용했다면 다른 따옴표로 속성값을 둘러싸면 된다.

<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>

이렇게 Isn't에서 '를 사용했으니 속성값은 "" 큰 따옴표로 묶어서 구분 할 수 있게 해주면 된다.

4. HTML 문서의 구조

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

<!DOCTYPE html> : 문서 형식을 나타낸다. 유효한 문서 형식을 나타내는 짧은 문장
<html></html> : <html>의 요소이다. 전체 페이지의 콘텐츠를 포함, 기본 요소
<head></head> : <head>의 요소이다. 홈페이지 이용자에게는 보이지 않지만 검색 결과에 노출 될 키워드, 홈페이지 설명, CSS 스타일, character setdeclaration 등 HTMl 페이지의 모든 내용을 담고 있다.
<meta charset="utf-8"> : HTML 문서의 문자 인코딩 설정을 utf-8로 지정, 여기서 utf-8이라함은 전세계에서 사용되는 언어에 대한 대부분의 문자가 포함된 것이라고 할 수 있다. 이 설정을 통해 페이지에 포함된 모든 텍스트 내용을 처리할 수 있고 나중에 문자 인코딩과 관련된 일부 문제를 피하는데 도움이 될 수 있음
<title></title> : <title> 요소이다. 페이지 제목 설정, 페이지가 로드되는 브라우저 탭에 표시되는 제목으로 사용된다. 페이지 제목은 페이지가 책갈피될 때 페이지를 설명하는 데에도 사용
<body></body> : <body> 요소이다. 여기에는 텍스트, 이미지, 비디오, 게임, 재생 가능한 오디오 트랙 등을 비롯하여 페이지에 표시되는 모든 콘텐츠가 포함된다.

5. Entity references: HTML에 특수 문자 포함

HTML에서 문자 <, >, " 및 &는 특수 문자이다. 이들은 HTML 구문 자체의 일부라고 할 수 있다.

각 문자 참조는 앰퍼샌드 (&)로 시작하고 세미콜론 (;)으로 끝난다.

참고: HTML의 문자 인코딩이 UTF-8로 설정되어 있기 때문에 최신 브라우저는 실제 기호를 잘 처리하므로 다른 기호에 대해서는 엔티티 참조를 사용할 필요가 없다.

6. HTML의 주석

HTML 주석을 쓰려면 특수 마커 <!- 및 ->로 주석을 묶는다.

<p>I'm not inside a comment</p>

<!-- <p>I am!</p> -->

그럼 아래 주석을 단 문장은 출력이 되지 않는다.

저작자표시

'HTML' 카테고리의 다른 글

HTML 핵심 요소 정리, 블록(상자)요소, 인라인(글자)요소, 인라인(글자)요소 + 블록(상자)요소 = inline-block, 테이블 요소 (0)	2023.08.09
HTML 기본 문법, 요소, 부모와 자식관계, 태그 속성과 값, span, div 태그 (0)	2023.08.08
[mdn web docs 정리하며 읽기] _ head 태그, html의 메타데이터, head란? (0)	2023.07.23

💛HAPPYRIN💛

[mdn web docs 정리하며 읽기] _ HTML 시작, html 이란? html 요소의 구조, html 속성, html 문서 구조, html 특수문자

1. HTML이란?

2. HTML 요소(Element)의 구조

2-1. 포함(내포)된 요소(Nesting elements)

2-2. 블록 레벨 요소 vs 인라인 요소(Block versus inline elements)

2-3. 빈 요소(Empty elements)

3. 속성(Attributes)

3-1. 참과 거짓 속성(Boolean attributes)

3-2. 속성값의 따옴표 생략

3-3. 작은 따옴표, 큰 따옴표?

4. HTML 문서의 구조

5. Entity references: HTML에 특수 문자 포함

6. HTML의 주석

'HTML' 카테고리의 다른 글

티스토리툴바

[mdn web docs 정리하며 읽기] _ HTML 시작, html 이란? html 요소의 구조, html 속성, html 문서 구조, html 특수문자

1. HTML이란?

2. HTML 요소(Element)의 구조

2-1. 포함(내포)된 요소(Nesting elements)

2-2. 블록 레벨 요소 vs 인라인 요소(Block versus inline elements)

2-3. 빈 요소(Empty elements)

3. 속성(Attributes)

3-1. 참과 거짓 속성(Boolean attributes)

3-2. 속성값의 따옴표 생략

3-3. 작은 따옴표, 큰 따옴표?

4. HTML 문서의 구조

5. Entity references: HTML에 특수 문자 포함

6. HTML의 주석

'HTML' 카테고리의 다른 글

관련글

티스토리툴바

[mdn web docs 정리하며 읽기] _ HTML 시작, html 이란? html 요소의 구조, html 속성, html 문서 구조, html 특수문자