| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
- #성적관리프로그램
- 하이퍼레저패브릭
- relative path
- git flow
- #CallByAddress
- hyperledger transaction
- #bubbleSort
- #C++ has~a
- #다차원포인터
- html id
- docker example
- mac terminal command
- html code
- border-box
- #android activity
- html object
- html youtube
- #1차원배열
- html5 new tag
- html video
- #2차원배열
- #3차원배열
- html plug-in
- html multimedia
- #자바상속#자바이즈어#is~a
- 토큰경제
- #JAVASCRIPT
- #C++ 연산자함수오버로딩
- html charset
- #binary
- Today
- Total
A sentimental robot
HTML Basic 본문
기초 태그부터 정리해보자.
<!DOCTYPE html> HTML5 문서임을 선언한다.
<html> html 페이지의 최상위 요소 (root element)
<head>
문서에 대한 메타 데이터를 포함한다.
메타 데이터란 html문서에 대한 정보를 말한다. 문서의 제목, 스타일, 링크, 스크립트, 문자 인코등 같은 정보를 일컫는다.
메타 데이터는 보여지지않는다.
<body>와 <html>사이에 위치한다.
<meta>
메타 요소는 문자 인코딩(character set), 문서 설명, 검색 엔진에 노출될 키워드, 문서의 저자 등을 정의한다.
브라우저, 검색엔진, 웹 서비스에서 메타 데이터를 사용한다.
- 문자 인코딩을 정의 <meta charset="UTF-8" >
- 웹 페이지에 대한 설명<meta name="description" content="Free Web tutorials">
- 검색엔진에서 노출될 키워드<meta name="keywords" content="HTML, CSS, XML, JavaScript">
- 문서가 30초 마다 새로 고침 된다! 이런 대박기능이?<meta http-equiv="refresh" content="30">
여기서 끝이 아니다! HTML5에서 도입된 viewport가 있었으니! 그는 이 시대의 반응형 웹에 큰 공헌을 했다고 한다...
메타 태그를 통해서 뷰포트에 대한 통제권을 얻게되었으니 메타 태그의 위상은 높아질 수 밖에..(?)
뷰포트는 웹 페이지에서 사용자가 볼 수 있는 영역이다. 뷰포는 디바이스마다 다르다.
뷰포트 속성을 통해 브라우저는 디바이스에 맞게 페이지의 크기와 비율을 조절할 수 있다.
width=device-width 은 페이지의 너비를 디바이스의 화면 너비에 맞게 조절한다.
initial-scale=1.0 은 브라우저가 처음 페이지를 로드 할 때 zoom level을 기본으로 설정한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
브라우저의 탭에 나타나는 문서의 제목이다.
검색 엔진의 결과로 노출된다.
<body> 페이지에 보여질 내용을 포함한다. HTML5에 들어와서 <html> <body> <head> 태그를 생략할 수가 있게 되었다.
<h1> 제목태그 중 가장 큰 태그이다. 제목 태그는 <h6> 까지 있으며 숫자가 올라갈 수록 작아진다. 헤딩을 잘 쓰는 것은 중요하다. 웹 페이지의 구조와 검색엔진의 검색 순위에 영향을 미치기 때문이다.
<p> 문단을 정의하는 태그이다.
<a> 링크를 정의하는 태그이다. a 태그의 속성 중 href 는 링크가 어디로 도달할지 명시한다.
<ul> 태그는 순서가 없는 리스트이다. <ol> 태그는 순서가 있는 리스트이다. 두 개의 태그는 <li> 태그를 리스트의 요소로 포함한다.
<br> 내용이 없는 빈 요소이다. 한 줄 띄어쓰기 용도이다. 빈요소이기 때문에 닫는 태그는 없다.
태그의 속성을 알아보자.
모든 html 태그는 속성을 갖는다.
속성은 항상 시작 태그에 명시되어야 한다.
키와 값 형식으로 이루어져있다.
예)
<html>태그 속성 중 하나인 lang 속성을 통해 문서의 언어를 선언할 수 있다. <html lang="en-US">
title 속성을 통해 툴팁을 나타낼 수도 있다. 툴팁은 마우스를 갖다 대면 나오는 텍스트 상자이다.
style 속성은 값이 또 키와 값으로 나뉜다. <p style="color:blue;">
속성 키를 정의할 때 소문자로 값은 quotation안에 쓸 것을 권장한다.
'HTML' 카테고리의 다른 글
| HTML block elements (0) | 2019.04.20 |
|---|---|
| HTML list (0) | 2019.04.20 |
| HTML table (0) | 2019.04.20 |
| Html image (0) | 2019.04.20 |
| HTML hyperlink (0) | 2019.04.17 |