HTML / br / 줄바꿈하는 태그

HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식합니다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현됩니다. 만약 블록 요소에서 줄바꿈을 하고 싶다면 br 태그를 이용합니다.

다음은 br 태그를 이용해서 줄바꿈을 한 예제입니다. 첫 번째 문단은 코드 상에서 줄바꿈을 했지만 웹브라우저에서는 띄어쓰기로 표현되고, 두 번째 문단은 br 태그가 있는 곳에서 줄바꿈이 이루어집니다.

<!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>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla.<br>
			Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.
		</p>
	</body>
</html>

만약 연속한 띄어쓰기를 하고 싶다면 &nbsp;를 입력합니다.

<!doctype html>
<html lang="ko">
	<head>
	<meta charset="utf-8">
		<title>HTML</title>
	</head>
	<body>
		<p>Lorem&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ipsum dolor</p>
	</body>
</html>

Related Posts

HTML / input / checkbox / 체크박스 만들기

HTML / input / checkbox / 체크박스 만들기

체크박스 체크박스는 클릭하면 선택되고, 다시 클릭하면 선택이 해제되는 사각형 모양의 박스입니다. 체크박스는 input 태그로 만듭니다. 문법 <input type="checkbox" name="xxx" value="yyy" checked> name : 전달할 값의 이름입니다. value : 전달될 값입니다. checked : 선택된 상태로 만듭니다. 예제 1 Blue 또는 Red를 선택합니다. 둘 다 선택할 수 있습니다.(라디오 버튼은 하나만 선택할 수 있습니다.) 아무것도 선택되지 않은 상태에서 시작합니다. <!doctype html> <html lang="ko"> ...

HTML / pre / 입력한 그대로 출력하는 태그

HTML / pre / 입력한 그대로 출력하는 태그

pre HTML은 연속한 여러 개의 빈칸이나 탭, 줄바꿈을 하나의 빈칸으로 인식합니다. 예를 들어 다음 문서의 내용은 한 줄로 나옵니다. <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> Lorem ipsum dolor. Lorem ipsum dolor. ...

HTML / label / 폼의 양식에 이름 붙이는 태그

HTML / label / 폼의 양식에 이름 붙이는 태그

label label은 폼의 양식에 이름 붙이는 태그입니다. 주요 속성은 for입니다. label의 for의 값과 양식의 id의 값이 같으면 연결됩니다. label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나 체크를 하거나 체크를 해제합니다. 예제 input 요소에 label을 붙인 간단한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p> <label for="jb-input-text">Input - Text</label> <input type="text" id="jb-input-text"> </p> <p> <label for="jb-input-checkbox">Input - Checkbox</label> <input type="checkbox" id="jb-input-checkbox"> </p> </body> </html> Tip input 등 양식을 label로 감싸면, id와 for가 ...

HTML / form / 데이터를 전달하는 양식 만들기

HTML / form / 데이터를 전달하는 양식 만들기

form form은 데이터를 입력 받고 전송할 때 사용하는 태그입니다. 문법 <form method="xxx" action="yyy"> ... </form> method : 값을 전송하는 방법입니다. get 또는 post를 입력합니다. action : 값을 전달할 페이지를 입력합니다. 예제 1 get 방식으로 값을 전달하는 간단한 양식입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * ...

HTML / noscript

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>'); ...

HTML / table, thead, tbody, tfoot, th, tr, td / 표 만들기

HTML / table, thead, tbody, tfoot, th, tr, td / 표 만들기

표 만들 때 사용하는 태그 표는 table 태그로 만듭니다. 행은 tr 태그로 만듭니다. 열의 제목이 들어가는 셀은 th 태그로 만듭니다. 내용이 들어가는 셀은 td 태그로 만듭니다. 각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분지을 수도 있습니다. 가로로 이웃한 셀을 합칠 때에는 colspan 속성을 사용합니다. 세로로 이웃한 셀을 합칠 때에는 rowspan 속성을 사용합니다. 표 제목은 caption 태그로 만듭니다. 예제 위의 ...

HTML / textarea / 여러 줄의 문자열을 입력할 수 있는 양식

HTML / textarea / 여러 줄의 문자열을 입력할 수 있는 양식

textarea textarea는 여러 줄의 긴 문장을 입력할 수 있는 양식입니다. 문법 <textarea></textarea> 예제 col 속성(attribute)으로 가로 크기를, row 속성으로 세로 크기를 정할 수 있습니다. 하지만, 크기 등 모양은 CSS에서 정하는 게 좋습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { ...

HTML / em, strong / 강조하는 텍스트, 중요한 텍스트

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> TIP b 태그는 글자를 굵게 만듭니다. 의미 부여 없이 굵게 만든다는 것이 strong과의 차이점입니다.

HTML / h1, h2, h3, h4, h5, h6, p / 제목과 문단

HTML / h1, h2, h3, h4, h5, h6, p / 제목과 문단

제목 제목(heading)은 h1, h2, h3, h4, h5, h6 태그로 만듭니다. 문서의 구조와 밀접한 관련이 있으므로 순서에 맞게 사용하는 게 좋습니다. 문단 문단(paragraph)은 p 태그로 만듭니다. 문단과 문단 사이는 간격이 큽니다. 문단 내에서 줄바꿈을 하고 싶다면 br 태그를 이용합니다. 예제 1 제목과 문단이 있는 간단한 문서입니다. 제목의 기본 모양은 굵은 글자이고, 레벨에 따라 크기가 다릅니다. <!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 ...

HTML / progress - 진행 정도 나타내는 바 만드는 태그

HTML / progress - 진행 정도 나타내는 바 만드는 태그

progress progress는 진행 정도 나타내는 바를 만드는 태그입니다. HTML5에서 추가되었습니다. IE는 버전 10부터 지원합니다. 주요 속성은 max, value입니다. max를 전체로 보았을 때 value에 해당하는 정도를 나타냅니다. 예제 1 첫 번째 바는 전체를 100으로 보았을 때 20을 나타냅니다. 두 번째 바는 전체를 200으로 보았을 때 20을 나타냅니다. 웹브라우저마다 표현 방식이 다릅니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <div> <progress value="20" max="100"></progress> </div> <div> <progress value="20" max="200"></progress> </div> </body> </html> 예제 ...