HTML / br / 줄바꿈하는 태그

HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식한다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현된다.

만약 블록 요소 안에서 줄바꿈을 하고 싶다면 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>

첫 번째 문단은 코드 상에서 줄바꿈을 했지만 웹브라우저에서는 띄어쓰기로 표현된다. 두 번째 문단은 br 태그가 있는 곳에서 줄바꿈이 이루어진다.

만약 연속한 띄어쓰기를 하고 싶다면 &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 / abbr - 약자(abbreviation)임을 나타내는 태그

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 / placeholder / 양식에 안내 문구 추가하기

HTML / placeholder / 양식에 안내 문구 추가하기

input 태그에 value를 이용해서 기본값을 만들 수 있다. 이 상태에서 버튼을 클릭하면 기본값이 전송된다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { font-size: 16px; ...

HTML / ol, ul, dl / 순서 있는 목록, 순서 없는 목록, 정의 목록

HTML / ol, ul, dl / 순서 있는 목록, 순서 없는 목록, 정의 목록

순서 있는 목록 - ol 순서 있는 목록(Ordered List)은 1, 2, 3, ···처럼 차례대로 증가하는 번호가 붙는 목록이다. 순서 있는 목록은 ol로, 목록의 내용은 li로 만든다. ​​​​<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <h1>Ordered List</h1> <ol> ...

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> 예제 ...

HTML / figure, figcaption / 이미지 등을 감싸고 캡션 만드는 태그

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 ...

HTML / address - 문서의 소유자, 작성자의 연락처를 나타내는 태그

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 ...

HTML / input / radio / 라디오 버튼 만들기

HTML / input / radio / 라디오 버튼 만들기

라디오 버튼 여러 개의 항목 중에서 하나만 선택하도록 하는 동그란 버튼을 라디오 버튼이라고 한다. 라디오 버튼은 input 태그로 만든다. 문법 <input type="radio" name="xxx" value="yyy" checked> name : name의 값이 같은 것 중에서 하나를 선택한다. value : 선택했을 때 전달될 값이다. checked : 선택된 상태로 만든다. 예제 1 Apple 또는 Banana 중 하나만 선택한다.(중복 선택이 가능하게 하려면 체크박스를 만든다.) 아무것도 선택되지 ...

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 제목의 기본 모양은 굵은 글자이고, 레벨에 따라 크기가 다르다. h4와 p는 글자 크기가 같다. <!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 / input / date, time / 날짜, 시간 입력하는 양식

HTML / input / date, time / 날짜, 시간 입력하는 양식

input type="date" type이 date인 input은 날짜를 입력 받기 위한 양식이다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다르다. IE는 지원하지 않는다. 아래 스크린샷은 크롬 기준이다. 문법 <input type="date" value="xxx" min="yyy" max="zzz"> value : 선택 항목으로, 기본 날짜를 정한다. min : 선택 항목으로, 입력 가능한 가장 빠른 날짜이다. max : 선택 항목으로, 입력 가능한 가장 늦은 날짜이다. 예제 1 - 기본 ...

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. ...