웹 개발을 위한 HTML 가이드 11편 - 문단 태그(p)
분류포스트
작성일2021-08-24 14:25
수정일2021-11-14 00:35
웹 개발을 위한 HTML 가이드는 HTML을 모르는 분들이 HTML의 기능들에 대해서 배우고 웹 페이지의 뼈대를 구성할 수 있게 도와주는 시리즈 입니다. 순수하게 강의 목적만 있는 것은 아니며 제가 다시 처음부터 공부한다는 생각으로 조사하고 복습하는 느낌으로 작성하고 있습니다. 가이드 전체의 흐름은 가이드 모음 글을 참고하시면 됩니다.
개요
저번 글에서는 제목 태그에 대해 알아봤습니다. 이번 글에서 알아볼 내용은 문단 태그입니다. 제목이 있다면 문단이 있다고 저번 글에서 이야기를 했었죠. 하지 않았어도 이건 당연합니다! 제목 태그를 알아봤으니 이제는 문단 태그에 대해서 알아볼 시간입니다.
웹 개발을 위한 HTML 가이드 11편 시작합니다.
문단을 나타내는 p태그
HTML에서 문단을 나타내는 태그는 바로 p태그입니다. Pragraph의 약자로 말 그대로 문단을 만들어줍니다. p태그는 블럭 태그의 특징을 띄고 대부분의 경우에는 제목 태그와 함께 쓰이는 편입니다.
자, 그럼 메모장을 열고 HTML의 기본 구조를 작성한 뒤에 다음과 같은 코드를 넣어보고 html파일로 저장한 뒤에 실행해봅시다.
<p>이것은 문단 태그입니다.</p>
그러면 아래의 이미지처럼 글자가 나타난 것을 볼 수 있죠. 제목과는 다르게 굵지도 않고 크기가 크지도 않습니다. 이게 바로 본문에 해당하는 태그입니다. 이런 블로그 같은 곳에는 p태그가 특히나 많이 사용됩니다. 가령 뉴스기사 페이지 같은 곳에서 많이 쓰는 셈이죠. p태그에 대한 사용 방법은 이게 전부입니다.
그런데 이렇게 끝나면 참 아쉽죠. 몇가지를 더 알아보도록 합시다.
<p>
태그 안에서 아무리
엔터를 쳐서 여러줄을 적더라도
줄바꿈은 일어나지 않습니다.
</p>
위처럼 적으면 어떻게 될까요? 적힌 내용처럼 줄바꿈이 되지 않습니다. 한 번 확인해볼까요?
이렇게 아무 일도 일어나지 않았습니다. HTML에서 줄바꿈을 하기 위해서는 새로운 태그를 알아야 합니다. 바로 개행 태그입니다.
개행을 나타내는 br태그
개행 태그는 p태그와 함께 사용되기도 하고 따로 사용되기도 합니다. 줄바꿈이 필요할 때에 혹은 빈 줄이 필요할 때에 사용하는 태그입니다. 바로 br태그라고 하는 태그인데 이는 Line break를 의미합니다. 그래서 개행 태그인 것이죠.
아래와 같이 사용합니다.
<p>
아이유 - 라일락<br />
아이유 - 코인
</p>
<br />
<br />
<br />
<p>아이유 - 에필로그</p>
여러번 사용하면 빈줄 여러개가 생깁니다. HTML은 이렇게 직관적인 기능을 갖고 있기 때문에 연습만 잘 한다면 익히는데에 별 문제는 없을 것이라고 생각합니다. br태그는 닫는 태그가 없습니다. 홀로 닫는 태그이기 때문에 혼자서 닫아주시면 됩니다.
실전 연습
그럼 이제 마지막으로 실습을 한 번 해보고 글을 마치도록 합시다. 바로 제목 태그와 함께 사용해서 간단한 문서 페이지를 만들어 보는겁니다. 우리가 저번 글에서 index.html에 추가했던 내용이 제목들이었죠. 이번 글에서는 여기에 본문을 추가해보는 것을 목적으로 코딩을 해보도록 합시다.
<h1>웹 개발의 3요소</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>JavsScript</h2>
이런 모양일텐데, 각 h2태그의 아래에 설명을 적어보도록 합시다. 아래처럼 간단하게 입력하면 됩니다.
<h1>웹 개발의 3요소</h1>
<h2>HTML</h2>
<p>HTML은 웹의 뼈대를 만들어주는 기능을 하는 마크업 언어입니다.</p>
<h2>CSS</h2>
<p>CSS는 HTML로 만든 뼈대에 피부를 만들어주고 화장을 시켜주는 스타일 시트 언어입니다.</p>
<h2>JavsScript</h2>
<p>자바스크립트는 HTML과 CSS를 동적으로 제어할 수 있는 웹의 뇌와 같은 언어입니다.</p>
이렇게 코딩을 하고 저장해봅시다. 그리고 실행을 하면..!
이처럼 간단한 문서가 만들어졌습니다. 여러분은 웹다운 웹을 처음으로 만들어 본 것입니다. 다시 한 번 지금까지의 내용을 설명을 하자면 h1태그는 한 페이지에 하나만 존재하는 게 표준으로 권장되고 있다고 했습니다. 그래서 하나를 넣었고 그 아래 h2태그들은 많아도 상관 없고 셋 다 같은 레벨의 목차이기 때문에 사용했습니다.
이렇게 HTML은 문서의 측면이 강하게 다가옵니다. 물론 이건 우리가 초기 단계의 HTML을 배우고 있기 때문이고, 간단한 것만 알아보고 있기 때문입니다. 훗날 디자인을 입히고 자바스크립트를 사용할 때가 되면 비로소 웹 어플리케이션, 웹 프로그램이 되는 셈입니다.
여러분이 잘 따라오셨다면 index.html의 내용은 아래의 코드와 같을 겁니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>웹 개발의 3요소</title>
</head>
<body>
<h1>웹 개발의 3요소</h1>
<h2>HTML</h2>
<p>HTML은 웹의 뼈대를 만들어주는 기능을 하는 마크업 언어입니다.</p>
<h2>CSS</h2>
<p>CSS는 HTML로 만든 뼈대에 피부를 만들어주고 화장을 시켜주는 스타일 시트 언어입니다.</p>
<h2>JavsScript</h2>
<p>자바스크립트는 HTML과 CSS를 동적으로 제어할 수 있는 웹의 뇌와 같은 언어입니다.</p>
</body>
</html>
오늘 만들어본 파일은 보관을 해두시기 바랍니다. 지금 당장 저장을 합시다! 다음 글에서도 계속 사용할 것이기 때문이죠. 저 같은 경우는 프로그래밍을 위한 폴더를 만들어놨고 그 안에 프로젝트별로 카테고리를 만들어서 그 카테고리의 안에 프로젝트 폴더들을 넣어둡니다. 이 블로그로 예를 들어보자면 web-coding/Blog/nihilog-code 이런 구조를 하고 있습니다.
어떤 구조로 프로젝트 폴더를 관리하든 그건 자유롭게 하시고 중요한 것은 보관을 해두는 겁니다. 앞으로 이 파일을 계속해서 발전시켜서 다양한 기능을 하게끔 만들어 볼 겁니다. HTML 가이드에서 사용하고 있는 이 파일은 깃허브에 올려두었습니다. 아래의 링크를 참고하시면 됩니다.
web-tuto 이 링크에서 HTML 폴더로 들어가시면 진행도 별로 폴더가 있습니다. 링크 태그를 추가해놓은 것은 미리 만들어놨으니까 무시하시고 2번을 보시면 됩니다.
이번 글에서는 문단 태그에 대해 알아봤고 개행 태그에 대해서도 알아봤습니다. 앞으로도 계속 쓰일 것이기 때문에 여러번 연습을 해보시면 좋을 겁니다. 다음 글은... HTML 가이드가 아닙니다. 다음 글에서는 정비 타임으로 텍스트 에디터를 만져보는 시간을 가질 겁니다. 언제까지고 이 불편한 메모장을 갖고 있을 수는 없거든요.
다음 글에서는 위에서 말했던 것처럼 VSCode에 대해서 알아볼 예정입니다. 그럼 이번 글도 고생많으셨습니다. 다음 글에서 봅시다!
글을 읽고 혹은 읽으면서 하고 싶은 말이 있다면 아래의 덧글창에 적어주시면 됩니다. 최대한 빠르게 확인하고 답변을 드리겠습니다. 이 글을 보신 모든 분들의 하루가 좋은 하루이길 바랍니다.