HTML 정리

Dev/HTML

HTML 정리

takeU 2021. 7. 2. 15:35

HTML이란?

HyperText Markup Language
HTML은 웹 페이지를 작성하기 위한 표준 Markup Language이며, 현재는 HTML5가 상용화되어 사용되고 있다.

HTML의 구성

가장 기본적인 틀은 아래와 같고, 하나하나 알아보자.

<!DOCTYPE html>
<html lang="ko">
  <head>
  </head>
  <body>
  </body>
</html>

<!DOCTYPE html>

DOCTYPE이란 말그대로 Document Type으로 작성할 HTML의 문서 형식 정의(DTD: Document Type Definition) 를 해주는 선언문이며, 뒤에 붙는 html은 HTML5 임을 명시해준다.
DOCTYPE을 선언하지 않으면 브라우저는 쿼크모드(Quirks mode)로 렌더링하게 되고, 예상과 다른 결과가 화면에 뿌려지게 된다.

html

HTML 문서의 루트 엘리먼트를 나타낸다.
lang 속성은 필수로 작성해야하며 해당 문서의 기반이 되는 언어를 작성해줘야 한다.

이유는?

- 스크린리더가 lang 속성의 언어로 사이트를 읽어주기 때문에, 적어주는 것이 웹 표준에 부합하다.

head

HTML 문서의 속성을 지정하기 위한 태그이며,
타이틀, 메타 태그 등 페이지를 설명하는 내용들을 넣는다.

body

페이지의 컨텐츠, 즉 실질적으로 화면에 뿌려지는 부분들이 들어가는 곳이다.

기본적인 태그

head의 기본 태그

title

문서의 제목을 나타내며, 브라우저 탭에 써있는 부분을 title태그를 통해 작성한다.

<title>워너비스페셜</title>

link

보통은 href(hypertext reference) 속성과 같이쓰며 현재 문서에 외부 리소스를 넣고 싶을 때 사용한다.
빈태그(empty element)로 시작태그와 종료태그의 쌍이 아닌, 태그 한개로 열고닫기를 동시에 한다.

<link href="#">

meta

meta태그는 웹페이지의 정보를 담고 있으며, 검색엔진 최적화(SEO : Search Engine Optimization)에 매우 큰 영향을 준다.
종류는 매우 많지만 대표적으로 title, description, keywords 등이 있다.
link와 마찬가지로 빈태그이다.

<meta name="description" content="takeU's Dev Blog">
<meta name="keywords" content="frontend, HTML5, CSS3, JavaScript, JS, React, Vue">

body의 기본 태그

각 태그를 설명하며 block level element는 block, inline level element는 inline으로 표기

p - block

paragraph의 약자로 문단을 만들때 사용된다.
마크업을 할 때 div와 더불어 가장 많이 쓰인다.(뇌피셜)

<p>문단입니다</p>

span - inline

span은 한뼘, 마디라는 뜻인데 이러한 의미로 사용되는 것 같다.(확실하지 않음)
inline 태그지만 p태그와 비교를 위해 위로 올렸음.
이름 뜻 그대로 특별한 의미를 가지진 않는다.
p태그와 다르게 inline 속성이기 때문에,
보통 p태그와 같은 block 태그 안에서 어떠한 단어에 다른 CSS를 먹이고 싶을 때 사용된다.
여담으로 마크업을 할 때 span 태그를 메인으로 쓰는 사람을 봤는데, Semantic한 웹을 만들기에 좋은 방법은 아닌 것 같다.

<p>나는 <span>글을 쓴다</span></p>

h1 ~ h6 - block

heading의 약자로 중요도에따라 1부터 6까지 부여한다.(가장 중요한것이 h1)
h1은 보통 사이트의 이름, 슬로건 등 가장 중요한 내용에 부여되며, 페이지 내에 한개만 존재해야 한다.
태그가 기본적으로 스타일을 가지고 있다.

<h1>워너비스페셜</h1>

div - block

division의 약자로 레이아웃을 나누는데 사용된다.
기존에는 모든 레이아웃을 나눌 때 div태그로만 사용해 한눈에 파악하기 쉽지 않았는데,
HTML5가 나오면서 실질적으로는 div와 같은 역할을 하지만
이름만으로도 뜻을 파악할 수 있는 Semantic tag가 나왔다.
여기서 Semantic은 의미론의 라는 뜻으로 의미를 가진 태그들을 말하며
예시로는 header, nav, footer 등이 있다.
딱봐도 어떤 의미이며, 무엇을 뜻하는지 바로 알 수 있다.
나중에 Semantic tag와 Semantic Web에 대한 포스트로 더 자세히 알아보자.

<div>
  <p>문단1</p>
  <p>문단2</p>
</div>

form - block

입력한 데이터를 서버로 전송할 때 사용된다.
일반적으로 form태그 내부의 input태그들의 내용을 button을 통해 서버에 전송한다.
action 속성에 폼을 전송할 url 입력, method 속성에 http 메소드를 적어준다.

<form action="action.js" id="login">  <input type="text" name="id" value="">  <input type="password" name="pwd" value="">  <button type="submit">로그인</button></form>

ul, ol, li - block

unordered, ordered list의 약자로 리스트에 사용된다.
li태그를 사용해 리스트를 작성하며, ul은 원형 점, ol은 숫자로 순서가 매겨진다.

<ul>  <li>하이</li>  <li>바이</li></ul>

table - block

표를 만들때 사용된다.
tr(table row) - 가로줄을 만드는 역할
th(table head) - 표의 제목을 만드는 역할
td(table data) - 셀을 만드는 역할
이외에 thead, tbody, tfoot으로 의미를 부여할 수 있고, 작성 순서는 thead, tfoot, tbody이다.
colspan으로 행 확장, rowspan으로 열 확장을 할 수 있다.

<table>  <tr>    <th>번호</th>    <th>이름</th>  </tr>  <tr>    <td>1</td>    <td>유택</td>  </tr></table>

a - inline

anchor의 약자로 문서 내에서 링크를 걸때 사용된다.
link태그와 마찬가지로 href 속성으로 연결할 주소를 지정한다.
target 속성이 자주 쓰이며 target="_blank"을 추가하면 새창에서 열리게 된다.(기본값은 _self로 현재창에서 실행된다)

<a href="http://takeu.tistory.com" target="_blank">티스토리</a>

img - inline, 빈태그

이미지를 삽입할 때 사용된다.
src 속성으로 이미지 링크를 적고, alt 속성으로 대체 텍스트를 적는다.
웹 표준에 따르기 위해서 alt 속성은 필수로 적어야 한다!(귀찮다고 안적으면 안된다!)

<img src="~~" alt="이미지">

label - inline

입력 양식창(input, button 등..)을 설명하는 이름표로 사용된다.
입력 양식창의 id를 label의 for 속성과 동일하게 작성해 사용한다.

  <input type="checkbox" id="check">  <label for="check">체크박스</label>

input - inline, 빈태그

입력창을 만들 때 사용된다.
type 속성에 따라 입력창의 형태가 바뀐다

text - 기본값 / 한 줄의 텍스트 창
password - text와 형태는 같지만, 문자를 숨겨서 표시함
checkbox - 체크박스 ( 여러개 체크 가능 )
radio - 라디오 버튼 ( 한가지만 체크 가능 )

HTML5에 추가된 속성

color - 색상 선택 창
date - 날짜 입력 창
email - email 입력 창

위의 속성 이외에도 종류가 많으니, 적절하게 쓰는 것이 중요하다.

<input type="text"><input type="checkbox">

textarea - inline, 빈태그

여러줄의 텍스트를 입력받는 창을 생성한다.
cols, rows 속성을 통해 행과 열의 크기를 정한다.
기본적으로 창의 크기를 드래그로 조절할 수 있고,
CSS의 resize: none을 통해 막을 수 있다.

<textarea name="content" cols="30" rows="3">

select, option - inline

셀렉트 박스를 생성할 때 사용된다.
disabled 속성으로 선택 금지, selected 속성을 통해 기본값을 설정할 수 있다.

<select>  <option disabled selected>커피</option>  <option>아메리카노</option>  <option>카페라떼</option></select>

button - inline

버튼을 생성할때 사용된다.
<input type="submit>과 기능적으로는 동일하지만 기본적으로 submit 기능을 수행한다.

<button>제출</button>

script - inline

문서 내에서 스크립트를 불러올 때 사용된다.
성능 상 </body>바로 위에 위치하는 것이 좋기 때문에 가장 마지막에 썼다.(ㅎㅎ))
src 속성으로 주소를 불러온다.

<script src="주소.js"></script>

HTML 속성

<html lang="ko"> 언어 선언 속성 / 필요한 응용프로그램, 검색엔진에 중요

<p title=""> 제목 속성 / title 속성 값이 툴팁으로 표시(단락 위에 마우스)

<a href=""> 링크 속성 / 링크 주소

<img src="주소" alt="대체 텍스트" width="너비" height="높이" />

크기 속성 / alt 속성 / 이미지를 표시할 수 없을때 대체 텍스트 지정

HTML 서식

웹 표준을 따르기 위해 사용하는 의미있는 태그는 별표로 표시

즉, 별표가 있는 태그를 사용해야 함

*<strong> 중요 텍스트

<b> 굵게

*<em> 강조

<i> 기울임

<mark> 하이라이트

<small> 작은 텍스트

<del> 삭제된 텍스트

<ins> 삽입된 텍스트

<sub> 아랫첨자

<sup> 윗첨자

HTML 인용

<q> 따옴표 삽입

<blockquote cite=""> 인용구 삽입

<abbr title=""> 약어 정의

<address> 문서의 연락처 정보 정의 (italic체 표시)

<cite> 작품의 제목 (italic 표시)

<bdo dir="rtl"> 텍스트 방향 재정의

HTML 컴퓨터 코드

<kba> 키보드 입력 정의

<samp> 샘플 출력 정의

<code> 코드의 일부 정의 <pre> 코드와 같이 사용

<var> 변수 정의

HTML 주석

조건부 댓글

HTML 색상

rgb(255,255,255) or 16진법 #FFFFFF

HTML 링크

링크 전체 작성 or 로컬 링크 작성

로컬링크란 동일한 웹 사이트에서 상대url 지정 ex)html_images.asp

타겟 속성

<a href="" target="_blank">

_blank 새창이나 탭에서 문서 열기

_self 같은 창/탭에 문서 열기 (기본값)

_parent 부모 프레임에서 문서 열기

_top 윈도우 전체에 열기

framename 명명된 프레임에 문서 열기

링크로 이미지를 사용하는게 일반적임

text-decoration:none 하이퍼링크 밑줄 없애기

책갈피 만들기

id값을 준 뒤 <a href="#id">로 추가

HTML 이미지

<img src="주소" alt="대체텍스트" style="스타일" />

단일 태그

스타일 속성을 직접 사용하는것이 좋음

<a> 태그를 사용해 이미지에 링크 사용

border:0; 속성은 IE9 이전을 위해 추가

이미지맵 <map> 태그 사용

ex)

<img src="abc.gif" alt="abc" usemap="#abcmap" style="width:145px;height:126px;" /><map name="abcmap"> <area shape="rect" coords="0,0,52,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="60,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"></map>

HTML 테이블

<tr> 테이블 정의

<th> 테이블 헤더 정의

<td> 테이블 데이터 정의 (text,img,list 등등 HTML모든 요소 포함 가능)

<caption> 캡션 추가시 사용

<colgroup>,<col> 열 그룹 지정 / <caption> 뒤 <tr> 전에 지정해야함

<thead>,<tbody>,<tfoot> 테이블을 부분화함

테두리 설정시 table, th, td 모두에 정의해야함

축소 테두리 사용시 border-collapse: collapse; 사용

간격 사용시 padding 사용

정렬시 text-align 사용

테이블 간격 사용시 border-spacing 사용

열 병합시 <th colspan="2"> 사용

행 병합시 <th rowspan="2"> 사용

<table>  <thead>    <th>header1</th>    <th>header2</th>  </thead>  <tbody>    <tr>      <td>1</td>      <td>2</td>    </tr>    <tr>        <td>3</td>        <td>4</td>    </tr>  </tbody></table>

HTML 리스트

<ul> 정렬되지 않은 리스트 style="list-style-type:~"

style - disc(기본값),circle,square,none

<ol> 정렬된 리스트 type="~"

type - 1(기본값),A,a,I,i

Description List

<dl> 목록, <dt> 용어(이름), <dd> 설명

HTML 블록,인라인

블록 - <div>,<hi>,<p>,<form>

인라인 - <span>,<a>,<img>

<div> 다른 element의 container로 사용, style,class가 일반적

<span> text의 container로 사용, style,class가 일반적

div class는 .class명으로 스타일 설정

HTML iframe

웹 페이지 내에 웹 페이지를 표시하기 위해 사용

<iframe src="url" height="~' width="~"></iframe>

border:none; 테두리 제거

링크사용시 iframe에 name값을주고 a태그로 target지정

HTML JavaScript

JS로 HTML요소 선택시 document.getElementById(ID) 사용

.innerHTML 로 내용변경

.style.fontSize="10px";로 스타일변경

<nonscript> 스크립트를 지원하지 않는 브라우저를 위한 대체 컨텐츠

HTML `<head>`

<meta name="정의" content="설명">

<meta http-equiv="refresh" content="30"> 30초마다 새로고침

<base> 모든 상대 url의 기본 url과 베이스 대상 지정

HTML 레이아웃

HTML5 시맨틱 요소

HTML `<form>`

<input type="text"> 한줄의 텍스트필드

password / 별표or원으로 표시

submit / 입력처리,제출 value를 생략하면 버튼생김

reset / 초기화

radio / 선택버튼

text / 한줄의 텍스트

radio / 선택버튼

checkbox / 체크박스

button / 버튼 <input type="button" value="Click ME" onClick='alert('Hello World!')>

color/ 색상 선택기 표시,선택

date / min,max로 날짜 설정

datetime /datetime-local / 날짜,시간 선택

email / 이메일 형식 입력 일부 스마트폰은 키보드에 .com추가

month / 달 선택

week / 주 선택

number / min,max설정후 숫자 입력필드표시, step은 배수설정

range / min,max로 조절

search / 검색기능

tel / 전화번호포함 (사파리8지원)

time / 시간 선택

url / url입력, 일부 스마트폰은 키보드에 .com추가

name속성 생략시 데이터 전송 x

<form action="양식 데이터를 처리하는서버,미지정시 현재페이지">

method 속성 get,post

get - 크기제한, 짧은양 적합, 중요한정보 x

post - 크기제한x 대용량 데이터, 중요한 정보

<fieldset> 그룹 관련 데이터에 사용

<legend>``<fieldset> 캡션 정의

HTML 폼 양식

<input> 여러 방법으로 표현 가능

<select name="~"> 선택 옵션

<option value="~" selected></option> selected속성 - 미리 선택

<textarea name="~" rows="~" cols="~"> 텍스트 영역 cols폭 rows 높이

<button type="button" onclick="">button</button> 클릭버튼

<datalist>``<input>안에 들어가며 datalist의 id값과 input의 list 값이 같아야함

<keygen name="security"> 사용자를 인증하는 보안방법 제공/ 클라이언트 인증서 생성시 사용가능

<output> 계산결과를 보여줌

HTML 입력 특성

value로 초기값 지정

readonly 읽기전용,수정불가

disabled 비활성화 필드

size="10" 크기

maxlength="10" 최대길이

autocomplete="on" 자동완성 사용자가 이전에 입력한 값에 기초해 완료<form>의<input>에서 작동

autofocus 자동커서

form id값을주고 form 밖에서 같은값을 form속성으로 달면 form안의 내용으로 인식

*제출(submit, image)에 사용

formaction form의 action을 무시하고 formaction으로

formenctype 인코딩 방법 지정

formmethod<form>의 method무시

formnovalidate <novalidate> 무시

formtarget

pattern 이메일,비밀번호 등 패턴을 설명

require 필수입력사항

step 단계속성, 숫자,범위,날짜 등 에 사용

마무리

아주 기본적인 태그들만 정리를 했고, 추가적인 내용들은 MDN을 참고.

개인적으로 공부한 내용을 정리한 것이기 때문에 반말을 사용한 점 양해 부탁드립니다.
잘못된 부분이나 피드백이 있으시다면, 댓글에 남겨주시면 감사하겠습니다!

저작자표시 비영리 변경금지

현재글HTML 정리

takeU

HTML 정리

HTML이란?

HTML의 구성

기본적인 태그

head의 기본 태그

body의 기본 태그

HTML 속성

HTML 서식

HTML 인용

HTML 컴퓨터 코드

HTML 주석

HTML 색상

HTML 링크

HTML 이미지

HTML 테이블

HTML 리스트

HTML 블록,인라인

HTML iframe

HTML JavaScript

HTML `<head>`

HTML 레이아웃

HTML `<form>`

HTML 폼 양식

HTML 입력 특성

마무리

'Dev/HTML'의 다른글

티스토리툴바

HTML 정리

HTML이란?

HTML의 구성

기본적인 태그

head의 기본 태그

body의 기본 태그

HTML 속성

HTML 서식

HTML 인용

HTML 컴퓨터 코드

HTML 주석

HTML 색상

HTML 링크

HTML 이미지

HTML 테이블

HTML 리스트

HTML 블록,인라인

HTML iframe

HTML JavaScript

HTML <head>

HTML 레이아웃

HTML <form>

HTML 폼 양식

HTML 입력 특성

마무리

'Dev/HTML'의 다른글

관련글

티스토리툴바

HTML `<head>`

HTML `<form>`