html 기본 문서 만들기 6 - br 태그 이용하여 새로운 줄로 넘어가기(개행하기)
네 안녕하세요, 이번 포스팅에서는 웹에서 새로운 줄로 넘어가는 기능을 구현하는 개행 방법을 알아보도록 하겠습니다.
우리가 html을 다룰 때에는 그냥 엔터키만 누른다고 개행이 되는 것이 아닙니다.
특별한 태그를 써줘야 다른 줄로 넘어갑니다.
그래서 IDE 프로그램을 쓰면서 그냥 엔터를 눌러서 줄이 바뀌었다고 안심하면 안 됩니다.
그럼 지금부터 그 방법이 무엇인지 알아보도록 하겠습니다.
1. 새로운 줄로 넘어가기(개행) : br 태그 사용
우리가 어떤 글을 작성하다가 글을 다 썼거나 새 줄에서 이어 쓰고 싶을 때는 엔터키를 눌러 개행을 합니다.
그런데 html 태그에서는 그냥 엔터를 누르면 스페이스바를 누를 것과 같이 공백 한 칸만 띄어지므로,
반드시 다른 방법을 사용해서 나타내야 합니다.
그럴 때 사용하는 게 <br> 태그이고, 이를 사용하면 엔터키를 누른 것과 같은 기능을 합니다.
그럼 예제 코드를 같이 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>새로운 줄 넘어가기</title>
</head>
<body>
<h3>새로운 줄 넘어가기</h3>
<hr>
<br> 태그로 다음 줄로 넘어갑니다.<br>
2 개의 <br> 태그로 두 번 넘어갑니다.<br><br>
잘 보이나요?
</body>
</html>
여기 보시면 br 태그가 한 번 적힌 곳이 있고, 두 번 적힌 곳이 있을 겁니다.
br 태그를 한 번만 쓰면 개행을 한 번 했다는 뜻이 되고,
두 번을 이어 붙여 썼다면 개행을 두 번 했다는 뜻이 됩니다.
그래서 가독성을 위해서 한 번을 해야 하는 상황이 있을 거고,
두 번을 해야 하는 상황이 있을 거기 때문에 상황에 따라서 적절하게 쓰면 됩니다.
그럼 결과 화면을 같이 보도록 하겠습니다.
보시면 br 태그를 한 번 쓴 곳은 한 줄이 넘어갔고,
두 번 쓴 곳은 줄이 두 번 넘어간 게 보이죠?
이런 식으로 활용을 하시면 됩니다.
그러니 여러분들이 글을 쓰다가 개행을 해야만 하는 상황이 생긴다,
그러면 이렇게 br 태그를 사용하여 개행을 하시면 됩니다.
여기까지 개행을 하는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 특수한 문자와 기호, 심벌 등을 입력하는 방법에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사드립니다~
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html 기본 문서 만들기 8 - pre 태그를 이용하여 개발자의 포맷 그대로 출력하기 (0) | 2023.03.01 |
|---|---|
| html 기본 문서 만들기 7 - 특수한 문자, 기호, 심벌 입력하기 (0) | 2023.03.01 |
| html 기본 문서 만들기 5 - hr 태그로 수평선 긋기 (0) | 2023.03.01 |
| html 기본 문서 만들기 4 - p 태그로 문단 나누기 (0) | 2023.02.28 |
| html 기본 문서 만들기 3 - title 속성으로 툴팁 달기 (0) | 2023.02.28 |
댓글