콘텐츠

• 단계
• 방법 1/2: HTML 4.01에서 작업
• 방법 2/2: CSS/HTML5에서 작업

이 기사에서는 HTML에 수평선을 추가하는 방법을 보여줍니다. 수평선은 사이트의 콘텐츠를 구분하는 데 사용할 수 있습니다. 라인을 생성하는 코드는 매우 간단합니다. 그러나 HTML 4.01에서는 내부 명령을 사용하여 라인의 디자인을 변경할 수 있습니다. HTML5에서는 CSS를 사용하여 선의 스타일을 지정해야 합니다.

단계

방법 1/2: HTML 4.01에서 작업

1. 1 기존 문서를 열거나 새 HTML 문서를 만듭니다. HTML 문서는 메모장과 같은 텍스트 편집기나 Adobe Dreamweaver와 같은 특수 코드 편집기를 사용하여 편집할 수 있습니다. 선택한 프로그램에서 HTML 문서를 열려면 다음 단계를 따르십시오.
   • 메모장이나 다른 텍스트/코드 편집기를 엽니다.
   • 메뉴 열기 파일.
   • 클릭 열려있는.
   • HTML 파일을 선택합니다.
   • 클릭 열려있는
2. 2 선을 삽입할 위치를 선택합니다. 줄 위에 표시되어야 하는 줄을 찾을 때까지 아래로 스크롤한 다음 해당 줄의 맨 왼쪽을 클릭하여 커서를 해당 줄의 시작 부분으로 직접 이동합니다.
3. 3 빈 줄을 추가합니다. 두 번 탭 ↵ 입력줄을 삽입하려는 텍스트 아래로 이동한 다음 빈 줄에 커서를 놓습니다.
4. 4 hr> 태그를 추가합니다. 입력하다 시간> 줄의 시작 부분에 있는 공백으로 이동합니다. 꼬리표 시간> 전체 페이지에 가로선을 그릴 수 있습니다.
5. 5 키를 눌러 "hr" 태그 뒤의 커서를 새 줄로 이동합니다. ↵ 입력. 이제 태그 시간> 별도의 줄에 있어야 합니다.
6. 6 수평선에 속성을 추가합니다(선택 사항). 길이, 두께, 색상 및 정렬과 같은 속성을 추가합니다. "hr" 직후에 중괄호로 묶습니다. 여러 속성을 추가하려면 공백으로 구분합니다.
   • 입력하다 시간 크기 = "#">선의 굵기를 변경합니다. "#"을 숫자 두께 값으로 바꿉니다(예: 크기 = "10").
   • 입력하다 시간 너비 = "#">선 너비를 변경합니다. "#"을 픽셀 수 또는 페이지 너비의 백분율로 바꿉니다(예: 너비 = "200" 또는 너비 = "75%").
   • 입력하다 시간 색상 = "#">선 색상을 변경합니다. "#"을 색상 이름 또는 해당 16진수 코드로 바꿉니다(예: color = "red" 또는 color = "# FF0000").
   • 입력하다 시간 정렬 = "#">라인을 정렬합니다. "#"을 "오른쪽"(오른쪽), "왼쪽"(왼쪽) 또는 "중앙"(중앙)으로 바꿉니다(예: 시간 너비 = "50%" 정렬 = "중앙">).
7. 7 HTML 파일을 저장합니다. 텍스트 파일을 HTML 문서로 저장하려면 파일 확장자(.txt, .docx)를 ".html"로 변경해야 합니다. HTML 문서를 저장하려면 다음 단계를 따르세요.
   • 메뉴 열기 파일.
   • 클릭 다른 이름으로 저장.
   • 파일 이름 필드에 파일 이름을 입력합니다.
   • 추가하다 .html 파일 이름 뒤에 .
   • 클릭 구하다.
8. 8 HTML 문서를 확인하십시오. HTML 파일을 확인하려면 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 연결 프로그램을 선택합니다. 그런 다음 웹 브라우저를 선택합니다. "hr" 태그를 삽입한 곳에 실선이 나타나야 합니다. HTML 코드는 다음과 같습니다.

   DOCTYPE html> html> body> h1> Heading / h1> hr size = "6" width = "50%" align = "left" color = "green"> p1> 이 줄은 제목과 한 줄로 구분해야 합니다. . / P1 > / 본문> / html>

방법 2/2: CSS/HTML5에서 작업

1. 1 기존 문서를 열거나 새 HTML 문서를 만듭니다. HTML 문서는 메모장과 같은 텍스트 편집기나 Adobe Dreamweaver와 같은 특수 코드 편집기를 사용하여 편집할 수 있습니다. 선택한 프로그램에서 HTML 문서를 열려면 다음 단계를 따르십시오.
   • 메모장이나 다른 텍스트/코드 편집기를 엽니다.
   • 메뉴 열기 파일.
   • 클릭 열려있는.
   • HTML 파일을 선택합니다.
   • 클릭 열려있는
2. 2 HTML 문서에 제목을 추가합니다. HTML 문서에 아직 제목이 없으면 다음 단계에 따라 제목을 추가하십시오. 제목은 html> 태그 뒤와 body> 태그 앞에 와야 합니다.
   • 입력하다 머리> 문서 상단에 있습니다.
   • 두 번 탭 ↵ 입력두 개의 새 줄을 추가합니다.
   • 입력하다 / 머리>제목을 닫습니다.
3. 3 입력하다 스타일 유형 = "텍스트 / CSS"> 헤더 내부. style 태그는 두 제목 태그 사이에 배치되어 CSS를 사용하여 HTML 디자인을 수정할 수 있는 위치를 만듭니다.
   • 또는 외부 스타일 시트를 사용할 수 있습니다. 기사를 읽다 "CSS 파일을 HTML에 삽입하는 방법»외부 CSS 파일을 HTML 파일에 연결하는 방법을 배우려면.
4. 4 입력하다 시간 {. 가로선 스타일을 지정하기 위한 CSS 태그입니다. 헤더 또는 외부 CSS 파일의 "style" 태그 뒤에 추가합니다.
5. 5 hr> 태그에 CSS 스타일을 추가합니다. "hr {" 태그 뒤에 와야 합니다. 수평선은 다양한 방법으로 스타일을 지정할 수 있습니다. 아래는 그 중 몇 가지입니다.
   • 입력하다 너비: ## px;선 너비를 조정합니다. "##"을 선 너비(픽셀)로 바꿉니다. 픽셀(px) 대신 백분율(%)을 사용할 수 있습니다.
   • 입력하다 높이: ## px;선 두께를 조정합니다. "##"을 선 너비(픽셀)로 바꿉니다.
   • 입력하다 배경색: ##;선 색상을 지정합니다. "##"을 색상 이름 또는 해시(#) 다음에 16진수 색상 코드로 바꾸십시오.
   • 입력하다 오른쪽 여백: ## px;오른쪽 가장자리로부터의 픽셀 수를 지정합니다. "##"을 픽셀 수 또는 코드 "auto"로 바꿉니다. 선을 왼쪽 또는 중앙에 맞추려면 "auto"를 입력합니다.
   • 입력하다 여백-왼쪽: ## px;왼쪽 가장자리에서 픽셀 수를 지정합니다. "##"을 픽셀 수 또는 코드 "auto"로 바꿉니다. 선을 오른쪽이나 중앙에 맞추려면 "auto"를 입력합니다.
   • 입력하다 여백 상단: ## px; 줄의 상단 패딩을 지정합니다. "##"을 패딩(픽셀)에 해당하는 숫자로 바꿉니다.
   • 입력하다 margin-bottom: ## px;줄의 아래쪽 패딩을 지정합니다. "##"을 패딩(픽셀)에 해당하는 숫자로 바꿉니다.
   • 입력하다 테두리 너비: ## px;선 주위에 상자를 그립니다(선택 사항). "##"을 테두리 너비(픽셀 단위)에 해당하는 숫자로 바꿉니다.
   • 입력하다 테두리 색상: ##;테두리 색상을 지정합니다(선택 사항). "##"을 색상 이름 또는 해시(#) 다음에 16진수 색상 코드로 바꾸십시오.
6. 6 입력하다 } style 속성 뒤에 hr> 태그의 스타일 지정을 완료합니다.
7. 7 입력하다 시간> HTML 문서 본문의 아무 곳에나 수평선을 추가할 수 있습니다. CSS 스타일 설정은 HTML 문서에서 hr> 태그를 사용할 때마다 적용됩니다. 코드는 다음과 같아야 합니다.

   DOCTYPE html> html> head> 스타일 유형 = "텍스트/css"> hr {폭: 50%; 높이: 20px; 배경색: 빨간색; 오른쪽 여백: 자동; 여백-왼쪽: 자동; 여백 상단: 5px; 여백-하단: 5px; 테두리 너비: 2px; 테두리 색상: 녹색; } / style> / head> body> h1> Heading / h1> hr> p1> 이 줄은 제목과 수평선으로 구분되어야 합니다. / p1> / body> / html>