HTML?
- Hyper Text Markup Language의 약자
Html 구성요소
-
start Tag,end Tag,content,element
-
start Tag만 있는 경우도 있다<input>,<hr>,<meta>등- self-closing 방식으로 쓰기도함
<input/>같이 뒤에/를 붙이는 경우
Html 요소 분류하기
inline요소 VS block요소
- inline 요소
- 태그가 할당된 텍스트나 이미지의 크기에 맞는 필요한 공간만을 차치
width,height를 지정할 수 없으며 줄 내부 어디서든 시작<span>,<img>,<button>등이 대표적
- block 요소
- 이전 요소와 상관없이 개행해 새로운 줄에서 시작
width는 좌우 양쪽으로 부모요소의 100%를 차지하며 외쪽 -> 오른쪽으로 확장<div>,<article>,<form>등이 대표적
- ex
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { border : 1px solid #000; } em, span { border : 1px dashed red; } </style> </head> <body> <div>block 요소</div> <div> <div>block 요소 안의 block 요소</div> <span>block 요소 안의 inline 요소</span> </div> <span>inline 요소 안의 <em>inline 요소</em></span> </body>
콘텐츠 모델
- 외울 필요는 없지만 알고는 있어야 한다.
- metadata contetn
- 나머지 콘텐츠의 표시나 동작을 설정하거나 문서와 다른 문서와의 관계 설정
<base>,<link>,<meta>,<noscript>,<style>,<template>,<title>,
- flow content
- 본문에 표시되는 대부분의 요소
<a>,<abbr>,<address>,<area>(map의 조상요소로 사용된 경우),<article>,<aside>,<audio>,<b>,<bdi>,<blockquoto>,<br>,<button>,<bdo>,<canvas>,<cite>,<code>,<data>,<datalist>,<del>,<details>,<dfn>,<div>,<dl>,<em>,<embed>,<filedset>,<figure>,<footer>,<form>,<h1-h6>,<header>,<hr>,<i>,<iframe>,<img>,<input>,<ins>,<kbd>,<keygen>,<label>,<main>,<map>,<math>,<menu>,<meter>,<nav>,<noscript>,<object>,<ol>,<output>,<p>,<picture>,<pre>,<progress>,<q>,<ruby>,<s>,<samp>,<script>,<section>,<select>,<small>,<span>,<strong>,<sub>,<sup>,<svg>,<table>,<template>,<textarea>,<time>,<u>,<ul>,<var>,<video>,<wbr>
- sectioning content
- 아웃라인을 정의하며 각 제목요소와 바닥글 요소의 범위를 지정
<article>,<aside>,<nav>,<section>
- phrasing content
- 문서 내의 텍스트를 의미하여 단락을 형성하는 요소입니다.
<a>,<abbr>,<area>(map의 조상요소로 사용된 경우),<audio>,<b>,<bdi>,<br>,<button>,<bdo>,<canvas>,<cite>,<code>,<data>,<datalist>,<del>,<dfn>,<em>,<embed>,<i>,<iframe>,<img>,<input>,<ins>,<kbd>,<keygen>,<label>,<map>,<mark>,<math>,<meter>,<noscript>,<object>,<output>,<picture>,<pre>,<progress>,<q>,<ruby>,<s>,<samp>,<script>,<select>,<small>,<span>,<strong>,<sub>,<sup>,<svg>,<template>,<textarea>,<time>,<u>,<var>,<video>,<wbr>
- Heading content
- 섹션의 헤더를 정의하는 요소
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
- Embedded content
- 외부의 자원을 가져오거나 삽일할 때 사용하는 요소
<audio>,<canvas>,<embed>,<iframe>,<img>,<math>,<object>,<picture>,<svg>,<video>
- Interactive content
- 유저와 상호작용을 위해 특별히 설계된 요소
<audio>,<canvas>,<embed>,<iframe>,<img>,<math>,<object>,<picture>,<svg>,<video>
Html 문서 골격 만들기
-
Doctype
- 문서의 타입을 지정합니다.
<!DOCTYPE html>
- 문서의 타입을 지정합니다.
-
html
- 문서의 루트 지점을 명시하는 태그
lang속성은 서비스 국가에 맞게 지정<html lang="ko">
-
head
- 문서의 제목과 문서의 인코딩 형식 등을 지정
- title = 문서의 이름을 표시
<title>이름을 입력하세요</title>
- meta = 메타 데이터, 데이터에 대한 데이터, 어떤 목적으로 만들어지 데이터, 주로 기계가 읽고 이해하는 정보
<meta charset="UTF-8"> <!-- 인코딩 지정 -->
-
body
- 문서의 내용이 들어감
head뒤에 들어간다.
Sementic
- sementic?
sementic은 '의미의', '의미론적인'이라는 뜻div태그를 사용하기 보단,section,nav등 의미있는 태그를 사용하는 것- 대표적인 태그들
-h1~h6,header,main,article,section,footer,aside,nav가 대표적
SEO(Serch Engine Optimization)
- SEO
- 검색 시 사이트를 찾기쉽도록 개선하는 노력
- SEO를 잘 만드는 방법
sementic하게 태그를 작성하자<title>을 잘 지정하자<meta name="description>을 이용해 페이지 설명을 남기자<meta charset="UTF-8>를 사용해 인코딩 방식을 지정하자open-graph,twitter태그를 사용해 외부 사용자를 유인
출처 : 기초부터, 완성까지 프런트엔드
