HTML
HTML
목차
- HTML
- HTML은 프로그래밍 언어가 아니라, 컨텐츠의 구조를 정의하는 마크업 언어이다.
- HTML은 요소(element)로 이루어져 있고, 요소는 여는 태그(opening tag)와 닫는 태고(closing tag), 그리고 컨텐츠(content)로 이루어져 있다.
- 요소에는 속성()을 가질 수 있는데, 속성은 실제 컨텐츠로 표시되길 원하지 않는 추가적인 정보를 담고 있다.
- 속성이 항상 가져야 하는 것
- 요소 이름 (또는 요소가 하나 이상 속성을 이미 가지고 있다면 이전 속성)과 속성 사이에 공백이 있어야 함
- 속성 이름 뒤에는 등호(=)가 와야 함
- 속성 값의 앞 뒤에 열고 닫는 인용부호(“ 또는 ‘)가 있어야 함
- 속성이 항상 가져야 하는 것
- 요소는 중첩(nesting)될 수 있다. ```html
내 고양이는 아주 고약해.
- 컨텐츠가 없는 요소는 빈 요소(empty elements)라 함
- 아래의 요소는 두 개의 속성이 있지만, 닫는 태그가 없음
```html
<img src="images/firefox-icon.png" alt="My test image">
HTML tags
- HTML에서 사용하는 각종 태그를 모아보자
기본 태그
<!DOCTYPE html>- HTML이 막 나온 초기에는 오류 확인을 위하여 필요
<html></html>- 페이지 전체의 컨텐츠를 감싸며, 루트(root) 요소라고도 함
<head></head>- 페이지에 대한 설명, CSS, 폰트 등 페이지에 포함되는 각종 정보를 담는 컨테이너 역할
<body></body>- 사용자들에게 보여지는 컨텐츠를 담는 컨테이너
<meta charset="utf-8">- 문서가 사용해야 할 문자 집합을 utf-8으로 설정
<title></title>- 페이지의 제목을 설정
이미지
<img src="images/firefox-icon.png" alt="My test image">
- src (source) 속성 : 이미지 파일의 경로
- alt (alternative) 속성 : 이미지를 볼 수 없는 사용자들을 위한 설명문(descriptive text)
- 시각 장애자인 경우 사용자들은 alt 텍스트를 읽어주는 스크린 리더라는 도구를 사용
- 오류 등으로 이미지를 표시할 수 없는 경우 alt 텍스트를 표시
제목
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>
문단 태그(parapraph tags)
<p>내 고양이는 고약해</p>
목록 태그
- 순서가 없는(un-ordered list) 목록 ```html
- technologists
- thinkers
- builders
- 순서가 있는(ordered list) 목록
```html
<ol>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ol>
연결
<a> : ancor<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>- href 속성 : hypertext reference의 약자
댓글남기기