자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다.
⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️
HTML
HTML이란?
HTML은 이미지, 텍스트 또는 비디오와 같이 웹사이트에 나타나는 콘텐츠에 구조를 제공한다.
인터넷에서 아무 페이지를 마우스 오른쪽 단추로 클릭하고 "Inspect"를 선택하면 화면의 패널에 HTML이 나타난다.
HTML은 HyperText Markup Language의 약자:
- Markup 언어는 raw text의 구조와 표시를 정의하는 컴퓨터 언어다.
- HTML에서 컴퓨터는 HTML elements로 포장된 raw text를 해석할 수 있다.
- Hypertext는 Hyperlinks고도 하는 링크를 통해 다른 텍스트에 대한 액세스를 제공하는 컴퓨터 또는 장치에 표시되는 텍스트다.
HYML Anatomy
HTML은 elements(요소)로 이루어져있다. 이러한 elements는 웹 페이지를 구성하고 그 내용을 정의한다.
HTML paragraph element
- opening tag (<p>)
- content (“Hello World!” text)
- closing tag (</p>)
Tag와 contents를 HTML element라 하며, 텍스트와 이미지 같은 다른 종류의 contents를 구성하고 표시하는 데 사용할 수 있는 tag가 많이 있다.
- HTML element(element\) - HTML tag와 HTML tag에 포함된 텍스트 또는 미디어에 의해 형성된 HTML 문서의 내용 단위.
- HTML Tag - opening(<)과 closing(>) 각괄호로 둘러싸인 element의 이름
- Opening Tag- HTML element를 시작하는 데 사용되는 첫 번째 HTML 태그. 태그 유형은 개폐(<>) 각괄호로 둘러싸여 있다.
- Content - HTML element의 opening 과 closing tag 사이에 포함된 정보(텍스트 또는 기타 요소)
- Closing Tag - HTML element를 종료하는 데 사용되는 두 번째 HTML 태그. closing tag에는 왼쪽 꺾쇠 괄호 바로 뒤에 슬래시(/)가 있다.
BODY
Body element: 웹페이지를 만들기 위해 사용하는 주요 HTML 요소 중 하나. opening 과 closing body tag 안의 내용만 화면에 표시할 수 있다.
opening과 closing body tag 사용법:
<body>
</body>
파일에 body가 포함되면, 텍스트, 이미지, 버튼 등 다양한 유형의 콘텐츠를 본문에 추가할 수 있다.
<body>
<p>오늘 날씨 어떄요?</p>
</body>
HTML structure
HTML은 family tree relationship의 모음으로 구성된다.
위의 예시에서, <body> tag <p> tag를 배치했다.
하나의 요소(element)가 다른 요소 안에 포함되어 있으면, 해당 요소의 하위 요소(자식 요소, child element)로 간주된다.
하위 요소는 상위 요소(부모 요소, parent element) 내부에 중첩되어 있다.
<body>
<p>This paragraph is a child of the body</p>
</body>위의 예에서 <p> 요소는 <body> 요소 안에 내포되어 있다. <p> 요소는 <body> 요소의 하위 요소로 간주되고, <body>요소는 상위 요소로 간주된다.
(*코드 작성 시 가독성readability)을 위해 스페이스바를 사용하여 두 개의 들여쓰기를 추가한다.)
여러 단계의 nesting이 있을 수 있기 때문에, 이 비유는 손자, 증손자, 그 이상으로 확대될 수 있다.
요소들과 요소들의 조상들과 하위 요소들 사이의 관계를 계층구조(hierarchy)라고 한다.
<body>
<div>
<h1>Sibling to p, but also grandchild of body</h1>
<p>Sibling to h1, but also grandchild of body</p>
</div>
</body>이 예에서 <div> 요소는 <body> 요소의 상위 요소이다.
<h1>과 <p> 요소는 모두 <div> 요소의 하위 요소이다.
<h1>과 <p> 요소는 같은 수준이기 때문에, 그들은 형제자매(siblings)로 간주되고 둘 다 <body> 요소의 손자요소이다.
Question: <body>요소가 <html> 요소에 중첩되었다(nested)고 할 수 있는가?
맞다. <html> 태그는 모든 페이지의 root elements이며 항상 <head> 와 <body> 하위 요소가 있어야한다.
<head>와 <body> 요소는 서로 형제자매(sibilings)이고 <html> 부모에게는 자식이다.
Heading
HTML에서 Heading은 기타 미디어 유형의 제목과 비슷하다.
HTML은 여섯개의 다른 제목(Heading), 또는 제목 요소(Heading element)가 있다.
Heading은 목적의 titling section, article, 또는 콘텐츠의 다른 형태와 같이 다양한 형태로 사용될 수 있다.
- <h1> — 주 제목에 사용된다. 더 작은 머리글은 부제목에 사용된다.
- <h2>
- <h3>
- <h4>
- <h5>
- <h6>
아래와 같은 형태로 사용된다.
<h1>무야호1</h1>
<h2>무야호2</h2>
<h3>무야호3</h3>
<h4>무야호4</h4>
<h5>무야호5</h5>
<h6>무야호6</h6>무야호1
무야호2
무야호3
무야호4
무야호5
무야호6
* 세밀하게 font size를 조절할 경우 CSS를 이용한다.
Divs
HTML에서 가장 인기 있는 요소 중 하나는 <div>요소이다.
<div>는 "분할(divisin)" 또는 페이지를 섹션으로 나누는 컨테이너의 약어이다.
이 섹션은 HTML의 요소를 그룹화하는 데 매우 유용하다.
<body>
<div>
<h1>Why use divs?</h1>
<p>Great for grouping elements!</p>
</div>
</body>
<div>는 본래 시각적 표현은 없지만 HTML 요소에 사용자 지정 스타일을 적용하고자 할 때 매우 유용하다.
<div>는 내부의 모든 HTML 요소에 동일한 스타일을 적용하기 위해 HTML 요소들을 그룹화할 수 있게 해준다.
또한 전체적으로 <div> 요소를 스타일링할 수 있다.
<div>는 링크, 이미지 또는 비디오와 같은 텍스트 또는 기타 HTML 요소를 포함할 수 있다.
가독성(readiability)을 위해 <div> 내부에 요소를 내포할 때는 항상 두 칸의 들여쓰기를 추가한다.
Attibutes
요소의 태그를 확장하기 위해 속성(attribute)을 사용한다.
속성은 요소의 시작 태그(opening tag)에 추가된 내용이며, 정보 제공에서 스타일 변경까지 다양한 방법으로 사용할 수 있다.
속성은 다음 두 부분으로 구성된다.
- 속성(attribute)의 이름(name)
- 속성(attribute)의 값(value)
일반적으로 사용되는 속성 중 하나는 id 속성 (individual)이다.
id 속성을 사용하여 다른 내용(예: <div>)을 지정할 수 있으며 하나의 요소를 두 번 이상 사용할 때 유용하다.
<div id="intro">
<h1>Introduction</h1>
</div>* <div> 요소가 아니더라도, 모든 opening <html> tag는 id 속성을 가질 수 있다.
태그를 여러 가지 방법을 확장할 수 있는 여러 가지 속성 유형이 있다.
일반적으로 속성은 요소의 동작을 변경하거나 요소에 대한 메타데이터를 제공하거나 요소에 대한 레이블 정보를 제공한다.
예를 들어, <id> 속성은 요소를 고유하게 식별하는 반면 <class> 속성은 요소의 전체 그룹을 식별한다.
그런 다음 이 레이블링 정보를 사용하여 스타일링, 스크립팅 또는 (id 속성의) 링크에 대한 내용을 지정할 수 있다.
(출처: https://www.codecademy.com/articles/classes-vs-ids)
Displaying Text
HTML에서 텍스트를 표시하려면, 단락(paragraph) 또는 범위(span)를 사용할 수 있다.
- Paragraph(<p>)에는 일반 텍스트 블록이 포함되어있다.
- <span>에는 짧은 텍스트나 다른 HTML이 포함되어있다. 다른 콘텐츠와 동일한 라인에 있는 작은 콘텐츠를 분리하는 데 사용된다.
<div>
<h1>Entertainment</h1>
</div>
<div>
<p><span>Muhan Dojeon</span> is the best entertainment I've ever seen.</p>
</div>위의 예에서는 두 가지 다른 <div>가 있다.
두 번째 <div>에는 <span>Muhan Dojeon</span>과 함께 하나의 <p>가 내재되어 있다.
<span>요소는 "무한도전"과 단락(paragraph)의 나머지 텍스트를 구분한다.
<span> vs <div>
<span>: inline 또는 다른 텍스트와 같은 줄에 있는 특정 내용을 대상으로 지정하려면 <span> 요소 사용 (better)
<div>: 콘텐츠를 블록으로 나누려면 <div>를 사용 (better)
Question: <span>은 정확히 무엇을 위해 사용되는가?
- <span>은 물리적 변화가 나타나지 않는다. 텍스트 표시용이라는 점에서 <p> 태그와 같지만, 새로운 줄을 시작하지 않는다는 점에서 다르다. (즉, inline이라는 것).<span>은 주로 CSS에 도달한 후에 문단(paragraph)의 한 부분을 다른 부분과 다르게 스타일링할 수 있도록 도와주는 데 사용된다. 또한 콘텐츠를 스타일링할 수 있도록 하기 위해 존재하는 요소로도 사용된다.
(출처: https://discuss.codecademy.com/t/what-exactly-is-span-used-for/399175
Styling Text
HTML 태그를 사용하여 텍스트를 스타일링할 수 있다.
- <em>는 기울임꼴(italic)로 텍스트 강조
- <strong>는 굵게(bold)로 텍스트 강조
<p><strong>The Nile River</strong> is the <em>longest</em> river in the world,
measuring over 6,850 kilometers long(approximately 4,260 miles).</p>The Nile River is the longest river in the world, measuring over 6,850 kilometers long (approximately 4,260 miles).
와 같이 <em>과 <strong>이 사용된다.
Line Breaks
HTML 파일의 코드 간 간격은 브라우저의 요소 위치에 영향을 주지 않는다.
브라우저의 간격을 수정하고자 하는 경우 HTML의 줄 바꿈 요소(line break element)인 <br>을 사용한다.
줄 바꿈 요소(line break element)는 시작 태그(starting tag, opening tag)로만 구성된다.
HTML 코드 내에서 어디서나 사용할 수 있으며 브라우저에 줄 바꿈이 표시된다.
<p>The Nile River is the longest river <br> in the world, measuring over 6,850 <br>
kilometers long (approximately 4,260 <br> miles).</p>The Nile River is the longest river
in the world, measuring over 6,850
kilometers long (approximately 4,260
miles).
Unordered List
특정한 순서 없이 목록을 작성한 순서가 없는 목록(Unordered List) tag(<ul>)
Unordered List는 글머리 기호(bullet point)가 있는 개별 목록 항목(list items)으로 나타난다.
<ul> 요소는 raw text를 가지지 않아야 하며, raw text를 순서 없는 목록으로 자동 포맷하지 않아야 한다.
<li> tag를 사용하여 순서가 없는 목록에 개별 목록 항목을 추가한다.
<li> 또는 목록 항목 태그(list item tag)는 목록의 항목을 설명하는 데 사용된다.
<ul>
<li>무한도전</li>
<li>해피투게더</li>
<li>런닝맨</li>
</ul>- 무한도전
- 해피투게더
- 런닝맨
Ordered List
순서 목록(Oredered Lists)(<ol>)은 각 목록 항목에 번호가 매겨져 있다는 점을 제외하고는 순서가 없는 목록과 동일
공정에서 다른 단계를 나열하거나 항목을 맨 처음에서 맨 끝까지 순위를 매겨야 할 때 사용
<ol> 태그로 정렬된 목록을 만든 다음 <li> 태그를 사용하여 개별 목록 항목을 목록에 추가한다.
<ol>
<li>에어프라이어를 3분간 180도로 가열한다.</li>
<li>닭 가슴살에 올리브유를 바르고 소금과 후추를 뿌린다.</li>
<li>가열된 에어프라이어에 닭 가슴살을 넣고 180도로 10분간 가열한다.</li>
<li>10분 후 꺼내서 맛있게 먹는다.</li>
</ol>- 에어프라이어를 3분간 180도로 가열한다.
- 닭 가슴살에 올리브유를 바르고 소금과 후추를 뿌린다.
- 가열된 에어프라이어에 닭 가슴살을 넣고 180도로 10분간 가열한다.
- 10분 후 꺼내서 맛있게 먹는다.
Question: <li> 요소는 text만 가질 수 있는가?
- <li> 요소는 <body> 태그 내에서 유효한 모든 요소를 포함할 수 있다.
비디오, 이미지, 노래, 하이퍼링크 또는 그 조합의 목록을 가질 수 있다.
(출처: https://discuss.codecademy.com/t/can-the-li-element-contain-content-other-than-text/297762
Images
<img> 태그를 사용하여 웹 페이지에 이미지를 추가한다.
대부분의 요소에는 opening tag와 closing tag가 모두 필요하지만, <img> tag는 Self-closing tag 이다.
<img> 태그의 끝에는 슬래시/가 있다.
self-closing tag는 최종 슬래시를 포함하거나 생략할 수 있으며, 둘 다 제대로 렌더링된다.
<img src="image-location.jpg" /><img> 태그에는 src라는 필수 attribute(속성)이 있다.
src 속성은 이미지의 원본(source) 또는 이미지 위치로 설정해야 한다.
이 경우 src 값은 이미지의 URL(Uniform Resource Locator)이어야한다.
(URL: Uniform Resource Locator, 파일이 저장되는 웹 주소 또는 로컬 주소)
Image Alts
웹을 보다 포괄적으로 만들기 위해 화면 판독기와 같은 보조 기술이 이미지 태그를 발견했을 때 어떤 일이 발생할지 고려해야 한다.
대체 텍스트를 의미하는 alt 속성은 사이트의 이미지에 의미(meaning)를 부여한다.
alt 속성은 src 속성과 마찬가지로 이미지 태그에 추가할 수 있다.
alt 값은 이미지에 대한 설명으로 사용된다.
<img src="#" alt="A field of yellow sunflowers" />alt 속성의 사용 용도
- 이미지를 웹 페이지에 로드하지 못하면 사용자는 이미지를 원래 의도했던 영역에 마우스를 올려놓고 이미지에 대한 간단한 설명을 읽을 수 있다. 이 작업은 alt 속성에 제공하는 설명을 통해 가능하다.
- 시각 장애가 있는 사용자는 종종 화면 판독 소프트웨어를 사용하여 웹을 탐색한다. alt 속성을 포함하면 화면 판독 소프트웨어가 시각 장애가 있는 사용자에게 이미지의 설명을 큰 소리로 읽어 줄 수 있다.
- alt 속성은 검색 엔진이 인터넷을 탐색할 때 웹 사이트의 이미지를 "보기"할 수 없기 때문에 검색 엔진 최적화(Search Engine Optimization)(SEO)에서도 역할을 한다. 설명적인 alt 속성을 가지면 사이트 순위가 향상될 수 있다.
Videos
HTML은 이미지 외에도 동영상 표시도 지원한다.
<img> 태그와 마찬가지로, <video> 태그는 비디오 소스로 연결되는 링크가 있는 src 속성을 필요로 한다.
그러나 <img> 태그와 달리 <video> 요소는 opening tag와 closing tag가 필요하다.
<video src="myVideo.mp4" width="320" height="240" controls>
Video not supported
</video>위의 예시에서 비디오 소스(src)는 myVideo.mp4 이다.
소스는 웹 페이지와 함께 호스팅되는 비디오 파일 또는 다른 웹 페이지에서 호스팅되는 비디오 파일을 가리키는 URL일 수 있다.
src 속성 다음에는 너비(width) 및 높이(height) attribute을 사용하여 브라우저에 표시되는 비디오의 크기를 설정한다.
controls 속성은 브라우저에 일시 중지, 재생 및 건너뛰기와 같은 기본 비디오 컨트롤을 포함한다.
opening 과 closing video tag 사이에 "Video not supported"라는 텍스트가 브라우저가 비디오를 로드할 수 없는 경우에만 표시된다.
Question: video tag에도 alt 속성을 사용할 수 있는가?
- opening video tag에서 alt 속성을 사용할 수 없다.
실제로 비디오 요소에 일부 예비 옵션을 포함하기를 원하기 때문에 alt 속성을 사용할 수 없게 설계되었다.
예를 들어 비디오가 로드되지 않으면 로드되는 다른 비디오에 대한 링크를 표시할 수 있다. 속성에는 markup을 포함할 수 없으므로 alt 속성만으로는 이 시나리오를 사용할 수 없다. - 하지만 title attribute는 video 요소에 유효하다.
<video title="Bruce Lee meets Jackie Chan" ...>(출처: https://discuss.codecademy.com/t/can-we-use-an-alt-attribute-with-the-video-tag/300322)
참고
Web Development Fundamentals: Learn HTML: Elements Cheatsheet | Codecademy
Learn about HTML elements and structure, the building blocks of websites.
www.codecademy.com
- HTML attribute reference (https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes)
'IT > HTML' 카테고리의 다른 글
| Semantic HTML (0) | 2021.05.01 |
|---|---|
| HTML: Tables (0) | 2021.04.30 |
| HTML: Structure (0) | 2021.04.26 |
댓글