HTML / Tutorial / 문법
기본 문법
가장 기본적인 문법은 다음과 같습니다.
<tagname>Contents</tagname>
- 위 모든 걸 요소(element)라고 합니다.
- <tagname>을 시작 태그, </tagname>을 종료 태그, 둘을 합쳐 태그(tag)라고 합니다.
- Contents는 내용입니다.
예를 들어 다음은 p 요소라 하고, 시작 태그는 <p>, 종료 태그는 </p>, 내용은 Lorem입니다.
<p>Lorem</p>
속성
태그는 속성(attribute)을 가질 수 있다습니다.
<tagname attribute="value">Contents</tagname>
예를 들어 blockquote에 id 속성(attribute)을 추가하고 값(value)을 abc로 정하고 싶으면 다음과 같이 합니다.
<blockquote id="abc"> ... </blockquote>
속성값(value)은 큰 따옴표로 감싸도 되고, 작은 따옴표로 감싸도 되고, 따옴표를 사용하지 않아도 됩니다. 단, 속성값에 공백이 있으면 큰 따옴표 또는 작은 따옴표로 감싸야 합니다.
예를 들어 다음은 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 style=color:red;>Lorem</p>
다음은 빨간색이 되지 않습니다. style 속성의 값을 color:로 해석하기 때문입니다.
<p style=color: red;>Lorem</p>
글자색이 빨간색이 되지 않을 뿐 Lorem은 출력되고 에러 메시지는 없습니다. HTML은 문법이 틀려도 가능한 만큼 나타내는 느슨한 언어입니다.
주석
주석(Comment)은 웹브라우저가 해석하지 않는 코드입니다. <!--와 -->로 둘러싸인 부분은 주석이 됩니다.
<!-- Comment -->
줄바꿈이 있어도 주석으로 처리됩니다.
<!-- Comment ... Comment -->
주석 안에 주석을 넣으면 원치 않는 결과가 나올 수 있습니다. 예를 들어 다음의 경우 마지막 줄의 abc -->은 주석으로 처리되지 않고, 웹브라우저에 출력됩니다.
<!--
<!--
Comment
-->
abc -->
주석은 웹브라우저가 해석하지 않지만, 소스 보기로 누구나 볼 수 있다는 것에 주의해야 합니다.
HTML / Tutorial / 양식에 안내 문구 추가하는 방법
input 태그에 value를 이용해서 기본값을 만들 수 있습니다. 이 상태에서 버튼을 클릭하면 기본값이 전송됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { font-size: 16px; ...
순서 있는 목록 - ol 순서 있는 목록(Ordered List)은 차례대로 증가하는 번호가 붙는 목록입니다. 순서 있는 목록은 ol 태그로, 목록의 내용은 li 태그로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <h1>Ordered List</h1> <ol> ...
기본 문법 가장 기본적인 문법은 다음과 같습니다. <tagname>Contents</tagname> 위 모든 걸 요소(element)라고 합니다. <tagname>을 시작 태그, </tagname>을 종료 태그, 둘을 합쳐 태그(tag)라고 합니다. Contents는 내용입니다. 예를 들어 다음은 p 요소라 하고, 시작 태그는 <p>, 종료 태그는 </p>, 내용은 Lorem입니다. <p>Lorem</p> 속성 태그는 속성(attribute)을 가질 수 있다습니다. <tagname attribute="value">Contents</tagname> 예를 들어 blockquote에 id 속성(attribute)을 추가하고 값(value)을 abc로 정하고 싶으면 다음과 같이 합니다. <blockquote ...
링크(link)는 a 태그로 만듭니다. 링크의 대상은 웹페이지, 파일, 이메일 등이 될 수 있습니다. 기본 문법 <a href="xxx">Label</a> href 속성의 값에는 웹페이지, 이미지, 동영상, 파일 등의 주소를 넣습니다. 웹페이지로 이동하거나, 동영상 플레이어가 실행되거나, 파일이 다운로드 되는 등 웹브라우저의 설정에 따라 처리됩니다. <a href="">Label</a>처럼 href 속성에 값이 없으면, 현재 페이지로 이동하는 링크가 만들어집니다. 주요 속성 a 태그에 추가할 ...
표 만들 때 사용하는 태그 표는 table 태그로 만듭니다. 행은 tr 태그로 만듭니다. 열의 제목이 들어가는 셀은 th 태그로 만듭니다. 내용이 들어가는 셀은 td 태그로 만듭니다. 각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분 지을 수도 있습니다. 가로로 이웃한 셀을 합칠 때에는 colspan 속성을 사용합니다. 세로로 이웃한 셀을 합칠 때에는 rowspan 속성을 사용합니다. 표 제목은 caption 태그로 ...
제목 제목(heading)은 h1, h2, h3, h4, h5, h6 태그로 만듭니다. 문서의 구조와 밀접한 관련이 있으므로 순서에 맞게 사용하는 게 좋습니다. 문단 문단(paragraph)은 p 태그로 만듭니다. 문단과 문단 사이는 간격이 큽니다. 문단 내에서 줄바꿈을 하고 싶다면 br 태그를 이용합니다. 예제 1 제목의 기본 모양은 굵은 글자이고, 레벨에 따라 크기가 다릅니다. h4와 p는 글자 크기가 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading ...