티스토리 뷰
1. HTML에 대한 소개
- HTML이란 무엇인가?
- HTML이란 모든 웹 페이지의 골격입니다.
- 이미지, 텍스트, 비디오와 같은 웹 사이트에 나타나는 콘텐츠에 구조를 제공합니다.
- HTML은 HyperTextMarkup 언어를 나타냅니다
- 마크업 언어는 태그 등을 이용하여 문서나 데이터의 구조를 정의하는 언어의 한 가지입니다.
2. HTML의 구조
- HTML들은 요소(elements)으로 구성되어 있습니다.
- 이러한 요소(elements)들은 웹 페이지를 구성하고 콘텐츠를 정의합니다.
- HTML 요소(elements) : HTML태그와 이 태그에 포함된 텍스트 또는 미디어로 형성된 HTML 문서의 단위
- HTML 태그 : HTML 요소의 이름, (<)로 시작하여 (>)로 끝납니다.
- HTML 내용(content) : HTML 요소에 포함된 정보(텍스트 또는 미디어) 입니다.
3.HTML의 기초
- 웹 페이지를 구축하는데 사용하는 주요 HTML 요소중에 하나입니다.
- <body>안에 태그에 들어가는 내용만이 화면에 표시됩니다.
- 하나의 파일에는 body를 가지고, body에는 유형의 컨텐츠(텍스트, 이미지, 버튼 등)을 추가할 수 있습니다.
<body>
<p>Hello World!</p>
</body>
4.HTML의 구조
- HTML은 가계도같은 관계로 구성되어 있습니다.
- 위 예시에서 <p> 요소는 <body>요소 안에 포함되어 있습니다.
- 또한 가독성을 높히기 위해, 두 번의 스페이스 바를 사용했습니다.
- 요소가 다른 요소 안에 포함되면 해당 요소의 자식으로 간주됩니다.
- 계층이 여러 수준으로 나뉠 수 있습니다.
<body>
<div>
<h1>Sibling to p</h1>
<p>Grandchild of body</p>
</div>
</body>
- 이 예시에서 <body>요소는 <div>요소의 상위입니다.
- <h1> 및 <p>는 모두 <div>요소의 자식입니다.
- <h1>요소와 <p>요소는 같은 수준이기 때문에 <body> 요소의 손자, 손녀입니다.
5. 제목 태그
- <html>의 제목은 신문의 제목과 유사합니다.
- <html>에는 여섯개의 서로 다른 표제 요소가 있습니다. 다음과 같이 크기 순으로 배열되어 있습니다.
- <h1> : 가장 큰 제목 태그로, 주요 제목에 사용됩니다. 다른 모든 제목은 아래 제목에 사용됩니다.
- <h2>
- <h3>
- <h4>
- <h5>
- <h6>
6. divs태그
- HTML의 인기있는 요소(elements)중 하나는 <div>요소로, <div>는 division(분할)의 약어입니다.
- <div> 태그는 HTML의 요소들을 그룹화하는데 매우 유용합니다.
<body>
<div>
<h1>왜 div를 사용하는가?</h1>
<p>요소들을 묶는데 정말 좋기 때문에!</p>
</div>
</body>
- <div>는 텍스트, 이미지, 비디오와 같은 HTML 요소를 포함할 수 있습니다.
- 가독성을 높히기 위해 <div> 내부에 요소를 배치할 때는 항상 두 개의 스페이스 바를 추가해야합니다.
7. Attributes(속성)
- 요소(elements)의 태그를 확장하려면 Attributes(속성)을 사용하면 됩니다.
- Attributes(속성)은 컨텐츠가 추가될 때, opening tag에 내용이 추가된다.
- 정보를 주거나, 스타일을 변경할 때 사용한다.
- 속성은 다음 두 개로 구성되어 있습니다.
- The name of the attribute
- The value of the attribute
- 일반적으로 사용되는 속성은 id입니다.
- id속성을 사용하여 <div>와 같은 내용을 지정할 수 있으며, 한 요소를 두 번 이상 사용할 때 매우 유용합니다.
- id는 HTML에서 몇가지 다른 목적을 가지고 있지만, 우선은 어떻게 콘텐츠를 식별하는지에 대해 알아보겠습니다.
- id를 <div>에 추가하면 다음과 같이 시작 태그에 id를 추가합니다.
<div id="intro">
<h1>소개</h1>
</div>
8. 텍스트 표시
- HTML로 텍스트를 표시하려면 paragraph(<p>)나 span:을 사용할 수 있습니다.
- paragraph(문단)는 단순한 텍스트 블록을 표시할 때 사용되며, 문단과 문단을 나누기 위한 기능입니다.
- 한줄한줄이 독립적인(Block-level Elements) 태그입니다.
- <span>은 짧은 텍스트 또는 기타 HTML을 포함하며, 같은 라인에 있는 컨텐츠를 구분하는데 사용합니다.
- 같은 라인에 들어가는(inline Elements) 태그입니다.
<div>
<h1>Technology</h1>
</div>
<div>
<p><span>자율 주행 자동차</span> 들은 앞으로 200만개의 일자리를 대체할 것으로 예상된다.</p>
</div>
- 위의 예시에는 두 가지 다른 div가 있습니다.
- 두 번째 div에 <span>자율 주행 자동차</self>가 포함되어 있습니다.
- 이 <span>요소는 "자율 주행 자동차"를 문단의 나머지와 구분합니다.
- 다른 텍스트와 동일한 줄에 있는 경우에는 <span>요소를 사용하는 것이 가장 좋습니다.
- 컨텐츠를 블록으로 분할할 때는 <div>요소를 사용하는 것이 좋습니다.
9. 텍스트 스타일 지정
- 텍스트 스타일을 지정하는 태그는 <em>태그와 <strong>태그가 있습니다.
- <strong>태그란 텍스트를 굵게 만들어서 강조합니다.(예 : Strong 태그)
- <em>태그란 텍스트를 이탤릭채로 만들어서 강조합니다.(예 : em 태그)
- ** 검색엔진 관련 팁 : <h1>, <h2>, <strong>, <em> 태그 등에 검색어가 포함되어 있을 경우, 검색엔진에서 관련성이 높다고 판단할 것입니다.
10. 줄 바꿈
- HTML파일의 코드 간격은 요소의 위치에 영향을 주지 않습니다.
- 브라우저에서 간격을 수정할 경우, HTML의 줄 바꿈 요소인 <br>을 사용할 수 있습니다.
11. 정렬되지 않은 목록
- paragraph(<p>)를 이용하는 것 이외에도 가독성이 좋은 목록을 내용에 표시할 수 있습니다.
- (<ul> = unordered list)태그를 이용하여 각각의 중요 부분을 강조하여 항목 목록을 만들 수 있습니다.
- 개별 목록 항목은 (<li> = list item)태그를 사용하여 <ul>태그에 추가합니다.
<ul>
<li>라임</li>
<li>피자</li>
<li>치킨</li>
</ul>
- 위의 예시에서 목록은 <ul>태그(unordered list, 정렬되지 않은 태그)를 사용하여 생성되었으며
- 모든 개별 목록 항목은 <li>태그를 사용하여 추가했습니다.
12. 정렬된 목록
- 정렬된 목록(<ol>)은 각 목록 항목에 번호가 지정되는 것을 제외하면 <ul>과 같습니다.
- 여러 단계를 나열하거나 항목의 순위를 지정할 때 유용합니다.
- <ul>태그와 같은 방식으로 <ol>태그에 <li>태그를 추가해서 사용합니다.
13. 이미지
- <img>태그를 사용하면 웹 페이지에 이미지를 추가할 수 있습니다.
- <img>태그에는 src라는 필수 속성이 있습니다. src속성은 이미지의 소스나 저장 장소로 지정되어야 합니다.
<img src="image-location.jpg" />
- 이 경우 src의 값은 uniform resource locator(URL)이어야 합니다.
- URL은 파일이 저장된 웹 주소 또는 로컬 주소입니다.
14. 비디오
- <img>태그와 마찬가지로 <video>태그에는 비디오 소스에 대한 링크가 있는 src 속성이 필요합니다.
<video src="myVideo.mp4" width="320" height="240" controls>
비디오가 지원되지 않음
</video>
- src속성에 width와 height 속성은 브라우저에 표시되는 넓이와 높이를 나타냅니다.
- controls 속성은 브라우저에 일시 중지, 재생 및 건너뛰기와 같은 기본 비디오 컨트롤을 포함하도록 지시합니다.
- 비디오 태그 사이에 "비디오가 지원되지 않음" 텍스트는 브라우저가 비디오를 지원하지 않을 때 표시됩니다.
===============================================================================
위 글은 codeacademy에서 html 기초를 공부하면서 번역해서 정리했습니다.
HTML 공부를 시작하는 분들께 도움이 되었으면 좋겠습니다.
댓글