HTML / Reference / pre
개요
pre 태그는 HTML에서 "preformatted text"를 정의하는 데 사용됩니다. 이 태그는 HTML 문서에서 텍스트를 작성한 그대로 표시하도록 하여, 공백과 줄바꿈을 유지하는 특징이 있습니다. 일반적으로 코드 블록, ASCII 아트, 또는 공백과 줄바꿈을 유지해야 하는 텍스트를 표시할 때 사용됩니다.
예제
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 lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<pre>
Lorem ipsum dolor.
Lorem ipsum dolor.
Lorem ipsum dolor.
</pre>
</body>
</html>
자동으로 줄바꿈 되도록 하기
pre 태그를 이용하면 문장이 길 경우 줄바꿈이 되지 않고 영역 바깥으로 나갑니다.
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<pre>
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.
</pre>
</body>
</html>
만약 영역 끝에서 자동 줄바꿈이 되도록 하려면 style에 word-wrap: break-word;를 추가합니다.
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
pre {
word-wrap: break-word;
}
</style>
</head>
<body>
<pre>
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.
</pre>
</body>
</html>
개요 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과의 차이점입니다.
개요 img는 HTML 문서에 이미지를 삽입하는 태그입니다. 문법 <img src="xx" alt="xx" width="xx" height="xx" loading="xx"> src : 이미지의 경로 alt : 이미지를 표시할 수 없을 때 출력할 내용 width : 이미지의 가로 크기 height : 이미지의 세로 크기 loading : 이미지 로딩 방식 예제 1 width, height 속성을 정하지 않으면 이미지 원본 크기 그대로 나옵니다. 만약 지정한 경로에 이미지가 없다면 alt 속성에 ...
HTML / Reference / input type="time"
개요 type이 time인 input은 시간을 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다. 아래 스크린샷은 크롬 기준입니다. 문법 <input type="time" value="xxx" min="yyy" max="zzz"> value : 선택 항목으로, 기본 시간을 정합니다. min : 선택 항목으로, 입력 가능한 가장 빠른 시간입니다. max : 선택 항목으로, 입력 가능한 가장 늦은 시간입니다. 예제 - 기본 양식 시간을 입력 받는, 선택 ...
HTML / Reference / input type="radio"
개요 여러 개의 항목 중에서 하나만 선택하도록 하는 동그란 버튼을 라디오 버튼이라고 합니다. 라디오 버튼은 input 태그로 만듭니다. 문법 <input type="radio" name="xxx" value="yyy" checked> name : name의 값이 같은 것 중에서 하나를 선택합니다. value : 선택했을 때 전달될 값입니다. checked : 선택된 상태로 만듭니다. 예제 1 Apple 또는 Banana 중 하나만 선택합니다. 아무것도 선택되지 않은 상태에서 시작합니다. <!doctype html> <html lang="ko"> ...
HTML / Reference / input type="hidden"
개요 양식은 보통 사용자가 입력한 값을 활용하기 위해 사용합니다. 하지만, 사용자가 입력하지 않아도 필요한 값이 있을 수 있습니다. 사용자가 접속한 IP 로그인한 상태에서의 계정 정보 게시물의 답글인 경우 게시물의 ID 이러한 값들은 type이 hidden인 input 태그로 만들어서 넘깁니다. 다른 type의 input과 마찬가지로 이름은 name, 값은 value로 정합니다. 문법 <input type="hidden" name="xxx" value="yyy"> 예제 다음은 size의 값을 big으로 정하고 넘기는 ...
개요 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>'); ...
개요 address는 소유자 또는 작성자의 연락처를 나타내는 태그입니다. body 태그 안에 있으면 문서의 소유자 또는 작성자의 연락처를 나타냅니다. article 태그 안에 있으면 기사의 소유자 또는 작성자의 연락처를 나타냅니다. 기본 모양은 기울임꼴입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p>Lorem ipsum dolor sit amet, ...
개요 form은 데이터를 입력 받고 전송할 때 사용하는 태그입니다. 입력 받은 값을 어디로 전송할지, 어떤 방식으로 전송할지 정합니다. <form>과 </form> 사이에 input, select, textarea 등 양식이 들어갑니다. 문법 <form method="xxx" action="yyy"> ... </form> method : 값을 전송하는 방법으로 get 또는 post를 입력합니다. action : 값을 전달할 페이지를 입력합니다. 입력하지 않으면 현재 페이지로 전송합니다. form 안에 form을 넣으면 제대로 작동하지 않습니다. 예제 ...
개요 HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식합니다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현됩니다. 만약 블록 요소 안에서 줄바꿈을 하고 싶다면 br 태그를 이용합니다. 예제 다음은 br 태그를 이용해서 줄바꿈을 한 예제입니다. 첫 번째 문단은 코드 상에서 줄바꿈을 했지만 웹브라우저에서는 띄어쓰기로 표현됩니다. 두 번째 ...
HTML / Reference / 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 ...