HTML에 줄 삽입 하는 방법

이 글은 HTML과 CSS에 수평선을 만드는 방법에 대한 내용이다. 수평선 규칙으로 알려진 수평선은 웹사이트에 있는 텍스트나 다른 내용을 분리하는데 사용할 수 있다. 가장 최신 방법으로 줄을 만드는 방법은 CSS와 HTML5를 이용하는 방법이지만, 아직도 "HR" HTML을 사용해서 만들 수 있다.(지금은)^{[1]X출처 검색하기}

방법 1

방법 1 의 2:

CSS/HTML5 사용하기

PDF 다운로드

1
HTML 문서를 열거나 만든다. 메모장과 같은 텍스트 에디터를 사용하여 HTML문서를 편집할 수 있다. Adobe Dreamweaver 같은 코드 에디터를 사용해도 된다. 다음 단계를 따라 HTML 문서를 연다:
- 메모장이나 텍스트 에디터/코드 에디터를 연다.
- 파일 메뉴를 클릭한다.
- 열기를 누른다.
- HTML 파일을 선택한다.
- 열기를 누른다.
2
HTML 문서에 head 추가하기. HTML 문서에 head가 없다면 다음과 같이 추가한다. head 는 "<html>"태그 뒤에, "<body>" 태그 앞에 와야 한다.
- 문서 위에<head> 를 입력한다.
- Enter를 두 번 눌러 새로운 2줄을 만든다.
- </head> 를 입력하여 head를 닫는다.
3
head에 <style type="text/css">를 입력하기. 스타일 태그는 두 개의 head 태그 사이에 와야 한다. 이렇게 하면 HTML을 꾸며줄 CSS 코드를 넣을 수 있는 공간이 생긴다.
- 대신에, 스타일 시트를 따로 만들어서 사용해도 된다.
hr {입력하기. 이는 수평선을 만들어주는 CSS 태그다. head 에 있는 스타일 태그 뒤에 이를 입력하거나 따로 만든 CSS 파일에 입력한다.
5
"<hr>" 태그에 CSS 스타일 추가하기. 이는 "hr {" 뒤에 온다. 수평선을 만드는 방법은 다양하다. 다음의 예시를 살펴보자.
- width: ##px; 를 입력해서 줄 너비 설정하기. ## 에 줄의 픽셀 너비를 입력한다. 픽셀(px) 대신 퍼센트(%)를 이용해도 된다.
- height: ##px;를 입력해서 줄 두께 설정하기. ##에 줄의 픽셀 두께를 입력한다.
- background-color: ##;를 입력해서 줄 색상 설정하기. ##에 색상 이름을 입력하거나, 파운드(#) 뒤에 16진법 색상 코드를 입력한다.
- margin-right: ##px;를 입력해서 오른쪽 끝의 픽셀 숫자 정하기. ## 에 숫자 또는 픽셀, "auto"를 입력한다. "auto" 를 사용하면 정해진 너비의 중간에 온다. 왼쪽과 오른쪽 끝에 남은 공간이 똑같이 나뉜다.
- margin-left: ##px; 를 입력하여 왼쪽 끝 픽셀 숫자 정하기. ## 에 숫자 또는 픽셀, "auto"를 입력한다. "auto" 를 사용하면 정해진 너비의 중간에 온다. 왼쪽과 오른쪽 끝에 남은 공간이 똑같이 나뉜다.^{[2]X출처 검색하기}
- margin-top: ##px; 를 입력하여 위에 공간을 주기. ## 에 공간 두께만큼 숫자나 픽셀을 입력한다.
- margin-bottom: ##px; 를 입력하여 줄 밑에 공간을 주기. ## 에 공간 두께만큼 숫자나 픽셀을 입력한다.
- border-width: ##px; 를 입력하여 줄 경계를 주기 (선택 사항) . ##에 경계 두께만큼 픽셀을 입력한다.
- border-color: ##; 를 입력하여 경계 색상 설정하기 (선택사항). ##에 색상 이름을 입력하거나, 파운드(#) 뒤에 16진법 색상 코드를 입력한다.
그러면 <hr> 태그 스타일 설정이 끝난다.
7
↵ Enter 를 누르고 </style> 입력하기. 그러면 새로운 줄이 생기는데, 그러고 나서 HTML 문서의 스타일 섹션을 마치는 태그를 입력한다. "</style>" 은 CSS를 이용해서 꾸민 HTML의 모든 요소를 입력한 다음에 붙인다.
8
HTML 문서 body 안의 원하는 곳에 <hr> 을 입력하기. HTML 태그의 body는 "<body>" 와 "</body>" 태그 사이를 말한다. 이렇게 하면 줄이 생긴다. HTML에 <hr> 태그를 이용한 곳마다 CSS 스타일 설정이 적용될 것이다.
9
HTML 파일 저장하기. 텍스트 파일을 HTML 문서로 저장하려면, 파일 확장자를(.txt, .docx) ".html"로 바꿔야 한다. 다음 단계를 따라 하여 HTML 문서를 저장해보자.
- 파일 메뉴 누르기.
- 새 HTML 파일을 저장하는 거라면 다른 이름으로 저장을 누르기. 저장을 눌러서 기존 HTML 파일 누르기.
- "파일 이름" 옆에 이름을 입력하기.
- ".html" 을 파일 이름 끝에 입력하기.
- 저장을 누르기.
10
HTML 테스트하기. HTML 파일을 테스트하려면, 파일에 대고 오른쪽 버튼을 눌러서 다음으로 열기를 누른다. 그리고 웹 브라우저를 선택한다. 그러면 "hr" 태그가 있는 곳에 줄이 보일 것이다. HTML 코드가 다음과 같이 보여야 한다.:
광고

방법 2

방법 2 의 2:

HTML 4.01 사용하기

PDF 다운로드

1
HTML 문서 열거나 만들기. HTML 문서는 메모장과 같은 텍스트 에디터를 사용하여 편집할 수 있다. Adobe Dreamweaver같은 코드 에디터를 사용할 수도 있다. 다음 단계를 따라 하여 HTML 문서를 열어보자:
- 메모장, 텍스트 에디터/코드 에디터 열기.
- 파일 메뉴 누르기.
- 열기누르기.
- HTML 파일 선택하기.
- 열기누르기.
위에 선을 넣고 싶은 자리를 찾을 때까지 스크롤 하여 내린다. 그리고 왼쪽 버튼을 눌러서 선이 시작하는 바로 앞에 커서를 둔다.
를 두 번 눌러서 빈 공간 만들기. 그러면 위에 선을 넣으려는 텍스트가 밑으로 내려간다.
4
선을 넣고 싶은 곳에 커서를 다시 둔다. 그냥 클릭하거나 키보드의 화살표 키를 이용해서 커서를 이동할 수도 있다.
"<hr>" 태그는 페이지 전체에 수평선을 만드는 역할을 한다.
를 눌러서"<hr>" 줄을 따로 만들기. 그러면 그 줄에 다른 코드 없이 <hr> 태그만 있어야 한다.
7
수평선 속성 추가하기(선택 가능) 수평선에 길이, 너비, 색상, 정렬과 같은 속성을 넣을 수 있다. "hr" 이 들어 있는 괄호에 다음과 같은 코드를 넣을 수 있다. 한 괄호 안에 속성 하나 이상을 넣으려면 한 칸씩 띄어야 한다.^{[3]X출처 검색하기}
- <hr size="#"> 를 입력하여 줄 두께 바꾸기. # 에 두께에 해당하는 숫자를 입력한다. (i.e size="10").
- <hr width="#"> 를 입력하여 줄 너비 바꾸기. # 에 픽셀 너비에 해당하는 숫자를 입력하거나 페이지 넓이에 대한 비율을 입력한다. (i.e. width="200", or width="75%").
- <hr color="#"> 를 입력하여 줄 색상 바꾸기. # 에 색상 이름을 넣거나, 16진법 코드를 입력한다. (i.e color="red" or color="#FF0000").
- <hr align="#"> 를 입력하여 줄 정렬하기. # 에 "right", "left", 또는 "center"를 입력한다. (i.e align="center">).
8
HTML 파일 저장하기. HTML 문서를 텍스트 파일로 저장하려면, 파일 확장자를 (.txt, .docx) ".html"로 바꿔야 한다. 다음 단계를 따라 HTML문서로 저장해보자.
- 파일 메뉴 누르기.
- 새 HTML 파일을 저장하는 거라면 다른 이름으로 저장을 누르기. 저장을 눌러서 기존 HTML 파일 누르기.
- "파일 이름" 옆에 이름을 입력하기.
- ".html" 을 파일 이름 끝에 입력하기.
- 저장을 누르기.
9
HTML 테스트하기. HTML 파일을 테스트하려면, 파일에 대고 오른쪽 버튼을 눌러서 다음으로 열기를 누른다. 그리고 웹 브라우저를 선택한다. 그러면 "hr" 태그가 있는 곳에 줄이 보일 것이다. HTML 코드가 다음과 같이 보여야 한다.^{[4]X출처 검색하기}
광고