HTML
줄바꿈과 공백 - br,
줄바꿈 HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식합니다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현됩니다. 만약 블록 요소에서 줄바꿈을 하고 싶다면 <br>…
표 만드는 방법 - table, th, tr, td
표 만들 때 사용하는 태그 <table> : 표를 만듭니다. <tr> : 행을 만듭니다. <th> : 열의 제목이 들어가는 셀을 만듭니다. <td> : 내용이 들어가는 셀을 만듭니다…
표에 제목이나 설명을 추가하는 방법 - caption, figcaption
표(table)에 제목이나 설명을 덧붙일 때 <caption> 태그를 사용하지만 <figcaption> 태그를 사용할 수도 있습니다. 두 가지 방법 모두 알아보겠습니다.
목록 만드는 방법 - ol, ul, dl
목록에는 순서가 있는 목록(Ordered List), 순서가 필요하지 않은 목록(Unordered List), 설명 목록(Description List) 세 가지가 있습니다. 순서가 있는 목록(OL) 순서가 없는 목록(UL) 설…
선택 가능한 목록을 만드는 방법 - select, optgroup, datalist
사용자가 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용합니다. 드롭다운 목록이란 클릭했을 때 옵션들이 요소 아래쪽으로 펼쳐지기 때문에 붙여진 이름입니다. 공간을 최소한을 사용하면서 여러 옵션을 표시하려면 드롭다운 목록이 가…
링크(link) 만드는 방법 - a, href
링크 만들 때 사용하는 태그 링크(link)는 <a> 태그로 만듭니다. 링크의 대상은 웹페이지, 파일, 이메일 등이 될 수 있습니다.
오디오 삽입하는 방법 - audio
audio HTML5에서 배경 음악이나 효과음 등 오디오를 삽입할 때는 <audio> 태그를 사용합니다. 이때 대부분의 브라우저에서 mp3 파일을 지원하기 때문에 mp3 파일을 사용하는 것이 좋습니다.
참조 또는 인용 문구를 나타내는 방법 - q, blockquote
인용 다른 블로그나 웹 사이트의 글을 인용할 경우, 인용임 나타내는 태그에는 <blockquote> 와 <q> 가 있습니다. <blockquote> 태그는 새로운 문단에서 인용하는 블록 요소이고, <…
작성한 형태 그대로 보이게 하는 방법 - pre
pre HTML에서는 아무리 많은 공백을 넣더라도 브라우저 창에는 한 개의 공백만 표시됩니다. 연속한 여러 개의 빈칸이나 탭, 줄바꿈을 하나의 빈 칸으로 인식하고 페이지의 내용이 한 줄로 표시합니다. 만약 입력한 그대로 출력되도록 …
라디오 버튼 만드는 방법 - input - radio
라디오 버튼 라디오 버튼은 여러 개의 항목 중에서 하나만 선택하도록 하는 동그란 버튼입니다. 라디오 버튼은 <input> 태그로 만듭니다.
체크박스 만드는 방법 - input - checkbox
체크박스 체크박스는 두 개 이상 여러 가지를 선택해야 할 경우 사용합니다. 클릭하면 선택되고, 다시 클릭하면 선택이 해제됩니다. 체크박스는 <input> 태그로 만듭니다.
날짜, 시간 입력받는 방법 - input - date, time
input type="date" type 을 date 로 지정하면 날짜를 입력받을 수 있습니다. 웹브라우저마다 표현 방식이 다릅니다.
문의 양식에 안내 문구 넣는 방법 - placeholder
placeholder 무엇을 입력해야 하는지 안내하는 문구를 넣고 싶다면 placeholder를 사용합니다. 예를 들어 '네이버' 같은 포털 사이트의 로그인 창에서도 따로 '아이디'나 '비밀번호…
문의 양식에 제목, 설명 덧붙이는 방법 - 라벨(label)
<label> 태그는 양식에 제목이나 설명을 덧붙이기 위한 것입니다. 라벨(label) 이란 입력창 옆에 'ID' 나 '비밀번호' 처럼 붙여 놓은 텍스트를 말합니다. <label> 태그를 사…
