본 글은 MDN의 자료를 요약한 것입니다.
😄 HTML(Hypertext Markup Language)이란?
HTML이란 프로그래밍 언어가 아니다. 컨텐츠의 구조를 정의하는 마크업 언어이다.
HTML은 어떠한 형식으로 보이게 하거나 특정한 방식으로 동작하도록 하는 Element들로 이루어져 있다.
각 Element는 속성을 가질 수 있는데, 속성은 실제 컨텐츠로 표시되길 원하지 않는 추가적인 정보를 담고 있다.
각 속성 사이에는 공백이 있어야 하며, 속성의 이름 뒤에는 등호(=)가 와야 한다. 또한 속성의 값을 확실히 표현해주기 위해서는 인용부호(" 또는 ')가 있어야 하는데 Doublequote(")를 사용하는 편이다.
HTML 문서의 각 요소를 알아보자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>DTD(Document Type Definition)이란?
문서 타입 정의는 HTML5, XHTML, HTML 의 세가지 문서 유형이 존재하며, 기술한 유형에 따라 마크업 문서의 요소와 속성들을 처리하는 기준이 되며 유효성 검사에 이용된다.
우리가 사용하는 HTML5는 DTD 참조가 필요없어서, 위 코드와 같이 간단히 선언할 수 있다.
MDN 문서에는 아래와 같이 기술되어 있다.
최근에는 아무도 그런 것들에 대해 신경쓰지 않으며 그저 모든 것이 올바르게 동작하게 하기 위해 포함되어야 할 역사적인 유물일 뿐입니다. 지금은, 그게 알아야 할 전부 입니다.
html
이 요소는 페이지 전체를 감싸며, 루트 요소라고도 한다.
lang 속성을 통해 문서에 사용된 언어를 지정할 수 있다.
head
이 요소는 페이지를 조회하는 사람들에게 보여주지 않을 컨텐츠의 컨테이너 역할을 한다. 여기에는 검색결과에 표시되기 원하는 페이지 설명, 스타일, 스크립트 등이 포함된다.
body
이 요소는 페이지 방문자들에게 보여주길 원하는 컨텐츠의 컨테이너 역할을 한다.
block 형식의 태그와 inline 형식의 태그에 대해 알아보자
inline : 줄바꿈 없이 내용만큼만 영역을 차지 ex) span, a, input, img, b, i, strong, em 등 글자 관련 태그
block : 내용의 길이와 상관없이 가로 한 줄을 모두 차지 ex) div, h1~h6, p, li, table, form
inline 형식의 태그는 block 형식의 태그를 감쌀 수 없다.
글자, 문단 관련 태그
<br> : 엔터와 동일하게 줄 바꾸는 태그
<p> : 문단을 띄울 때 사용, 연속으로 사용해도 한번만 적용
<p>~</p> : 문단을 묶을 때 사용
<div>~</div> : block 형식으로 공간을 분할
<span>~</span> : inline 형식으로 공간을 분할
<Hn>~</Hn> : n은 1~6까지, 숫자가 작을수록 글자가 크다. color 속성이 적용되지 않는다.
<b>~</b> 또는 <strong>~</strong> : 굵은 글자
<i>~</i> 또는 <em>~</em> : 이탤릭체
<u>~</u> 또는 <ins>~</ins> : 밑줄글자
<del>~</del> : 가운데 줄이 그어진 글자
<sup>~</sup> : 윗첨자
<sub>~</sub> : 아래첨자
이미지 삽입 태그
이미지를 삽입할 때 사용한다. src 속성에는 이미지의 위치, alt에는 이미지에 대한 설명을 넣을 수 있다. 이미지가 오류로 인하여 표시되지 못할 때나, 시각 장애가 있는 분들을 위해 이미지에 대한 설명을 적을 수 있는 alt 속성을 추가하는 편이 좋다.
<img src="이미지 위치" alt="이미지에 대한 설명">이미지에 캡션을 붙일 때
<figure> <img src="apple.png" alt="사과"> <figcaption>이것은 사과입니다.</figcaption> </figure>이미지에 여러개의 하이퍼링크를 연결시킬 때
<img src="apple.png" alt="사과" usemap="#map"> <map name="map"> <area shape="rect | circle | poly" coords="좌표" href=""> </map>
하이퍼링크 태그
<a href="연결할 주소" target="표현방법">velog로 이동</a>href 속성의 값으로는 http://velog.io와 같은 사이트나 프로젝트 내부의 파일 또는
특정한 위치 (ex:<a name="이름"></a> <a href="#이름">특정한 위치로</a>에 연결할 수 있다.
주의할 점은 a태그의 name 속성은 id의 역할을 하기 때문에 다른 태그의 id와 a태그의 name이 같은 경우, 기능이 동작하지 않는다.
폼 태그
<form action="폼을 전송할 서버쪽의 스크립트 파일 지정" name="폼을 식별하기 위한 이름" method="폼을 전송할 방식, GET 또는 POST"> </form>Form 안에서 사용되는 input의 주요 타입으로는
hidden,password,file등이 있다.
사실 리액트나 뷰로 개발하다보면 잘 만들어진 UI Framework를 사용하기에..직접 form을 만들어 사용할 일은 잘 없다.
개인적으로는 blade template에 작업할 일이 좀 있어서 좀 사용하긴 했다.
인풋 태그
주로 쓰는 속성은
readonly,placeholder정도...
