HTML에 줄 삽입 하는 방법

PDF 다운로드
공동 작성자 위키하우 직원

PDF 다운로드

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

방법 1
방법 1 의 2:

CSS/HTML5 사용하기

PDF 다운로드
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1b\/658928-9-1.jpg\/v4-460px-658928-9-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1b\/658928-9-1.jpg\/v4-728px-658928-9-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    메모장과 같은 텍스트 에디터를 사용하여 HTML문서를 편집할 수 있다. Adobe Dreamweaver 같은 코드 에디터를 사용해도 된다. 다음 단계를 따라 HTML 문서를 연다:
    • 메모장이나 텍스트 에디터/코드 에디터를 연다.
    • 파일 메뉴를 클릭한다.
    • 열기 를 누른다.
    • HTML 파일을 선택한다.
    • 열기 를 누른다.
  2. 2
    HTML 문서에 head 추가하기. HTML 문서에 head가 없다면 다음과 같이 추가한다. head 는 "<html>"태그 뒤에, "<body>" 태그 앞에 와야 한다.
    • 문서 위에 <head> 를 입력한다.
    • Enter 를 두 번 눌러 새로운 2줄을 만든다.
    • </head> 를 입력하여 head를 닫는다.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/ca\/658928-11-1.jpg\/v4-460px-658928-11-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/ca\/658928-11-1.jpg\/v4-728px-658928-11-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    스타일 태그는 두 개의 head 태그 사이에 와야 한다. 이렇게 하면 HTML을 꾸며줄 CSS 코드를 넣을 수 있는 공간이 생긴다.
    • 대신에, 스타일 시트를 따로 만들어서 사용해도 된다.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1a\/658928-12-1.jpg\/v4-460px-658928-12-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1a\/658928-12-1.jpg\/v4-728px-658928-12-1.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    입력하기. 이는 수평선을 만들어주는 CSS 태그다. head 에 있는 스타일 태그 뒤에 이를 입력하거나 따로 만든 CSS 파일에 입력한다.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/70\/658928-13-1.jpg\/v4-460px-658928-13-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/70\/658928-13-1.jpg\/v4-728px-658928-13-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    이는 "hr {" 뒤에 온다. 수평선을 만드는 방법은 다양하다. 다음의 예시를 살펴보자.
    • width: ##px; 를 입력해서 줄 너비 설정하기. ## 에 줄의 픽셀 너비를 입력한다. 픽셀(px) 대신 퍼센트(%)를 이용해도 된다.
    • height: ##px; 를 입력해서 줄 두께 설정하기. ##에 줄의 픽셀 두께를 입력한다.
    • background-color: ##; 를 입력해서 줄 색상 설정하기. ##에 색상 이름을 입력하거나, 파운드(#) 뒤에 16진법 색상 코드를 입력한다.
    • margin-right: ##px; 를 입력해서 오른쪽 끝의 픽셀 숫자 정하기. ## 에 숫자 또는 픽셀, "auto"를 입력한다. "auto" 를 사용하면 정해진 너비의 중간에 온다. 왼쪽과 오른쪽 끝에 남은 공간이 똑같이 나뉜다.
    • margin-left: ##px; 를 입력하여 왼쪽 끝 픽셀 숫자 정하기. ## 에 숫자 또는 픽셀, "auto"를 입력한다. "auto" 를 사용하면 정해진 너비의 중간에 온다. 왼쪽과 오른쪽 끝에 남은 공간이 똑같이 나뉜다. [2]
    • margin-top: ##px; 를 입력하여 위에 공간을 주기. ## 에 공간 두께만큼 숫자나 픽셀을 입력한다.
    • margin-bottom: ##px; 를 입력하여 줄 밑에 공간을 주기. ## 에 공간 두께만큼 숫자나 픽셀을 입력한다.
    • border-width: ##px; 를 입력하여 줄 경계를 주기 (선택 사항) . ##에 경계 두께만큼 픽셀을 입력한다.
    • border-color: ##; 를 입력하여 경계 색상 설정하기 (선택사항). ##에 색상 이름을 입력하거나, 파운드(#) 뒤에 16진법 색상 코드를 입력한다.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/11\/658928-14-1.jpg\/v4-460px-658928-14-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/11\/658928-14-1.jpg\/v4-728px-658928-14-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    그러면 <hr> 태그 스타일 설정이 끝난다.
  7. 7
    ↵ Enter 를 누르고 </style> 입력하기. 그러면 새로운 줄이 생기는데, 그러고 나서 HTML 문서의 스타일 섹션을 마치는 태그를 입력한다. "</style>" 은 CSS를 이용해서 꾸민 HTML의 모든 요소를 입력한 다음에 붙인다.
  8. 8
    HTML 문서 body 안의 원하는 곳에 <hr> 을 입력하기. HTML 태그의 body는 "<body>" 와 "</body>" 태그 사이를 말한다. 이렇게 하면 줄이 생긴다. HTML에 <hr> 태그를 이용한 곳마다 CSS 스타일 설정이 적용될 것이다.
  9. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/be\/658928-7-1.jpg\/v4-460px-658928-7-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/be\/658928-7-1.jpg\/v4-728px-658928-7-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    텍스트 파일을 HTML 문서로 저장하려면, 파일 확장자를(.txt, .docx) ".html"로 바꿔야 한다. 다음 단계를 따라 하여 HTML 문서를 저장해보자.
    • 파일 메뉴 누르기.
    • 새 HTML 파일을 저장하는 거라면 다른 이름으로 저장 을 누르기. 저장 을 눌러서 기존 HTML 파일 누르기.
    • "파일 이름" 옆에 이름을 입력하기.
    • ".html" 을 파일 이름 끝에 입력하기.
    • 저장 을 누르기.
  10. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/23\/658928-15-1.jpg\/v4-460px-658928-15-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/23\/658928-15-1.jpg\/v4-728px-658928-15-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    HTML 파일을 테스트하려면, 파일에 대고 오른쪽 버튼을 눌러서 다음으로 열기 를 누른다. 그리고 웹 브라우저를 선택한다. 그러면 "hr" 태그가 있는 곳에 줄이 보일 것이다. HTML 코드가 다음과 같이 보여야 한다.: 
       <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 type 
 = 
 "text/css" 
 > 
 hr 
 { 
 width 
 : 
 50 
 % 
 ; 
 height 
 : 
 20 
 px 
 ; 
 background-color 
 : 
 red 
 ; 
 margin-right 
 : 
 auto 
 ; 
 margin-left 
 : 
 auto 
 ; 
 margin-top 
 : 
 5 
 px 
 ; 
 margin-bottom 
 : 
 5 
 px 
 ; 
 border-width 
 : 
 2 
 px 
 ; 
 border-color 
 : 
 green 
 ; 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
This is a heading </ 
 h1 
 > 
 < 
 hr 
 > 
 < 
 p1 
 > 
여기가 수평선으로 나뉘는 문단의 글이다. </ 
 p1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    광고


방법 2
방법 2 의 2:

HTML 4.01 사용하기

PDF 다운로드
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/18\/658928-1-1.jpg\/v4-460px-658928-1-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/18\/658928-1-1.jpg\/v4-728px-658928-1-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    HTML 문서는 메모장과 같은 텍스트 에디터를 사용하여 편집할 수 있다. Adobe Dreamweaver같은 코드 에디터를 사용할 수도 있다. 다음 단계를 따라 하여 HTML 문서를 열어보자:
    • 메모장, 텍스트 에디터/코드 에디터 열기.
    • 파일 메뉴 누르기.
    • 열기 누르기.
    • HTML 파일 선택하기.
    • 열기 누르기.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cf\/658928-2-1.jpg\/v4-460px-658928-2-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cf\/658928-2-1.jpg\/v4-728px-658928-2-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    위에 선을 넣고 싶은 자리를 찾을 때까지 스크롤 하여 내린다. 그리고 왼쪽 버튼을 눌러서 선이 시작하는 바로 앞에 커서를 둔다.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0b\/658928-3-1.jpg\/v4-460px-658928-3-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0b\/658928-3-1.jpg\/v4-728px-658928-3-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    를 두 번 눌러서 빈 공간 만들기. 그러면 위에 선을 넣으려는 텍스트가 밑으로 내려간다.
  4. 4
    선을 넣고 싶은 곳에 커서를 다시 둔다. 그냥 클릭하거나 키보드의 화살표 키를 이용해서 커서를 이동할 수도 있다.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/73\/658928-4-1.jpg\/v4-460px-658928-4-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/73\/658928-4-1.jpg\/v4-728px-658928-4-1.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    "<hr>" 태그는 페이지 전체에 수평선을 만드는 역할을 한다.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c0\/658928-5-1.jpg\/v4-460px-658928-5-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c0\/658928-5-1.jpg\/v4-728px-658928-5-1.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":540,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    를 눌러서"<hr>" 줄을 따로 만들기. 그러면 그 줄에 다른 코드 없이 <hr> 태그만 있어야 한다.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f3\/658928-6-1.jpg\/v4-460px-658928-6-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f3\/658928-6-1.jpg\/v4-728px-658928-6-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    수평선 속성 추가하기(선택 가능) 수평선에 길이, 너비, 색상, 정렬과 같은 속성을 넣을 수 있다. "hr" 이 들어 있는 괄호에 다음과 같은 코드를 넣을 수 있다. 한 괄호 안에 속성 하나 이상을 넣으려면 한 칸씩 띄어야 한다. [3]
    • <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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/be\/658928-7-1.jpg\/v4-460px-658928-7-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/be\/658928-7-1.jpg\/v4-728px-658928-7-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    HTML 문서를 텍스트 파일로 저장하려면, 파일 확장자를 (.txt, .docx) ".html"로 바꿔야 한다. 다음 단계를 따라 HTML문서로 저장해보자.
    • 파일 메뉴 누르기.
    • 새 HTML 파일을 저장하는 거라면 다른 이름으로 저장 을 누르기. 저장 을 눌러서 기존 HTML 파일 누르기.
    • "파일 이름" 옆에 이름을 입력하기.
    • ".html" 을 파일 이름 끝에 입력하기.
    • 저장 을 누르기.
  9. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/68\/658928-8-1.jpg\/v4-460px-658928-8-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/68\/658928-8-1.jpg\/v4-728px-658928-8-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    HTML 파일을 테스트하려면, 파일에 대고 오른쪽 버튼을 눌러서 다음으로 열기 를 누른다. 그리고 웹 브라우저를 선택한다. 그러면 "hr" 태그가 있는 곳에 줄이 보일 것이다. HTML 코드가 다음과 같이 보여야 한다. [4] 
       <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
This is a Heading </ 
 h1 
 > 
 < 
 hr 
 size 
 = 
 "6" 
 width 
 = 
 "50%" 
 align 
 = 
 "left" 
 color 
 = 
 "green" 
 > 
 < 
 p1 
 > 
여기가 수평선으로 나뉘는 문단의 글이다. </ 
 p1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    광고

관련 위키하우

아이폰에서 통화 녹음하는 방법
PDF 번역하는 방법
엑셀에서 표준편차 계산하는 방법
안드로이드에 APK 파일 설치하는 방법
엑셀에서 수식을 복사하는 법
마인크래프트에서 마법이 부여된 책 사용하는 법
컴퓨터에서 삭제된 파일을 복구하는 방법
마이크로소프트 워드에서 페이지 번호 삽입하는 방법
USB로 윈도우 설치하는 법
엔비디아(Nvidia) 드라이버 삭제하는 방법
포토샵에서 배경의 색상을 바꾸는 법
16진수를 2진수와 10진수로 변환하는 법
그림판에서 이미지 배경 투명하게 만들기
엑셀 파일을 PDF 파일로 변환하는 법
광고

출처

  1. ↑ https://www.w3schools.com/tags/tag_hr.asp
  2. ↑ https://www.w3schools.com/css/css_margin.asp#:~:targetText=The%20auto%20Value,the%20left%20and%20right%20margins .
  3. ↑ http://www.myhtmltutorials.com/line.html
  4. ↑ https://www.w3schools.com/TAGS/tag_hr.asp

이 위키하우에 대하여

다른 언어
이 문서는 7,426 번 조회 되었습니다.

이 글이 도움이 되었나요?

광고