HTML
Hyper Text Markup Language
HTML은 웹 개발에서 웹의 구조와 정보를 담는데 중점을 두고있다.
이전의 HTML은 웹을 꾸며줄 다양한 문법을 지원했으나, 정보를 담는다는 그 역할에 집중할 수 있도록 이러한 문법을 전부 퇴출시키고 그 역할을 다른 언어들에게 넘겨주었다.
Tag
태그의 역할
HTML은 웹의 구조를 담당하는만큼 그 구조를 명확하고 직관적으로 구분할 필요가 있다.
Tag(이하 태그)는 HTML 문서에서 각 영역을 구분하는데 사용한다.
태그 자체에 특별한 기능이 있는 경우도 있지만,
그 외에는 별다른 기능 없이 각 영역의 구분만을 위해 존재한다.
일반 태그
시작태그 :
<태그명>
종료태그 :
</태그명>
일반적인 태그는 <시작태그> 와 </종료태그> 로 이루어져 있다.
<>로 태그의 이름을 감싸는 형태로 작성한다.
빈 태그
빈태그 :
<태그명 />
종료태그가 없는 경우도 있는데, 이러한 태그를 빈 태그 라고 부른다.
빈 태그의 작성 시, 태그가 종료되었음을 명시하기 위해 태그를 닫기 전에 / 를 넣기도 한다.
태그 중첩
<부모 태그>
<자식 태그>
</자식 태그>
</부모 태그>특정 태그의 시작태그와 종료태그 사이에 다른 태그를 넣는 방법으로 중첩시킬 수 있다.
이 때 상위에 있는 태그를 부모 요소,
하위에 있는 태그를 자식 요소라고 부른다.
이 부모 자식 관계는 바로 인접해있는 요소에 한하여 표현하는데,
그 부모 요소보다 한 단계 이상 위에 있는 요소는 상위 요소,
자식 요소보다 한 단계 이상 아래 있는 요소는 하위 요소 라고 부른다.
속성
<태그명 속성="값"> </태그명>
<빈태그명 속성="값" />
속성은 시작태그 혹은 빈 태그에 포함하여 작성하며, 태그의 확장 기능과 같은 역할을 한다.
각 태그들마다 적용할 수 있는 속성은 구분되어 있다. 하지만 모든 태그들에 대해 적용이 가능한 속성들 또한 존재하는데, 이를 전역속성이라 부른다.
Inline & Block
요소(태그)가 화면에 출력되는 특성을 말한다.
Inline Element
Inline Element(이하 인라인 요소)는 문자의 출력을 위한 요소이며, 요소가 브라우저에 출력될 때 수평으로 쌓이는 특징을 갖고 있다.
인라인 요소는 포함하고 있는 콘텐츠(내용) 크기에 맞게 최대한 줄어드는 특징이 있다.
또한 하나의 글자 취급을 받기 때문에 나중에 나올 width와 height 등의 크기를 지정할 수 없다.
마찬가지로 margin과 padding 등 여백을 지정할 때 좌우를 제외한 상하 여백은 적용되지 않는다.
자식 요소로 Block Element를 사용할 수 없다.
대표적으로 <span> </span> 태그가 있다.
Block Element
Block Element(이하 블록 요소)는 레이아웃을 만들기 위한 요소이며, 요소가 브라우저에 출력될 때 수직으로 쌓이는 특징을 갖고 있다.
블록 요소는 부모 요소의 크기에 맞게 최대한 늘어나는 특징이 있다.
세로 높이는 인라인 요소와 마찬가지로 최대한 줄어든다.
인라인 요소와는 반대로 크기와 여백을 자유롭게 조절할 수 있으며,
자식으로 블록 요소와 인라인 요소 모두 사용 가능하다.
여러모로 인라인 요소보다 제약이 적은 것이 특징이다.
대표적으로 <div> </div> 태그가 있다.
태그와 속성의 종류
사용 가능한 대표적인 전역속성
-
title="": 요소의 정보나 설명을 지정하며 마우스 오버 시 출력된다. -
style="": 요소에 적용할 스타일(CSS)을 지정하며 우선순위가 높다. -
class="": 요소를 지칭하는 중복 가능한 이름이다. -
id="": 요소를 지칭하는 고유한 이름이다.
이 외 태그별 필수 속성은 태그와 함께 표기하고, 선택 속성은 별도로 표기.
기본 뼈대 태그
<!DOCTYPE html>
DTD, Document Type Definition
문서의 HTML 버전을 지정한다.
웹 브라우저가 페이지를 해석할 때 사용할 HTML 버전을 명시한다.
<html> </html>
HTML 문서 구조의 최상위이다.
문서가 어디서 시작하고 어디서 끝나는지 브라우저에 알려주는 역할을 한다.
lang=""
HTML이 동작하는 환경의 언어를 지정한다.
<head> </head>
문서와 문서에 필요한 눈에 보이지 않는 정보를 작성하는 범위이다.
하위 요소로 페이지 제목, 페이지 설명, 스타일, 불러올 파일 등의 정보를 작성한다.
<body> </body>
문서의 눈에 보이는 구조를 나타내는 범위이다.
로고, 헤더, 푸터, 카테고리, 버튼, 이미지 등 브라우저를 통해 출력되는 모든 요소는 이 태그의 하위에 작성된다.
<head> 하위 태그
<title> </title>
HTML 문서의 제목을 정의한다.
브라우저의 탭 부분에 표시된다.
<link rel="" href="" />
CSS 파일, 아이콘 등을 불러와서 적용한다.
-
rel=""
불러올 파일의 역할을 지정한다.-
"stylesheet"
CSS 문서 -
"icon"
탭에 표시될 로고이다.
이 로고 이미지는 다른 아이콘과 구분해서 favicon.ico로 프로젝트 최상위 루트에 저장하는 것을 권장한다.
브라우저가 자동으로 탐색하여 연결하기 때문이다.
-
-
href=""
불러올 파일의 디렉토리.
<style> </style>
CSS 코드의 작성 범위이다.
<script> </script>
JavaScript 코드의 작성 범위이다.
-
src=""
외부의 JS 파일을 불러온다.
불러올 JS 파일의 디렉토리를 입력한다. -
defer
HTML 문서의 해석이 끝난 뒤에 이 스크립트를 해석하도록 명령한다.
값이 없는 단일 속성이다.
<meta />
HTML 문서의 제작자, 문서 내용, 검색 키워드 등의 정보를 검색엔진과 브라우저에 알린다.
-
name=""
정보의 종류를 의미한다.-
"author"
페이지의 제작자 -
"description"
페이지 설명 -
"keyword"
검색 키워드
-
-
content=""
정보의 내용을 의미한다.
name에 대한 값이다. -
charset=""
인코딩 방식 -
모바일 환경 대응
<meta name=“viewport” content=“width=device-width, initial-scale=1.0” />
og
오픈 그래프에 사용하는 메타 태그의 속성이다.
작성 예시
<meta property="og:type" content="website" />-
og:type
페이지의 유형(website, video.movie 등) -
og:site_name
페이지가 속한 사이트의 이름 -
og:title
페이지의 이름(제목) -
og:description
페이지의 간단한 설명 -
og:image
페이지의 대표 이미지 주소(url) -
og:url
페이지 주소(url)
Twitter cards
트위터 전용 오픈 그래프이다.
작성 예시
<meta property="twitter:card" content="summary" />-
og:type
페이지의 유형(website, video.movie 등) -
og:site_name
페이지가 속한 사이트의 이름 -
og:title
페이지의 이름(제목) -
og:description
페이지의 간단한 설명 -
og:image
페이지의 대표 이미지 주소(url) -
og:url
페이지 주소(url)
<body> 하위 태그
<img src="" alt="" />
이미지를 삽입한다.
-
src=""
이미지 파일의 경로를 입력한다. -
alt=""
대체 텍스트.
<a href=""> </a>
하이퍼 텍스트.
태그 내 요소를 클릭 시 지정한 주소, html 문서로 이동한다.
프로젝트 내 폴더 단위 까지만 주소를 명시할 경우 자동으로 해당 폴더 내 index.html 파일을 찾아서 불러온다.
같은 페이지 내의 다른 요소를 선택자를 통해 지정할 수도 있다. 스크롤이 해당 요소 위치로 이동한다.
-
href=""
이동할 주소를 입력한다. -
target=""
링크의 오픈 방식.
기본값은"_self"로, 현재 탭에서 링크를 오픈한다."_blank"
새 탭에서 링크를 오픈한다.
<form action=""> </form>
사용자 입력 내용을 전송할 서버 경로를 지정한다.
아래 나올 <input /> 태그의 상위 요소로 쓰인다.
-
action=""
입력 내용을 전송할 서버 경로를 작성한다. -
method=""
전송 방법을 지정한다.-
"get"
입력 내용을 url 자체에 포함하여 서버로 전송한다.
눈에 그대로 보여지기 때문에 보안에 취약하다. -
"post"
입력 내용을 숨겨서 별도로 전송한다.
-
<input type="" />
사용자로부터 데이터를 입력 받는다.
앞서 나온 <form> 태그의 하위 요소로 쓰인다.
-
type=""
입력 받을 데이터의 타입, 또는 입력창의 종류를 지정한다.-
"text"
일반적인 텍스트. -
"password"
패스워드, 입력 내용이 가려진다. -
"checkbox"
체크박스, 다중 선택이 가능하다. -
"radio"
체크박스,
같은name=""값을 갖는 체크 박스들 안에서 다중 선택이 불가능하다. -
"submit"
전송 버튼.
-
-
value=""
사용자가 입력하기 전에 미리 입력되어 있을 값을 지정한다.type="submit"에 사용 시 버튼에 표시될 내용을 지정한다. -
placeholder=""
value=""와 비슷하지만 focus 시 사라진다. -
name=""
입력 받은 내용을 담을 변수명을 지정한다. -
disable
비활성화. -
checked
체크박스 속성으로, 체그된 상태로 출력된다.
<label> </label>
<input /> 요소에 이름표를 붙인다.
이름표 부분을 클릭 시 자동으로 연결된 <input /> 요소가 focus 된다.
체크박스의 내용을 표시할 때도 사용이 가능하며, 이 경우 마찬가지로 해당 내용을 클릭 시 체크박스가 체크된다.
사용 방법으로는 <input/> 의 상위 요소로 감싸는 방법과 for="", id="" 속성을 사용하는 방법이 있다.
- 상위 요소로 사용
<label> ID :
<input type="text" name="id">
</label>- for, id 사용(같은 값을 부여한다.)
<label for="input__id"> ID : </label>
<input type="text" name="id" id="input__id"><div> </div>
대표적인 블록 요소로,
아무 기능과 나타내는 바가 없는 단순히 콘텐츠의 영역을 구분하는 용도이다.
보통 class="" 속성과 함께 사용하여 그 역할을 명시한다.
<span> </span>
대표적인 인라인 요소로,
아무 기능과 나타내는 바가 없는 단순히 콘텐츠의 영역을 구분하는 용도이다.
보통 class="" 속성과 함께 사용하여 그 역할을 명시한다.
<h1> </h1>
제목을 나타낸다.
1~6 까지 존재하며, 숫자가 커질수록 중요도가 낮다는 것을 의미한다.
<p> </p>
문장을 나타낸다.
단락을 구분할 때 사용한다.
<ul> </ul>
순서가 구분되지 않는 목록의 범위를 의미하며,
아래 나올 <li> </li> 태그의 상위 요소로 필수적이다.
<ol> </ol>
순서가 구분되는 목록의 범위를 의미하며,
아래 나올 <li> </li> 태그의 상위 요소로 필수적이다.
<li> </li>
목록 내의 각 항목을 의미한다.
<table> </table>
표의 범위를 나타낸다.
아래 나올 <tr>, <td> 가 하위 요소로 들어간다.
<tr> </tr>
표에서 열을 지정하는 요소.(가로 줄)
하위 요소로 <td> 가 들어간다.
rowspan=""
현재 열부터 입력한 숫자만큼 세로로 병합한다.
<td> </td>
표에서 행을 지정하는 요소로, <tr>의 하위 요소이다.
<tr> </tr> 로 이루어진 가로 한 줄을 쪼개서 나눠 갖는다.
colspan=""
현재 행부터 입력한 숫자만큼 가로로 병합한다.
<header> <header>
헤더의 범위를 나타낸다.
별다른 기능은 존재하지 않는다.
<section> </section>
각 구역을 구분한다.
별다른 기능은 존재하지 않는다.
