1. 개요
HTML은 하이퍼 텍스트 마크업 언어이다.
HTML은 웹 페이지의 구조를 설명합니다.
<! DOCTYPE >
선언은 문서 유형을 나타내며 브라우저가 웹페이지를 올바르게 표시하도록 도와준다.
페이지 상단에(HTML 태그 이전에) 한번만 나타내주면 HTML5에 대한 선언은 다음과 같다.
<!DOCTYPE html>
<head>
head 태그 안에는 문서에 대한 "메타 정보"를 포함합니다.
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
</head>
<title>
head태그 안의<title>은 문서의 제목을 지정합니다.
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>꾸준히 성장하는 개발자</title>
</head>태그는 대소문자를 구분하지 않는다. 다만 소문자를 사용하도록 권고하고 있다.
제목
<h1>타이틀 제목입니다</h1>
내용(단락)
<p>구문을 입력하세요</p>링크
<a href="www.naver.com">네이버</a>
이미지 (종료태그 X)
<img src="w3schools.jpg" alt="로고사진">
버튼
<button>Click me</button>
리스트
// ordered list의 약자로, 순서가 있는 목록을 만드는 데 사용합니다.
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
// unordered list의 약자로, 순서가 없는 목록을 만듭니다.
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
구분선 (주제별 구분을 정의하거나 컨텐츠의 분리, 닫히는 태그X)
<hr>
2. 속성
속성은 태그에 추가정보를 제공합니다.
- 모든 태그는 속성를 가질 수 있습니다.
- 속성은 시작 태그에 지정됩니다.
- 일반적으로 다음과 같은 쌍으로 사용됩니다 name = "value"
href 속성
<a href="https://www.w3schools.com">This is a link</a>src 속성
<img src="img_girl.jpg">
width, height 속성 (기본 픽셀 단위)
<img src="img_girl.jpg" width="500" height="600">
alt 속성 (이미지를 표시할 수 없을 때, 화면 판독기)
<img src="img_girl.jpg" alt="Girl with a jacket">
스타일 속성 (색상, 글꼴, 크기 등과 같은 요소의 스타일을 지정하는 데 사용)
<p style="color:red">This is a red paragraph.</p>※위와 같이 태그안에 스타일 속성을 부여하는 것을 inline 방식이라 하는데, 이 방식은 가급적 사용하지 않는게 좋다.
lang 속성
<html lang="ko">※ html 태그에 선언, 접근성 응용프로그램과 검색엔진 때문에 중요한 속성
title 속성
<p title="빨간색">무슨 색깔일까요?</p>※ 툴팁 속성이라고도 하는데 마우스를 갖다대면 속성값이 보인다.
※ alt속성을 대신해서 사용하면 안된다.
3. heading
- 검색 엔진은 heading을 사용하여 웹 페이지의 구조 및 컨텐츠를 index합니다.
- h1 대제목으로 사용하세요. h2~h6은 대제목 뒤에 덜 중요한 제목에 사용하세요
- heading은 heading의 목적으로만 사용하십시오. 가령 텍스트를 크게하기 위한 용도로 사용하지마세요.
- h1~h6는 기본크기가 정해져있습니다. heading 크기를 조절하려면 style 속성을 사용하십시오.
'HTML5' 카테고리의 다른 글
| w3스쿨즈 HTML(5) - 이미지[image] (0) | 2022.03.24 |
|---|---|
| w3스쿨즈 HTML(5) - 링크[link] (0) | 2022.03.24 |
| w3스쿨즈 HTML(4) - CSS (0) | 2022.03.24 |
| w3스쿨즈 HTML(3) - Quotation, Color (0) | 2022.03.24 |
| w3스쿨즈 HTML5(2) - paragraph, style, formatting (0) | 2022.03.24 |
댓글