티스토리 뷰
HTML(HyperText Markup Language)
표준 HTML5를 기준으로 작성
HTML은 태그로 구성되어 있다. HTML에는 약 150여 가지의 태그들이 있다. 그중에서 문서작성에 필수적인 태그가 있는 반면, 사용빈도가 낮은 태그들도 있다. 당연히 주로 자주 사용되는 태그 위주로 사용방법을 기억하고, 활용빈도가 낮은 태그는 사용해야할 경우에 따로 찾아서 사용하는 것을 추천한다.
태그는 <head> </head>와 같이 여는 태그와 닫는 태그로 이루어지기도 하고, <img>태그나 <br> 줄바꿈 태그와 같이 단독으로 활용되는 태그들도 있다.
태그에는 속성(property)이라는 것이 들어갈 수 있는데, 태그종류에따라 필수속성과 그렇지 않은 속성이 있을 수 있다. 예를들어 링크를 지정하기 위한 <a> 태그에는 <a href="www.doomed-lab.tistory"> href라는 속성을 반드시 지정해주어야 한다. 속성에 지정해주는 값(value)에는 불필요한 공백은 사용하지 않는 것이 좋다.
<HTML 코드 작성 및 편집>
HTML파일을 작성하기 위해서는 가장 기본적으로 편집기(editor)와 html파일을 열어볼 수 있는 웹 브라우저가 필요하다. 편집기는 간단하게 메모장을 통해서도 작성이 가능하며, 메모장을 통해 코드를 편집할 경우 반드시 인코딩 타입을UTF-8로 저장해야한다. 그 외에도 다양한 에디터들을 활용할 수 있다. 아무래도 코딩과정에 도움을 주는 기능이 없는 메모장보다는 다른 HTML 에디터를 쓰는 것이 유리할 것이다. 그리고 결과를 확인할 웹 브라우저는 인터넷 익스플로러, 크롬, 사파리, 파이어폭스, 오페라 등 여러 브라우저를 사용할 수 있는데, 그 중에 크롬이 가장 최신 HTML CSS 표준기술을 잘 반영하고 있는 것으로 알려져있기 때문에 크롬(Chrome)브라우저를 사용하는 것을 추천한다. 브라우저에서 F12 또는 우클릭 -> 검사 를 통해서 웹페이지에 대한 디버깅이 가능하다.
<기본적인 HTML 태그들과 사용법>
HTML 문서의 시작은 <!DOCTYPE HTML> HTML로 작성된 파일임을 알려준다.
그리고 <meta charset="utf-8"> 태그를 통하여 웹브라우저에게 웹페이지를 UTF-8로 열라고 알려줘야한다.
문서의 기본적인 틀은
<html>
<head>헤드</head>
<body>바디</body>
</html>
와 같이 가장 최상위에 html에 태그가 감싸고 있고, head와 body로 이루어져있다. body는 본문이 들어가는 영역이고, head 부분에는 body를 설명하는 태그가 들어간다. <html>, <head>, <body>, <title>은 HTML5 문서의 필수태그다.
- <title> 제목 </title> 타이틀 태그는 페이지의 제목을 지정해주는 태그로 반드시 head에 포함되어야한다.
- <h1> </h1>은 내용의 header부분을 지정하는 태그이다. <h1>~<h6> 까지 사용가능하며 뒤에 숫자가 커질수록 글자가 작아진다.
- <p> </p> 태그로 단락을 구분할 수 있다.
- <br>은 줄바꿈 태그로 흔히 워드프로세서와 같은 전자문서 작성시에 shift+enter와 같은 역할이라고 보면된다. 닫는 태그는 필요없다.
- <hr> 구분선을 넣을 때 사용되는 태그.
- <!-- 주석처리는 이와 같이 작성한다. -->
- <div> 태그는 특별한 의미 구분없이 블록을 묶는 데에 사용된다. 블록 전체에 동일한 CSS나 Javascript 코드 등을 적용시키자 할때, 주로 사용된다.
- <span>태그는 텍스트 일부분에 특별한 모양을 주거나 제어하고자 할때 사용할 수 있는 인라인(inline) 태그다.
- <base> 태그는 href 속성을 이용해서 웹페이지가 담겨있는 기본 URL을 지정하고, 출력될 윈도우를 지정하기 위해 사용된다. <base>태그는 head에 한번만 사용될 수 있다.
- <meta> 태그는 메타 데이터를 표현하기 위해 사용되며, 메타 데이터는 데이터를 설명하는 데이터이다.
<meta name="keywords" content="HTML5"> 와 같이 name과 content의 쌍으로 구성된다. - <style> </style> 태그는 html 페이지에 css 스타일을 지정해주기 위해서 사용되는 태그이다.
- <script> </script> 태그는 자바스크립트 코드를 담는 태그이다.
- title 속성 : 페이지의 본문에 마우스를 올렸을 때 설명툴팁이 출력되도록 지정할 수 잇다. 모든 태그는 title 속성을 지정할 수 있다.
<링크 걸기>
<a> </a> 태그를 이용해 링크를 걸 수 있으며, href="주소"는 필수 속성이다.
href 속성으로 웹주소, html파일, #id(앵커이름) 등을 지정할 수 있으며,
target 속성은 웹 페이지가 출력될 탭을 지정해 주는 속성으로 _blank, _self, _parent, _top, 윈도우 명을 지정해줄 수 있다.
download 속성을 지정해주면 다운로드가 가능한 링크가 생성된다.
다음과 같이 사용할 수 있다. <a href="rabbit.png download>
태그에 id 속성을 지정하면 그 위치에 앵커(인덱스)가 생성된다. #앵커이름으로 링크를 지정해주면 인덱스를 만들수 있다.
<이미지 넣기>
이미지를 삽입하기 위해서는 <img> 태그를 사용하는 데, 이미지 태그는 반드시 src와 alt 속성이 들어가야한다. src는 이미지 파일을, alt는 이미지가 출력되지 않을 때 표시될 문자열으로 간단히 이미지의 이름으로 생각해도 된다.
<img src="rabbit.png" alt="토끼 사진"> 와 같이 사용할 수 있다. <a>태그로 이미지태그를 묶어주면 이미지에 링크를 거는 것도 가능하다. width와 height 속성을 지정해주어 이미지의 크기를 직접 정해줄 수 있다.
<목록(list) 작성하기>
<li> 항목 </li> 으로 항목을 지정해줄 수 있으며, 순서가 없는 목록을 작성할때는 <ul></ul>, 순서가 있는 목록을 작성하려면 <ol></ol> 으로 리스트를 감싸주면 된다.
<dl></dl> 태그로 정의 리스트를 만들수도 있다. <dl> <dt>용어></dt> <dd>설명</dd> </dl> 등으로 묶어주면 된다.
<표(table) 만들기>
<table></table> 태그로 표를 작성할수 있으며,
<caption>: 표제목
<thead> : 헤딩 셀 그룹
<tfoot> : 바닥 셀 그룹
<tbody> : 데이터 셀 그룹
<tr> : 행
<th> : 제목 셀
<td> : 데이터 셀
등의 태그를 사용할 수 있다.
참고 : https://www.w3schools.com/html/html_tables.asp
<텍스트 꾸미기>
<strong></strong> 중요표시
<b> </b> 진하게
<em> </em> 강조
<i> </i> 이탤릭체
<del> </del> 취소선
<ins> </ins> 추가(밑줄)
<sup> </sup> 윗첨자
<sub> </sub> 아랫첨자
<mark> </mark> 하이라이트
<멀티미디어 재생>
HTML5에서는 플러그인 없이 멀티미디어 재생이 가능하도록 <audio> , <video> 태그를 표준화했다.
<video> 태그의 속성으로는 src="비디오 파일의 URL" width="폭" height=" 높이" controls(제어버튼 출력) autoplay(즉시 재생) loop(반복 재생) muted(오디오를 끌 때 사용) 등을 지정할 수 있다.
<video> </video> 태그 사이에 태그를 지원하지 않는 브라우저에 출력되는 메세지를 정해주거나 <source src=""> 태그를 사용하여 경로를 별도로 지정할 수 있다.
<audio>파일도 유사하게 사용 가능하며, width와 height을 지정해줄 필요는 없다.
<시맨틱(semantic) 태그>
시맨틱(semantic) 웹이란 말그대로 정보가 의미론적으로 구조화 된 웹이다. 즉, 웹 브라우저에 주어진 정보가 웹 페이지 내에서 어떤 정보인지를 알려주기 위해 사용되는데, HTML5는 시맨틱 태그를 도입하여, 시맨틱 웹을 구성할 수 있게 되었다.
html5에는 다음과 같은 시맨틱 태그들이 사용된다.
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
자세한 사항은 아래 링크를 참조하면 도움이 될 수 있을 것이다.
참고: https://www.w3schools.com/html/html5_semantic_elements.asp
참고: https://www.w3schools.com/html/default.asp
HTML 태그 검색 : https://www.w3schools.com/tags/default.asp
HTML 태그 검사를 위한 사이트 : https://html5.validator.nu/
'Web Programming > HTML5 CSS3' 카테고리의 다른 글
| HTML5 이벤트(Event) 개념 정리 (0) | 2019.06.25 |
|---|---|
| HTML5 웹 워커(Web worker) 기본 정리 (0) | 2019.06.23 |
| HTML5 웹 스토리지(Web storage) 간단 요약 (0) | 2019.06.22 |
| HTML5 웹 폼(web form) 구성하기 (0) | 2019.06.21 |
| CSS3 기본내용 정리 (0) | 2019.06.13 |