HTML(Hypertext Markup Language)은 웹페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다.
<그래서 HTML은 무엇일까요?>
HTML은 컨텐츠의 구조를 정의하는 마크업 언어입니다.
HTML은 컨텐츠의 서로 다른 부분들을 씌우거나(wrap) 감싸서(enclose) 다른 형식으로 보이게 하거나 특정한 방식으로 동작하도록 하는 일련의 요소(elements)로 이루어져 있습니다.
tags로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크(hyperlink)하거나 단어들을 이탤릭체로 표시하고 글씨체를 크게 또는 작게 만드는 등의 일을 할 수 있습니다.
ex) 어느 한 줄의 문장이 독립적인 구문이길 원한다면, 문단 태그(paragraph tags)로 둘러쌈으로 해서 그것이 하나의 문단임을 알 수 있습니다.
<p>My cat is very grumpy</p>
HTML 요소 분석
1. 여는 태그(opening tag)
이것은 요소의 이름으로 구성되고 여닫는 꺾쇠괄호로 감싸집니다. 요소가 시작되는 곳, 또는 효과를 시작하는 곳임을 나타냅니다.
ex) 위 예시에서는 <p> 부분이 해당되고, 문단이 시작되는 위치를 나타냅니다.
2. 닫는 태그(closing tag)
요소의 이름 앞에 전방향 슬래시가 포함됩니다. 요소의 끝을 나타냅니다.
ex) 위 예시에서는 </p> 부분이 해당되고, 문단이 끝나는 위치를 나타냅니다.
3. 컨텐츠(content)
이것은 요소의 내용을 말합니다.
ex) 위 예시에서는 그냥 text 부분인 My cat is grumpy가 해당됩니다.
4. 요소(element)
요소 하나는 여는 태그, 닫는 태그, 그리고 컨텐츠로 이루어집니다.
ex) 위 예시 전체가 하나의 요소가 됩니다.
요소는 속성(attribute)도 가질 수 있는데 다음과 같이 사용합니다.
<p class="editor-note">My cat is very grumpy</p>
속성은 실제 컨텐츠로 표시되길 원하지 않는 추가적인 정보를 담고 있습니다.
위 예제에서는 class 속성을 이용해 나중에 해당 요소를 특정해 스타일이나 다른 정보를 설정할 때 사용할 수 있는 식별자를 지정할 수 있습니다.
- 속성이 항상 가져야 하는 것
1. 요소 이름과 속성 사이에 공백이 있어야 합니다. 하나 이상의 속성이 이미 존재한다면 이전 속성과 속성 사이에도 공백이 있어야 합니다.
2. 속성 이름 뒤에는 등호(=)가 와야 합니다.
3. 속성 값의 앞 뒤에 열고 닫는 인용부호(" "이나 ' ')가 있어야 합니다.
요소 중첩
여러분은 요소를 다른 요소의 안에 놓을 수 있는데 이것을 "중첩" 이라고 합니다.
예를 들어 다음과 같이 단어를 강조하는 용도로 사용하는 <strong> 요소로 감싸 특정 글씨를 굵게 만들 수 있습니다.
<p>My cat is <strong>very</strong> grumpy</p>
요소가 올바르게 중첩되었는지 항상 확인해야 합니다.
위의 경우 우리는 <p> 요소를 먼저 열었고 그 다음 <strong>을 열었기 때문에 strong 요소를 먼저 닫고 그 다음에 p를 닫아야 합니다.
빈 요소
내용(content)을 가지지 않는 요소를 빈 요소라고 합니다. 예로 다음과 같은 <image> 요소가 있습니다.
<img src="images/firefox-icon.png" alt="My test image">
위 요소는 두 개의 속성을 포함하고 있으나 닫는 </img> tag가 없습니다. 이미지 요소는 효과를 주기 위해 컨텐츠를 감싸지 않기 때문입니다.
- src(source) 속성
이미지가 나타나야 할 위치에 이미지를 끼워 넣을 수 있게 해 주는 요소입니다.
이미지 파일의 경로를 적어주면 됩니다.
- alt(alternative) 속성
이미지를 볼 수 없는 사용자들을 위한 설명문을 지정할 수 있습니다.
시각 장애자인 경우, alt 텍스트를 읽어주는 스크린 리더라는 도구를 이용하여 웹사이트를 이용하므로 alt가 필요합니다.
또는 무언가 잘못되어 이미지를 표시할 수 없는 경우, 이미지가 표시되어야 할 위치에 alt 속성 안에 적어 준 것을 볼 수 있게 됩니다.
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>
아주 오래전 HTML이 막 나왔을 때 doctype은 자동 오류 확인이나 다른 유용한 것이 가능한 좋은 HTML로 인정받기 위해 HTML 페이지가 따라야 할 일련의 규칙으로의 연결통로로써 작동하는 것을 의미하였습니다.
but 최근에는 그저 모든 것이 올바르게 동작하게 하기 위해 포함되어야 할 역사적인 유물같은 코드로 여겨진다.
- <html></html>
페이지 전체의 컨텐츠를 감싸며, 루트(root) 요소라고도 합니다.
* 루트 요소: 트리 구조로 구성된 요소 가운데 최상위 요소
- <head></head>
HTML 페이지에 포함되어 있는 모든 것들(여러분의 페이지를 조회하는 사람들에게 보여주지 않을 컨텐츠)의 컨테이너 역할을 합니다.
여기에는 keywords와 검색 결과에 표시되길 원하는 페이지 설명, 컨텐츠를 꾸미기 위한 CSS, 문자 집합 선언 등과 같은 것들이 포함됩니다.
* keyword: 콘텐츠를 설명하는 단어입니다. 온라인 키워드는 검색 엔진에 대한 쿼리 또는 웹 사이트의 콘텐츠를 식별하는 단어로 사용됩니다.
- <body></body>
페이지에 방문한 모든 웹 사용자들에게 보여주길 원하는 모든 컨텐츠를 담고 있습니다.
컨텐츠는 텍스트, 이미지, 비디오, 게임, 오디오 트랙 등이 될 수 있습니다.
- <meta charset="utf-8">
이 요소는 문서가 사용해야 할 문자 집합을 utf-8로 설정합니다.
utf-8 문자 집합에는 인간의 방대한 주류 기록언어에 있는 대부분의 문자가 포함되어 있어서 여러분이 사용할 수 있는 어떤 문자 컨텐츠도 다 다룰 수 있습니다.
- <title></title>
페이지의 제목을 설정하기 위한 요소입니다.
페이지가 로드되는 브라우저의 탭에 이 제목이 표시됩니다.
북마크나 즐겨찾기에서 페이지를 설명하는 것으로도 사용됩니다.
<문자 나타내기>
제목
제목 요소는 여러분이 내용의 특정 부분이 제목 또는 내용의 하위 제목임을 구체화 할 수 있게 해줍니다.
HTML은 <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 이렇게 여섯 단계의 제목을 갖습니다. 이 중 <h3>, <h4>가 자주 쓰입니다.
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>
문단
<p>요소는 문자의 문단을 포함하기 위해 사용됩니다.
<p>This is a single paragraph</p>
목록
1. 순서 없는 목록: <ul> 요소로 둘러싸여 있습니다.
2. 순서 있는 리스트: <ol> 요소로 둘러싸여 있습니다.
목록의 각 항목은 <li> 요소 안에 놓여야 합니다.
<p>At Mozilla, we're a global community of</p>
<ul> <!--<ol>로 바꾸면 순서 있는 목록이 됩니다.-->
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together ...</p>
연결
<a> 요소에 hret 속성을 부여하고 속성의 값으로 여러분이 연결하길 원하는 웹 주소를 채우면 문장 안의 어떤 단어를 링크로 만들 수 있습니다.
<a href="https://www.mozilla.org/en-US/about/mainfesto/">Mozilla Manifesto</a>
웹 주소의 시작 부분에는 프로토콜이라고 불리는 https:// 또는 http:// 부분을 꼭 적어주어야 합니다.
적어주지 않으면 Not Found라는 예상치 못한 결과를 얻게 됩니다.
이 포스트를 위해 참고한 사이트는 다음과 같습니다.
HTML basics - Learn web development | MDN (mozilla.org)
HTML basics - Learn web development | MDN
HTML (HyperText Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this
developer.mozilla.org
'HTML & CSS' 카테고리의 다른 글
| [CSS] display (block, inline, inline-block, none) (0) | 2023.08.09 |
|---|---|
| [CSS] float와 clear (0) | 2023.08.08 |
| [CSS] Box Sizing (0) | 2023.08.07 |
| [CSS] Box Model (0) | 2023.08.07 |
| CSS 기초 (0) | 2023.01.17 |
댓글