Category : HTML HTML / input / range / 범위 내의 숫자를 선택하게 하는 양식 목차1 개요2 문법3 예제 개요 type이 range인 input은 지정한 범위 내의 숫자를 선택할 수 있게 하는 양식이다. 슬라이드로 값을 선택한다. 문법 <input type="range" min="x" max="x" step="x" value="x"> min : 최솟값으로, 기본값은 0이다. max : 최댓값으로, 기본값은 100이다. step : 숫자들 사이의 간격으로, 기본값은 1이다. value : 초기값으로, min과 max의 평균이다. […] HTML / input / number / 숫자 입력하는 양식 목차1 input type="number"2 소수도 입력 가능하게 하기 input type="number" input 태그의 type을 number로 하면 숫자만 입력할 수 있다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> * { font-family: Consolas, monospace; font-size: 24px; } </style> </head> <body> <form method="get" action=""> <p><input type="number" name="number" placeholder="Input number"></p> <p><input type="submit" value="Submit"></p> </form> […] HTML / input / hidden / 입력하지 않은 값을 넘기는 숨겨진 양식 양식은 보통 사용자가 입력한 값을 활용하기 위해 사용한다. 하지만, 사용자가 입력하지 않아도 필요한 값이 있을 수 있다. 사용자가 접속한 IP, 로그인한 상태에서의 계정 정보, 게시물의 답글인 경우 게시물의 ID 등을 예로 들 수 있다. 이러한 값들은 type이 hidden인 input 태그로 만들어서 넘긴다. 다른 type의 input과 마찬가지로 이름은 name, 값은 value로 […] HTML / video / 동영상 삽입하는 태그 목차1 개요2 문법3 예제 14 예제 2 개요 video는 HTML 문서에 동영상을 삽입하는 태그이다. HTML5에서 추가된 것이므로, HTML5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않는다. 문법 <video autoplay controls loop muted poster="aaa" preload="bbb"> <source src="xxx" type="yyy"> zzz </video> autoplay : 동영상을 자동으로 재생한다. controls : 재생, 정지 등 […] HTML / textarea / 여러 줄의 문자열을 입력할 수 있는 양식 textarea textarea는 여러 줄의 긴 문장을 입력할 수 있는 양식이다. 문법 <textarea></textarea> 예제 col 속성(attribute)으로 가로 크기를, row 속성으로 세로 크기를 정할 수 있다. 하지만, 크기 등 모양은 CSS에서 정하는 게 좋다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { font-size: 16px; font-family: Consolas, sans-serif; } </style> […] HTML / placeholder / 양식에 안내 문구 추가하기 input 태그에 value를 이용해서 기본값을 만들 수 있다. 이 상태에서 버튼을 클릭하면 기본값이 전송된다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { font-size: 16px; font-family: Consolas, sans-serif; } </style> </head> <body> <form> <p><input type="text" name="name" value="Name"></p> <p><input type="submit" value="Submit"></p> </form> </body> </html> 만약 기본값이 아니라, 무엇을 입력해야 […] HTML / input / date, time / 날짜, 시간 입력하는 양식 목차1 input type="date"1.1 문법1.2 예제 1 - 기본 양식1.3 예제 2 - 기본값이 있는 양식1.4 예제 3 - 입력 가능 범위가 있는 양식2 input type="time"2.1 문법2.2 예제 1 - 기본 양식2.3 예제 2 - 기본값과 입력 가능 범위가 있는 양식 input type="date" type이 date인 input은 날짜를 입력 받기 위한 양식이다. […] HTML / form / 데이터를 전달하는 양식 만들기 form은 데이터를 입력 받고 전송할 때 사용하는 태그이다. 목차1 문법2 예제 1 - GET 방식으로 값 전달3 예제 2 - POST 방식으로 값 전달4 예제 3 - 전달 받은 값 사용하기 문법 <form method="xxx" action="yyy"> ... </form> method : 값을 전송하는 방법으로 get 또는 post를 입력한다. action : 값을 전달할 […] HTML / input / checkbox / 체크박스 만들기 목차1 체크박스2 문법3 예제 1 - 기본4 예제 2 - checked5 예제 3 - 배열로 값 넘기기 체크박스 체크박스는 클릭하면 선택되고, 다시 클릭하면 선택이 해제되는 사각형 모양의 박스이다. 체크박스는 input 태그로 만든다. 문법 <input type="checkbox" name="xxx" value="yyy" checked> name : 전달할 값의 이름이다. value : 전달될 값이다. checked : 선택된 […] HTML / input / radio / 라디오 버튼 만들기 목차1 라디오 버튼2 문법3 예제 14 예제 25 예제 36 Tip 라디오 버튼 여러 개의 항목 중에서 하나만 선택하도록 하는 동그란 버튼을 라디오 버튼이라고 한다. 라디오 버튼은 input 태그로 만든다. 문법 <input type="radio" name="xxx" value="yyy" checked> name : name의 값이 같은 것 중에서 하나를 선택한다. value : 선택했을 때 전달될 […] HTML / em, strong / 강조하는 텍스트, 중요한 텍스트 em, strong em 태그는 강조하는 텍스트에 사용한다. 기본 모양은 기울임꼴이다. strong 태그는 중요한 텍스트에 사용한다. 기본 모양은 굵은 글자이다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> body { font-size: 64px; } </style> </head> <body> <p>Lorem <em>Ipsum</em> <strong>Dolor</strong>.</p> </body> </html> b 태그는 글자를 굵게 만든다. 의미 부여 없이 […] HTML / progress - 진행 정도 나타내는 바 만드는 태그 목차1 progress2 예제 13 예제 2 progress progress는 진행 정도 나타내는 바를 만드는 태그이다. HTML5에서 추가되었다. 주요 속성은 max, value이다. max를 전체로 보았을 때 value에 해당하는 정도를 나타낸다. 예제 1 첫 번째 바는 전체를 100으로 보았을 때 20을 나타낸다. 두 번째 바는 전체를 200으로 보았을 때 20을 나타낸다. 웹브라우저에 따라, […] 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> […] HTML / img / 이미지 삽입하는 태그 목차1 img2 예제 13 예제 24 예제 3 img img는 HTML 문서에 이미지를 삽입하는 태그이다. 주요 속성은 다음과 같다. src : 이미지의 경로 alt : 이미지를 표시할 수 없을 때 출력할 내용 width : 이미지의 가로 크기 height : 이미지의 세로 크기 loading : 이미지 로딩 방식 예제 1 width, […] 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; […] HTML / br / 줄바꿈하는 태그 HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식한다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현된다. 만약 블록 요소 안에서 줄바꿈을 하고 싶다면 br 태그를 이용한다. 다음은 br 태그를 이용해서 줄바꿈을 한 예제이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> […] HTML / address - 문서의 소유자, 작성자의 연락처를 나타내는 태그 address address는 소유자 또는 작성자의 연락처를 나타내는 태그입니다. body 태그 안에 있으면 문서의 소유자 또는 작성자의 연락처를 나타냅니다. article 태그 안에 있으면 기사의 소유자 또는 작성자의 연락처를 나타냅니다. 기본 모양은 기울임꼴입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. […] HTML / h1, h2, h3, h4, h5, h6, p / 제목과 문단 목차1 제목2 문단3 예제 14 예제 25 예제 3 제목 제목(heading)은 h1, h2, h3, h4, h5, h6 태그로 만든다. 문서의 구조와 밀접한 관련이 있으므로 순서에 맞게 사용하는 게 좋다. 문단 문단(paragraph)은 p 태그로 만든다. 문단과 문단 사이는 간격이 크다. 문단 내에서 줄바꿈을 하고 싶다면 br 태그를 이용한다. 예제 1 제목의 기본 […] HTML / select / 선택할 수 있는 목록을 만드는 태그 목차1 select2 문법3 속성4 예제 select select는 선택할 수 있는 목록을 만들 때 사용한다. 목록의 내용은 option 태그로 만든다. 문법 <select> <option>...</option> <option>...</option> <option>...</option> </select> 속성 select 태그에 사용하는 주요 속성은 다음과 같다. autofocus : 페이지가 로드되었을 때 해당 목록으로 바로 포커스가 맞춰진다. disabled : 화면에는 보이지만 사용할 수 없도록 만든다. multiple […] HTML / noscript 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>'); </script> <noscript> <h1>Your browser does not support JavaScript</h1> </noscript> </body> </html> 스크립트를 지원하는 웹브라우저에서는 Your […] HTML / figure, figcaption / 이미지 등을 감싸고 캡션 만드는 태그 figure, figcaption figure는 사진, 이미지, 다이어그램 등을 감싸는 테그이다. figcaption은 figure 요소에 캡션을 만든다. figure 요소의 자식 요소이며, 제일 처음 또는 제일 마지막에 위치시킨다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Reference | figcaption</title> </head> <body> <p>Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p> <figure> <figcaption>First […] 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 / abbr - 약자(abbreviation)임을 나타내는 태그 abbr abbr은 약자(abbreviation)임을 나타냅니다. 문법 <abbr title="Xxx Yyy Zzz">XYZ</abbr> title 속성에 약자의 뜻을 넣으면, 마우스를 약자 위에 올렸을 때 그 뜻이 툴팁으로 나옵니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Reference | abbr</title> </head> <body> <p> <abbr title="World Wide Web">WWW</abbr> and <abbr title="Hyper Text Markup Language">HTML</abbr> </p> </body> […] HTML / pre / 입력한 그대로 출력하는 태그 pre HTML은 연속한 여러 개의 빈칸이나 탭, 줄바꿈을 하나의 빈칸으로 인식한다. 예를 들어 다음 문서의 내용은 한 줄로 나온다. <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. </body> </html> 만약 입력한 그대로 출력되도록 하려면 pre 태그를 이용한다. 기본 글꼴은 고정폭 글꼴이다. […] HTML / table, thead, tbody, tfoot, th, tr, td / 표 만들기 표 만들 때 사용하는 태그 표는 table 태그로 만든다. 행은 tr 태그로 만든다. 열의 제목이 들어가는 셀은 th 태그로 만든다. 내용이 들어가는 셀은 td 태그로 만든다. 각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분 지을 수도 있다. 가로로 이웃한 셀을 합칠 때에는 colspan 속성을 사용한다. 세로로 이웃한 셀을 합칠 […]