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. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</p> <address> E-Mail : xxx@xxx.xxx<br> Address : Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> TEL : 123-123-123-123 </address> </body> </html>
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"> ...
pre HTML은 연속한 여러 개의 빈칸이나 탭, 줄바꿈을 하나의 빈칸으로 인식한다. 예를 들어 다음 문서의 내용은 한 줄로 나온다. <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> Lorem ipsum dolor. Lorem ipsum dolor. ...
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 / 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 태그는 글자를 굵게 만든다. 의미 부여 없이 굵게 만든다는 것이 strong과의 차이점이다.
기본 문법 가장 기본적인 문법은 다음과 같다. <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"> ...
인용임을 나타내는 태그에는 q와 blockquote가 있다. q는 인라인 요소이고, blockquote는 블록 요소이다. 문법 <q cite="xxx">...</q> <blockquote cite="xxx">...</blockquote> 인용의 출처는 cite 속성으로 나타낸다. cite 속성 입력은 선택 사항이고, 웹브라우저에서는 보이지 않는다. 예제 1 q 요소의 기본 모양은 인용 문구를 큰 따옴표로 감싸는 것이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> ...
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 ...
HTML / progress - 진행 정도 나타내는 바 만드는 태그
progress progress는 진행 정도 나타내는 바를 만드는 태그이다. HTML5에서 추가되었다. 주요 속성은 max, value이다. max를 전체로 보았을 때 value에 해당하는 정도를 나타낸다. 예제 1 첫 번째 바는 전체를 100으로 보았을 때 20을 나타낸다. 두 번째 바는 전체를 200으로 보았을 때 20을 나타낸다. 웹브라우저에 따라, 웹브라우저의 버전에 따라 표현 방식이 다르다. <!doctype html> <html lang="ko"> <head> <meta ...
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>'); ...