소개
이 랩에서는 HTML <br> 태그를 사용하여 웹 페이지에서 줄 바꿈을 만드는 방법을 배우게 됩니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.
HTML 파일 생성
index.html이라는 새 파일을 만들고 기본 HTML 구조를 추가합니다.
<!doctype html>
<html>
<head>
<title>Line Breaks with HTML</title>
</head>
<body></body>
</html>
웹 페이지에 텍스트 추가
HTML 문서의 body 에 텍스트를 추가합니다.
<body>
<h1>Welcome to my webpage!</h1>
<p>This is some text on my webpage. I want to create a line break here:</p>
<p>But how do I do it?</p>
</body>
태그를 사용하여 줄 바꿈
두 단락의 텍스트 사이에 줄 바꿈을 추가하려면, 첫 번째 단락 태그 뒤에 <br> 태그를 추가합니다.
<body>
<h1>Welcome to my webpage!</h1>
<p>This is some text on my webpage. I want to create a line break here:</p>
<br />
<p>But how do I do it?</p>
</body>
CSS margin 으로 줄 간격 사용자 정의
줄 바꿈이 생성하는 공간의 양을 사용자 정의하려면 CSS margin 을 사용할 수 있습니다. 각 줄 바꿈 위와 아래에 30px 의 공간을 생성하려면 다음 CSS 코드를 HTML 파일에 추가하십시오.
<head>
<title>Line Breaks with HTML</title>
<style>
br {
margin-top: 30px;
margin-bottom: 30px;
}
</style>
</head>
index.html 파일을 저장하고 웹 브라우저에서 열어 생성한 줄 바꿈을 확인하십시오.
요약
HTML <br> 태그는 웹 페이지에서 줄 바꿈을 생성하는 간단한 방법입니다. 텍스트 단락 사이 또는 줄을 바꿔야 하는 다른 곳에 공간을 추가하는 데 사용하십시오. CSS margin 을 사용하면 줄 바꿈으로 생성되는 공간의 양을 쉽게 사용자 정의할 수 있습니다.
