HTML / 문법
기본 문법
가장 기본적인 문법은 다음과 같다.
<tagname>Contents</tagname>
- 위 모든 걸 요소(element)라고 한다.
<tagname>을 시작 태그,</tagname>을 종료 태그, 둘을 합쳐 태그(tag)라고 한다.- Contents는 내용이다.
예를 들어
<p>Lorem</p>
는 p 요소라 하고, 시작 태그는 <p>, 종료 태그는 </p>, 내용은 Lorem이다.
속성
태그는 속성(attribute)을 가질 수 있다.
<tagname attribute="value">Contents</tagname>
예를 들어 blockquote에 id 속성(attribute)을 추가하고 값(value)을 abc로 정하고 싶으면 다음과 같이 한다.
<blockquote id="abc"> ... </blockquote>
속성값(value)은 큰 따옴표로 감싸도 되고, 작은 따옴표로 감싸도 되고, 따옴표를 사용하지 않아도 된다. 단, 속성값에 공백이 있으면 큰 따옴표 또는 작은 따옴표로 감싸야 한다. 예를 들어
<p style="color:red;">Lorem</p> <p style="color: red;">Lorem</p> <p style='color:red;'>Lorem</p> <p style='color: red;'>Lorem</p> <p style=color:red;>Lorem</p>
는 p 요소의 글자를 빨간색으로 만들지만
<p style=color: red;>Lorem</p>
는 빨간색이 되지 않는다. style 속성의 값을 color:로 해석하기 때문이다.
글자색이 빨간색이 되지 않을 뿐 Lorem은 출력되고 에러 메시지는 없다. HTML은 문법이 틀려도 나타낼 수 있는 만큼 나타내는 느슨한 언어이다.
주석
주석(Comment)은 웹브라우저가 해석하지 않는 코드이다. <!--와 -->로 둘러싸인 부분은 주석이 된다.
<!-- Comment -->
줄바꿈이 있어도 주석으로 처리된다.
<!-- Comment ... Comment -->
주석 안에 주석을 넣으면 원치 않는 결과가 나올 수 있다. 예를 들어 다음의 경우 마지막 줄의 abc -->은 주석으로 처리되지 않고, 웹브라우저에 출력된다.
<!--
<!--
Comment
-->
abc -->
주석은 웹브라우저가 해석하지 않지만, 소스 보기로 누구나 볼 수 있다는 것에 주의해야 한다.
HTML / label / 폼의 양식에 이름 붙이는 태그
label label은 폼의 양식에 이름 붙이는 태그이다. 주요 속성은 for이다. label의 for의 값과 양식의 id의 값이 같으면 연결된다. label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나, 체크를 하거나, 체크를 해제한다. 예제 input 요소에 label을 붙인 간단한 예제이다. label을 클릭하면 input의 type에 맞게 처리한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p> <label for="jb-input-text">Input - Text</label> <input type="text" id="jb-input-text"> </p> <p> <label for="jb-input-checkbox">Input - Checkbox</label> <input type="checkbox" id="jb-input-checkbox"> </p> </body> </html> Tip input 등 ...
HTML / del - 삭제되었음을 나타내는 태그, ins - 새로 추가되었음을 나타내는 태그
del, ins del은 텍스트를 삭제했음을 나타냅니다. 취소선이 있는 게 기본 모양입니다. ins는 새로 추가되었음을 나타냅니다. 밑줄이 있는 게 기본 모양입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p>My favorate color is <del>blue</del> <ins>red</ins>.</p> </body> </html> CSS / text-decoration / 선으로 ...
HTML / table, thead, tbody, tfoot, th, tr, td / 표 만들기
표 만들 때 사용하는 태그 표는 table 태그로 만든다. 행은 tr 태그로 만든다. 열의 제목이 들어가는 셀은 th 태그로 만든다. 내용이 들어가는 셀은 td 태그로 만든다. 각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분 지을 수도 있다. 가로로 이웃한 셀을 합칠 때에는 colspan 속성을 사용한다. 세로로 이웃한 셀을 합칠 때에는 rowspan 속성을 사용한다. 표 제목은 caption 태그로 ...
HTML / form / 데이터를 전달하는 양식 만들기
form은 데이터를 입력 받고 전송할 때 사용하는 태그이다. 문법 <form method="xxx" action="yyy"> ... </form> method : 값을 전송하는 방법으로 get 또는 post를 입력한다. action : 값을 전달할 페이지를 입력한다. 입력하지 않으면 현재 페이지로 전송한다. form 안에 form을 넣으면 제대로 작동하지 않는다. 예제 1 - GET 방식으로 값 전달 get 방식으로 값을 전달하는 간단한 양식이다. <!doctype html> <html lang="ko"> <head> <meta ...
HTML / progress - 진행 정도 나타내는 바 만드는 태그
progress progress는 진행 정도 나타내는 바를 만드는 태그이다. HTML5에서 추가되었다. 주요 속성은 max, value이다. max를 전체로 보았을 때 value에 해당하는 정도를 나타낸다. 예제 1 첫 번째 바는 전체를 100으로 보았을 때 20을 나타낸다. 두 번째 바는 전체를 200으로 보았을 때 20을 나타낸다. 웹브라우저에 따라, 웹브라우저의 버전에 따라 표현 방식이 다르다. <!doctype html> <html lang="ko"> <head> <meta ...
HTML / caption / 표(table)에 캡션 붙이는 태그
caption 표(table)에 캡션 붙일 때 caption 태그를 사용한다. 기본 위치는 표 위 가운데이다. 캡션 위치는 CSS의 caption-side로 정한다. 예제 캡션의 위치를 파악하기 위해 표의 가로 크기를 100%로 했고, 테두리를 넣었다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> table { width: 100%; } th, td { border: 1px solid #dadada; } </style> </head> <body> <table> <caption>Table Caption</caption> <tr> <th>Lorem</th><th>Ipsum</th> </tr> <tr> <td>Dolor</td><td>Amet</td> </tr> </table> </body> </html>
링크(link)는 <a> 태그로 만든다. 링크의 대상은 웹페이지, 파일, 이메일 등이 될 수 있다. 기본 문법 <a href="xxx">Label</a> href 속성의 값에는 웹페이지, 이미지, 동영상, 파일 등의 주소를 넣는다. 웹페이지로 이동하거나, 동영상 플레이어가 실행되거나, 파일이 다운로드 되는 등 웹브라우저의 설정에 따라 처리된다. <a href="">Label</a>처럼 href 속성에 값이 없으면, 현재 페이지로 이동하는 링크가 만들어진다. 주요 속성 a 태그에 추가할 ...
HTML / input / hidden / 입력하지 않은 값을 넘기는 숨겨진 양식
양식은 보통 사용자가 입력한 값을 활용하기 위해 사용한다. 하지만, 사용자가 입력하지 않아도 필요한 값이 있을 수 있다. 사용자가 접속한 IP, 로그인한 상태에서의 계정 정보, 게시물의 답글인 경우 게시물의 ID 등을 예로 들 수 있다. 이러한 값들은 type이 hidden인 input 태그로 만들어서 넘긴다. 다른 type의 input과 마찬가지로 이름은 name, 값은 value로 정한다. 다음은 ...
HTML / input / checkbox / 체크박스 만들기
체크박스 체크박스는 클릭하면 선택되고, 다시 클릭하면 선택이 해제되는 사각형 모양의 박스이다. 체크박스는 input 태그로 만든다. 문법 <input type="checkbox" name="xxx" value="yyy" checked> name : 전달할 값의 이름이다. value : 전달될 값이다. checked : 선택된 상태로 만든다. 예제 1 - 기본 Blue 또는 Red를 선택한다. 둘 다 선택할 수 있다.(라디오 버튼은 하나만 선택할 수 있다.) 아무것도 선택되지 않은 상태에서 시작한다. <!doctype html> <html lang="ko"> ...
noscript noscript 태그 안의 내용은 스크립트를 지원하는 않는 웹브라우저나 스크립트를 실행하지 않도록 설정한 웹브라우저에서만 출력됩니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Tag | noscript</title> </head> <body> <script> document.write( '<h1>Your browser supports JavaScript</h1>'); ...