HTML (Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다.
그래서 HTML은 무엇일까요?
HTML은 콘텐츠의 구조를 정의하는 마크업 언어 입니다. HTML은 콘텐츠의 서로 다른 부분들을 씌우거나 감싸서 다른 형식으로 보이게하거나 특정한 방식으로 동작하도록 하는 일련의 요소 로 이루어져 있습니다. 태그로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크하거나 단어들을 이탤릭체로 표시하고 글씨체를 크게 또는 작게 만드는 등의 일을 할 수 있습니다.
예를 들어) My cat is very grumpy -> <p>My cat is very grumpy</p>
이런 식으로 문단 태그를 둘러싸서 하나의 문단임을 명시 할 수 있다.
HTML 요소 분석
<p> My cat is very grumpy </p> -> 요소
여는 태그 (Opening tag) 콘텐츠 (Content) 닫는 태그 (Closing tag)
- 여는 태그 (Opening tag): 요소의 이름으로 구성 (여기서는 p), 여닫는 꺾쇠괄호로 감싸집니다. 이것은 요소가 시작되는 곳, 또는 효과를 시작하는 곳임을 나타냅니다. 이 예제에서는 문단이 시작되는 위치
- 닫는 태그 (Closing tag): 요소의 이름 앞에 전방향 슬래시가 포함된다는 점이 다릅니다. 이것은 요소의 끝을 나타냅니다. 이 예제에서는 문단이 끝나는 위치를 나타냅니다. 많이 하는 실수가 닫는 태그를 않써서 이상하게 표시되는 것
- 콘텐츠 (Content): 이것은 요소의 내용(content)으로 이 예제에서는 그냥 텍스트입니다.
- 요소 (Element): 요소는 여는 태그와 닫는 태그, 그리고 콘텐츠로 이루어집니다.
요소는 속성도 가질 수 있음.
<p class="editor-note"> My cat is very grumpy </p>
class="editor-note" -> 속성(Attribute)은 실제 콘텐츠로 표시되길 원하지 않는 추가적인 정보를 담고 있음. 그리고 클래스 속성을 이용해서 해당 요소를 특정해 스타일이나 다른 정보를 설정할 때 사용할 수 있는 식별자로도 지정 가능 합니다. 예외로 required같은 어떤 속성은 값을 가지지 않습니다.
속성이 항상 갖춰야 할 조건
- 요소 이름 (또는 요소가 하나 이상 속성을 이미 가지고 있다면 이전 속성)과 속성 사이에 공백이 있어야 합니다.
- 속성 이름 뒤에는 등호(=)가 와야 합니다.
- 속성 값의 앞 뒤에 열고 닫는 인용부호(" 또는 ')가 있어야 합니다.
요소 중첩
요소를 다른 요소 안에 중첩(nesting) 도 가능합니다. out cat is very grumpy 로 표시하려면 단어를 강조하는 용도로 사용하는<strong> 요소로 "very"를 감싸면 됩니다.
<p>My cat is <strong>very</strong> grumpy.</p>
그리고 위의 예제에서 우리는 <p> 요소를 먼저 열었고, 그 다음 <strong>을 열었습니다. 그러므로 <strong> 요소를 먼저 닫고, 다음으로 <p>를 닫아야 합니다. 다음은 잘못된 것입니다.
<p>My cat is <strong>very grumpy.</p></strong>
빈 요소
<img src="images/firefox-icon.png" alt="My test image">
이 요소는 두 개의 속성을 포함하고 있지만 닫는 </img> 태그가 없습니다. 이미지 요소는 효과를 주기 위해 콘텐츠를 감싸지 않기 때문입니다. 이 요소의 목적은 HTML 페이지에서 이미지가 나타날 위치에 이미지를 끼워 넣는 것입니다.
HTML 문서 해부
각 HTML 요소의 기본적인 내용들을 살펴봤습니다. 이제 각 요소들이 어떻게 전체 HTML 페이지를 구성하는지 살펴볼 차례입니다. 기본 html 코드 입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>- <!DOCTYPE html> — doctype. 필수 서문입니다. doctype은 자동 오류 확인이나 다른 유용한 것을 의미하는 좋은 HTML로 인정받기 위해 HTML 페이지가 따라야 할 일련의 규칙으로의 연결통로로써 작동하는 것을 의미
- <html></html> — <html> 요소. 이 요소는 페이지 전체의 콘텐츠를 감싸며, 루트(root) 요소라고도 합니다. 이것은 또한 문서의 고유 언어를 설정하는 lang 속성을 포함합니다.
- <head></head> — <head> 요소. 이 요소는 당신이 HTML 페이지에 포함하고 싶어하는 모든 재료들을 위한 컨테이너 역할을 합니다. 여기에는 keywords (en-US)와 검색 결과에 표시되길 원하는 페이지 설명, 콘텐츠를 꾸미기 위한 CSS, 문자 집합 선언 등과 같은 것들을 포함합니다.
- <meta charset="utf-8"> — 이 요소는 문서가 사용해야 할 문자 집합을 인간의 방대한 주류 기록언어에 있는 대부분의 문자가 포함되어 있는 utf-8으로 설정합니다. 본질적으로 여러분이 사용할 수 있는 어떠한 문자 콘텐츠도 다룰 수 있습니다.
- <meta name="viewport" content="width=device-width"> — 뷰포트 요소는 뷰포트의 너비에서 페이지가 렌더링하도록하며, 모바일 브라우저가 뷰포트보다 넓은 페이지를 렌더링한 후 축소하는 것을 방지합니다.
- <title></title> — <title> 요소. 이것은 페이지의 제목을 설정합니다, 로드된 페이지 브라우저의 탭에 나타나는 제목입니다. 이 요소는 북마크나 즐겨찾기에서 페이지를 설명하는 것으로도 사용됩니다.
- <body></body> — <body> 요소. 이것은 페이지에 방문한 모든 웹 사용자들에게 보여주길 원하는 모든 컨텐트를 담고 있으며, 그것이 텍스트일 수도, 이미지, 비디오, 게임, 플레이할 수 있는 오디오 트랙이나 다른 무엇이든 될 수 있습니다.
여기서 우리는 HTML 맛보기를 하였습니다.
'Front-End > Html | CSS' 카테고리의 다른 글
| css로 돌아가 업데이트(:is(),:has(),컴포넌트 반응형) (0) | 2025.02.08 |
|---|---|
| CSS button hover/active (0) | 2024.04.08 |
| display | position 차이 (0) | 2023.05.05 |
댓글