HTML(Hyper Text Markup Language)
- 웹 페이지와 구조를 만들기 위한 도구
HTML 요소(Element)
1. 태그(Tag)
- 웹 브라우저 화면에 내용을 표시할 수 있도록 도와주는 HTML의 도구
- HTML 문서를 구성하는 기본 단위
- 대부분 오프닝 태그(<tag>)와 클로징 태그(</tag>)로 구성
2. 속성(Attribute)
- '속성 이름'과 '속성 값'으로 구성됨
- 하나의 태그에 1개 이상의 속성을 구현 가능
3. 내용(Contents)
- 오프닝 태그와 클로징 태그 사이에 입력
- 웹 브라우저 화면에 내용이 표시됨
HTML의 기본 태그와 속성
<body>
- 표시되는 모든 콘텐츠는 <body> 태그 내에 배치되어야 함
<h1> <h2>, ..., <h6>
- 제목 및 부제목 태그
- <h1>이 글자 크기가 가장 크고, <h6>이 가장 작음
| 브라우저 표시 화면 | 코드 |
 |
<h1>Hello Jacob</h1> <h2>Hello Jacob</h2> <h3>Hello Jacob</h3> <h4>Hello Jacob</h4> <h5>Hello Jacob</h5> <h6>Hello Jacob</h6> |
<p>
- 단락(Paragraph) 내용 입력
- <p> 내용 </p>
<div>
- division의 약자
- HTML 요소 그룹화
<em>
- 텍스트 스타일링 태그
- 내용 글자 기울어짐
| 브라우저 표시 화면 | 코드 |
 |
<h2>Hello <em>Jacob</em></h2> |
<strong>
- 텍스트 스타일링 태그
- 내용 글자 진해짐
<br>
- 줄 바꿈 태그 (HTML 코드에서 줄을 바꿔도 브라우저에서 표시되는 내용은 줄이 바뀌지 않음)
- 클로징 태그 없음
<ul>
- 순서가 없는 목록 (Unordered List)
- <li> 태그와 함께 사용
| 브라우저 표시 화면 | 코드 |
 |
<ul> <li>Apple</li> <li>Banana</li> <li>Melon</li> </ul> |
<ol>
- 순서가 있는 목록 (Ordered List)
- <li> 태그와 함께 사용
| 브라우저 표시 화면 | 코드 |
 |
<ol> <li>Apple</li> <li>Banana</li> <li>Melon</li> </ol> |
<img>
- 이미지 삽입 태그
- 클로징 태그 없음
<img src="주소" alt="텍스트"/>
① src 속성
- src 속성이 반드시 있어야 함
- 속성 값에는 파일이 저장된 로컬 또는 웹 주소 입력
② alt 속성
- 이미지가 웹 페이지에 입력되지 않고 오류가 났을 때, 이미지 대신 alt 속성의 텍스트가 표시됨
- 검색엔진최적화(SEO)에 기여
- 시각 장애용 소프트웨어 사용시 이미지를 글로 읽어줌
<video>
- 동영상 삽입 태그
- 오프닝와 클로징 태그 사이 내용 : 동영상 재생이 안 될때만 표시됨 (예시 : Video not supported)
<video src="파일명" width="300" height="200" controls>
Video not supported
</video>
① src 속성 : 링크 연결
② 너비(width), 높이(height) 속성 : 브라우저에 표시되는 비디오 크기 설정
③ control 속성 : 브라우저에 재생, 일시중지 등 동영상 컨트롤 버튼이 포함되도록 지시함
'프로그래밍' 카테고리의 다른 글
| [JavaScript] 자바스크립트#5 문자열(string)의 메소드(method), 프로퍼티(property) (0) | 2021.05.17 |
|---|---|
| [JavaScript] 자바스크립트#4 문자열(string)의 표현 (0) | 2021.05.17 |
| [JavaScript] 자바스크립트 #3 조건문 (Conditional Expression) (0) | 2021.05.16 |
| [Javascript] 자바스크립트 #1 변수 선언과 할당 (Declaration & Assignment) (0) | 2021.05.11 |
| [Javascript] 자바스크립트 #2 함수 선언 방법 (Declaration) (0) | 2021.05.11 |
댓글