따릉이
[웹] HTML 정리 본문
1. Introduction to HTML
HTML: Hyper Text Markup Language
Hyper Text: 링크를 통해 한 문서에서 다른 문서로 즉시 접근 가능한 텍스트
Markup Language: 태그 등을 이용해 문서나 데이터의 구조를 명시하는 언어
HTML은 웹사이트에 나타나는 콘텐츠에 대한 구조를 제공한다.
2. HTML Anatomy
HTML은 element들로 구성되며, element들은 웹페이지를 구조화하고 웹페이지의 내용을 정의한다.
예를 들어, 다음과 같은 HTML paragraph element에서
<p>Hello World!</p><p>는 opening tag이고, Hello World!는 content이고, </p>는 closing tag이다.
3. The Body
body element 내의 content들은 화면에 출력가능하다.
body 내에는 text, image, button들을 추가할 수 있다.
<body>
<p>"Life is very short and what we have to do must be done in the now." - Audre Lorde</p>
</body>
4. HTML Structure
child element들은 behavior와 styling을 parent element로 부터 상속받는다.
위 예제에서, paragraph는 body의 child element이고, body는 paragraph의 parent element이다.
5. Headings
heading element: <h1>~<h6>까지 있으며, h뒤의 숫자가 클수록 글자크기가 작다.
6. Divs
<div>는 "division"의 약자이며, page를 구역별로 나누는 역할을 한다.
HTML element에 CSS를 이용해 custom style을 적용하는데 유용하게 사용된다.
div 내에는 어떤 HTML element던지 올 수 있다.
7. Attributes
attribute는 element의 opening tag에 추가되어, 정보 제공 및 스타일 변경의 목적 등으로 사용된다.
NAME=VALUE 의 형태를 갖는다.
8. Displaying Text
텍스트를 출력하기 위해서, paragraph 또는 span을 사용할 수 있다.
<p>는 block of plain text를 content로 갖으며,
<span>은 short pieces of text 나 다른 HTML을 content로 갖는다. content의 한 line에서 일부분을 분리할 때 사용한다.
<div>
<h1>Technology</h1>
</div>
<div>
<p><span>Self-driving cars</span> are anticipated to replace up to 2 million jobs over the next two decades.</p>
</div>
9. Styling Text
<em>또는 <strong> tag로 감싸서 텍스트를 강조한다.
일반적으로 em과 strong에 대해 각각 style형식을 지정해서 사용하는데,
브라우저의 내장 style sheet에는 em은 텍스트가 기울여서 표시되고, strong은 볼드체로 표시되도록 되어 있다.
10. Line Breaks
line break element <br>은 starting tag만 존재한다.
HTML 코드 어디에던지 개행을 출력하기 위한 곳에 사용할 수 있다.
11. Unordered Lists
<ul>은 unordered list로, 각 item들 앞에 bullet이 붙는다. 리스트의 아이템들은 <li> tag 등의 list item tag로 감싸져야 한다.
12. Ordered Lists
<ol>은 ordered list로, 각 item들 앞에 숫자가 붙는다. <li> tag를 이용해 item을 감싼다.
13. Images
웹페이지에 이미지를 출력할 때 사용하는 <img> tag는 self-closing tag이다.
<img> tag는 src attribute가 필수이다. src의 value는 이미지가 위치한 웹 주소나 로컬 저장소의 주소에 대한 URL이여야 한다.
14. Image Alts
<img> tag에 alt attribute를 추가하여 이미지에 대한 설명을 추가한다.
15. Videos
<video> tag는 영상을 출력할때 사용한다. <img> tag와 다르게 starting tag와 closing tag가 있어야 한다. src attribute는 video source에 대한 link를 갖어야 한다.
height와 width attribute로 영상의 가로 세로 크기를 정의하고, controls attribute를 사용해서 영상 하단에 제어 버튼을 추가한다. 그리고 video tag사이의 content는 영상이 제대로 로드되지 않았을 경우 표시된다.
16. HTML Document Standards
- document type declaration. 브라우저에게 document의 type과(html) html버전을 알려준다.
- 현재로서는 브라우저가 현재 HTML표준인 HTML5로 인식한다.
- html structure와 content를 생성하기 위해서 DOCTYPE 선언 이후에 <html> tag를 추가한다.
- <html>태그 내의 모든 content은 HTML코드로 해석된다.
- <head>는 <html>의 child element이며, 웹페이지의 메타데이터를 포함한다.
- <head>내의 <title>은 브라우저의 탭에 표시되는 제목에 해당된다.
- <a> element(anchor element)는 href attribute와 같이 사용되어 다른 웹페이지 또는 파일로의 링크를 생성한다. 그리고 target attribute는 링크가 어떻게 열려야 하는지를 명시하며, value를 "_blank"라고 했을 경우는, 브라우저가 링크를 새 창에서 연다.
- 그리고 <img>를 <a>로 감싸서 이미지에 링크를 적용할 수 있다.
- 한 페이지 내의 어떤 element로의 링크를 생성하려면, 해당 element의 id attribute의 value 앞에 "#"을 붙인 문자열을 <a>의 href attribute의 value로 지정하면 된다.
17. Tables
- <table> element는 테이블을 생성한다.
- <table>내에 먼저 <tr>element로 행을 생성하고, <tr>내에
- 테이블의 셀인 <td>들을 추가하여 열을 생성한다.
- <th>는 테이블의 헤더인데, <th>의 scope attribute를 "col" 또는 "row"로 하여 행 헤더, 열 헤더를 생성한다.
- 그리고 <td>나 <th>에 colspan attribute를 이용하여 열이나 행의 크기를 확장할 수 있다(셀 합치기).
- table의 head, body, footer로 나누어진다. 각각 <thead> <tbody> <tfoot> 이다.
- 일반적으로 <thead>내에는 열 헤더를 포함시키고, <tbody>내에는 행 헤더와 일반 셀을 포함시키고, <tfoot>내에는 총합계를 의미하는 셀 등을 포함시킨다.
18. Forms
- <form>element는 사용자가 정보를 입력하고 전송할 수 있도록 한다.
- <form>의 action attribute는 form의 데이터가 전송되는 곳을 지정하며, method attribute는 html method를 지정한다.
- <form>내에는 여러 type의 <input>을 추가할 수 있다.
- 사용자가 <input>에 입력한 데이터가 value attribute로 설정되고, <input>의 name attribute와 합쳐져서, form 전송 시 "name=value"쌍으로 전송이 된다.
- input type attribute에는 text, password, number, range, checkbox, radio, list, submit등이 있다.
- <label>의 for attribute를 <input>의 id와 똑같이 설정하여 input에 대한 라벨을 생성할 수 있다.
- <select> element는 dropdown list를 생성하며, 내부에 리스트의 원소인 <option> element들을 추가해서 사용한다.
- <datalist> element도 dropdown list인데, <input>과 연계해서 사용하여 사용자가 list의 원소를 검색할 수 있도록 해준다.
- <textarea> element를 이용하여 여러 줄의 텍스트를 입력할 수 있도록 한다.
www.codecademy.com/learn/learn-html
HTML Tutorial: Learn HTML For Free | Codecademy
Learn basic HTML, including how to place text on a page, add images & videos, and share data in HTML tables. This is the first step in creating web pages to help you tweak your website and more.
www.codecademy.com
'프론트엔드' 카테고리의 다른 글
| [지도] 마커 필터링 기능 추가 (0) | 2021.02.17 |
|---|---|
| [지도] 모든 따릉이 정류소를 마커로 표시하고, 현재위치 나타내기 (0) | 2021.02.10 |
| [카카오지도]지도생성하기 (0) | 2021.01.28 |
| [카카오 지도] 관련 사이트 (0) | 2021.01.25 |
| [js+html] Kakao Maps API 예제 "지도 생성하기" 실습 (0) | 2021.01.24 |
