만드는 동안 HTML 페이지디자인이 중요한 역할을 합니다. 특히 다양한 기호와 장식 디자인에 대해 이야기할 때: 이러한 작은 것들은 페이지의 "언어"를 보다 쉽게 ​​접근할 수 있고 명확하게 만드는 데 도움이 될 뿐만 아니라 인식을 크게 바꾸고 모습일반적으로. 가장 중요한 디자인 요소 중 하나는 수평선이며, 더 나아가 html로 수평선을 만드는 방법과 수평선을 만드는 방법에 대해 자세히 알아보겠습니다.

수평선이란 무엇이며 왜 필요한가요?

html의 수평선은 다음과 같은 여러 기능을 수행하는 페이지 디자인 요소입니다.

  1. 장식적인. 페이지에 매력을 더하는 데 도움이 됩니다.
  2. 나누기. 서로 다른 의미의 정보를 효과적으로 분리하는 데 기여합니다.
  3. 강조 또는 강조. 그것은 필요하고 가장 중요한 정보에 페이지 방문자의 주의를 끌 것입니다.

가장 많이 고려되는 수평선이다. 접근 가능한 방법다양한 기능을 구현합니다. 만들기가 매우 간단하고 외견상 매우 수익성이 높아 보입니다. HTML 코드를 간단히 변경하여 다음을 제어할 수 있습니다.

  • 길이;
  • 너비;
  • 색상 특성;
  • 하나 또는 다른 가장자리에 정렬.

수평선은 블록 요소를 나타냅니다. 이것은 페이지에서 새 줄을 차지하고 그 뒤에 오는 텍스트가 아래로 이동함을 의미합니다.

HTML에서 수평선 만들기

삼각형 괄호 안에 간단한 태그 - hr을 사용하여 라인을 설정할 수 있습니다. "Horisontal Rule"의 약자로 고전적인 외부 매개변수를 설정합니다. 닫는 태그가 필요없고 독립적으로 존재할 수 있다는 점에서 다른 많은 것들과 다릅니다. 변화 외부 특성요소는 태그에 추가 값을 사용하여 수행할 수 있습니다.

  1. 길이. 선 길이가 전체 페이지를 덮지 않도록 하려면 원하는 크기를 픽셀 또는 백분율로 설정할 수 있습니다. 이는 태그에 "width"라는 추가 단어와 인용 부호로 묶인 "=" 기호 뒤에 지정된 길이의 숫자 표시기를 사용하여 수행됩니다.

이렇게 생겼습니다. 예를 들어, 100픽셀의 길이가 필요한 경우 다음 태그를 설정합니다. hr width="100"

  1. 조정. 왼쪽 또는 오른쪽 가장자리와 중앙에서도 정렬이 가능합니다. 이 특성이미 설정한 경우에만 작동합니다. 폭 매개변수, 전체 페이지 행을 정렬할 수 없기 때문입니다. 정렬을 위해 "align" 태그에 추가 속성을 설정하고 여기에 방향을 추가합니다. center - 중앙, 왼쪽 - 왼쪽 및 오른쪽 - 오른쪽 정렬.

이 경우 완성된 태그는 다음과 같습니다. 예를 들어 가로선의 중앙 정렬을 150픽셀 길이로 설정해야 하는 경우 완성된 태그는 hr align="center" width="150"과 같이 표시됩니다.

속성이 너비 메트릭에 종속되더라도 정렬을 위한 메트릭인 "align"은 1로 설정됩니다.

  1. 너비. 선택적으로 너비를 지정하여 굵게 또는 가는 밑줄을 만들 수도 있습니다. 이 기준은 어떤 것에도 의존하지 않으며 길이나 정렬을 지정하지 않고 독립적으로 사용할 수 있습니다. 이를 위해 태그의 크기 속성과 원하는 너비(픽셀)와 동일한 숫자 값을 사용합니다. 숫자는 크기 속성과 "=" 기호 뒤에 따옴표로 묶여 지정됩니다.

따라서 너비가 15픽셀인 선을 만들려면 hr size="15" 태그를 만들어야 합니다.

  1. 색깔. 또한 독립 지표로 설정됩니다. 이를 변경하려면 색상 속성을 코드 형태로 색상 이름과 함께 사용하거나 영어. 색상은 "=" 기호 다음에 인용 부호로 지정됩니다.

따라서 표준 흰색 라인에 대한 태그는 hr color="#FFFFFF" 또는 hr color="white"의 두 가지 방법으로 작성할 수 있습니다.

검은색은 코드 #000000을 사용하여 생성할 수 있습니다.

  1. 치워 그림자. 그림자가 포함되지 않은 요소가 필요한 경우 태그에 noshade 속성을 사용해야 합니다. 단독으로 사용하거나 다른 요소와 조합하여 사용할 수 있습니다. 이를 사용하는 표준 라인의 태그는 다음과 같습니다. hr noshade

비디오로 수평선 만들기

그리고 보다 시각적인 형식으로 정보를 얻으려면 수평선 작업 가능성을 자세히 설명하는 다음 비디오를 참조하십시오.

수평선의 필요한 치수를 결정하면 정보가 구조화되고 시각적으로 잘 구성된 방식으로 사이트의 페이지를 정렬할 수 있습니다. 이를 통해 방문자는 제공된 정보를 쉽게 인식하고 귀하의 사이트를 다른 사이트와 구별할 수 있습니다.

작업

페이지에 수평선을 만듭니다.

해결책

수평선한 텍스트 블록을 다른 블록과 분리하는 데 사용하면 좋습니다. 위와 아래에 가로줄이 있는 작은 텍스트는 일반 텍스트보다 독자의 관심을 더 많이 끕니다.

태그 첨부

브라우저뿐만 아니라 사용된 속성에 따라 모양이 달라지는 수평선을 그릴 수 있습니다. 태그는 블록 요소이므로 행은 항상 다음으로 시작합니다. 개행, 그 뒤에 모든 요소가 다음 줄에 표시됩니다. 많은 태그 속성 사용
이 태그를 통해 생성된 라인은 관리하기 쉽습니다. 스타일의 힘도 연결하면 문서에 선을 추가하는 것이 간단한 작업이 됩니다.

기본 라인

볼륨 효과와 함께 회색으로 표시됩니다. 이러한 유형의 선이 항상 사이트 디자인에 맞는 것은 아니므로 스타일을 통해 선의 색상 및 기타 매개변수를 변경하려는 개발자의 바람은 이해할 수 있습니다. 그러나 브라우저는 이 문제에 대해 모호한 접근 방식을 사용하므로 한 번에 여러 스타일 속성을 사용해야 합니다. 특히, 이전 버전 인터넷 브라우저 Explorer는 선 색상에 대해 color 속성을 사용하고 다른 브라우저는 background-color를 사용합니다. 하지만 그게 다가 아니니 선 굵기(높이 속성)를 0이 아닌 다른 값으로 지정하고 border 속성을 없음으로 설정하여 선 주위의 테두리를 제거해야 합니다. hr 선택기에 대한 모든 속성을 통합하면 널리 사용되는 브라우저(예제 1)에 대한 범용 솔루션을 얻을 수 있습니다.

예 1. 수평선

HTML5 CSS 2.1 IE Cr Op Sa Fx

수평선 색상

텍스트 문자열

결과 이 예그림에 나와 있습니다. 하나.

쌀. 1. 컬러 수평선

독자 여러분께 인사드립니다. 때때로 마스터는 HTML을 사용하여 수평선 또는 수직선을 만드는 방법 또는 CSS 사용. 그것이 내가 오늘 당신에게 말할 것입니다.

CSS의 라인

선을 만드는 방법에는 여러 가지가 있습니다. 이러한 방법 중 하나는 CSS 사용. 보다 정확하게는 Border의 도움으로. 예를 들어 보겠습니다.

그리고 여기 결과가 있습니다.

수평 및 수직선 CSS로.

CSS의 선은 Border 연산자를 사용하여 그릴 수 있습니다. 테두리 너비가 고정된 직사각형을 원하면 이 연산자를 사용하고 값을 지정하면 됩니다. 예를 들어 border:5px solid #000000; 상자 테두리는 검정색에서 너비가 5픽셀임을 의미합니다.

그러나 모든 경계가 아니라 일부만 설정해야 하는 경우 필요한 경계와 각 경계의 값을 정확히 지정해야 합니다. 다음은 연산자입니다.

  • border-top - 위쪽 테두리의 값을 설정합니다.
  • border-bottom - 하단 테두리의 값을 설정합니다.
  • border-left - 왼쪽 테두리의 값을 설정합니다.
  • border-right - 오른쪽 테두리의 값을 설정합니다.

HTML의 세로줄과 가로줄

HTML 자체에 줄을 만들 수도 있습니다. 이렇게 하려면 hr 태그를 사용할 수 있습니다.

이 경우 가로선이 1픽셀 높이로 전체 너비로 그려집니다.

하지만 이 태그는 일부 값을 설정할 수 있습니다.

  • 너비– 선 너비 값을 설정합니다.
  • 색깔- 선의 색상을 설정합니다.
  • 맞추다- 왼쪽, 가운데, 오른쪽 정렬을 설정합니다.
  • 크기– 선 두께 값을 픽셀 단위로 설정합니다.

hr 태그를 사용하여 세로선을 설정할 수도 있습니다. 그러나이 경우 스타일에 다시 의존해야합니다.

이 경우 세로선은 높이 100픽셀, 두께 1픽셀, 들여쓰기 5픽셀로 그려집니다.

결론.

자, 이제 수직선과 수평선을 설정하는 방법을 알았습니다. 라인은 일반 사이트에서와 같이 설정할 수 있습니다. HTML 사용, CMS를 사용하는 사이트(예: WordPress)에서 설정하지만 이 경우 HTML 모드로 전환해야 합니다.

더 궁금한 사항이 있으면 댓글로 질문해 주세요.

네 가지 방법이 필요한 이유는 무엇입니까? 결국, 거의 모든 사람은 자신에게 익숙한 한 가지 방법을 사용합니다. 예를 들어 Shift와 대시 키를 여러 번 눌렀더니 이렇게 수평선이 나타납니다.

그러나 결과적으로 점선이 표시되지만 실선이 필요하면 어떻게 될까요?
- 대부분 키보드의 Shift 키에 결함이 있습니다. 여기에 도움이 되는 몇 가지 다른 방법이 있습니다.

3.
4.
5.

아마도 가장 일반적인 방법 Word에서 줄을 만드는 것은 키보드에서 몇 개의 키를 사용하는 것입니다.

I 키보드를 사용하여 가는, 두꺼운, 이중, 점선

아래는 영어 레이아웃이 있지만 러시아어 레이아웃이 없는 키보드 그림입니다. 하지만 Shift, 대시 및 Enter의 세 가지 키에만 관심이 있기 때문에 중요하지 않습니다.

쌀. 1. 키보드의 세 가지 키: Word에서 연속 가로줄에 대한 Shift, 대시 및 Enter

이 세 가지 키를 사용하여 Word에서 연속 수평선을 그릴 수 있습니다: 파선 또는 실선, 가늘거나 두꺼운, 길거나 짧습니다.

1) "-"(대시) 키를 여러 번 눌러 워드 에디터우리는 임의의 길이의 점선을 얻습니다.

할 것 얇은페이지의 전체 너비에 대한 긴 줄:

  • 키보드에서 "대시" 키를 찾습니다(그림 1의 녹색 프레임에서 "0" 키 오른쪽).
  • Word의 새(!) 줄에서 이 키를 여러 번 누릅니다.
  • 그런 다음 "Enter"() 키를 누릅니다. 여러 개의 인쇄된 대시가 페이지의 전체 너비에 걸쳐 연속적인 가로 가는 선으로 갑자기 바뀝니다.

2) Shift와 "-"(대시)를 동시에 누르면 대시가 인쇄되지 않고 밑줄 _________이 인쇄됩니다. 따라서 문서의 어느 곳에서나 임의의 길이의 연속선을 만들 수 있습니다.

쌀. 2. Word의 가늘고 굵은 가로줄

이제 우리는 인쇄 두꺼운페이지의 전체 너비를 가로지르는 수평선:

  • 다시 동일한 대시 키를 찾습니다. Shift 키(당신이 원하는대로 왼쪽 또는 오른쪽). Shift 키를 누르고 놓지 마십시오.
  • 이제 새(!) 줄에서 대시를 여러 번 클릭합니다(예: 3-4회)(Shift를 놓지 않은 상태에서): ___. 쉬프트를 놓으십시오.
  • 이제 Enter 키를 누릅니다. 두꺼운 수평 실선이 보일 것입니다.

몇 가지 결과를 표 형식으로 요약해 보겠습니다.

(확대하려면 클릭) 키보드를 사용하는 Word의 줄

­­­­­­­­­­­­­­­­­­­­­

II 표를 사용하는 Word의 줄

수평선은 하나의 셀(1x1)의 표를 사용하여 얻을 수 있습니다. 이 표에서는 위쪽 또는 아래쪽 테두리만 색이 지정되어 있고(보임) 테이블의 다른 세 면에는 도색되지 않은 테두리가 있습니다(보이지 않음). .

줄이 있어야 할 위치에 커서를 놓습니다. 에 상위 메뉴단어 클릭:

  • 삽입(그림 3의 1),
  • 표(그림 3의 2),
  • 하나의 셀(그림 3의 3개).

쌀. 3. Word에서 1x1 표를 삽입하는 방법(하나의 셀에서)

결과는 하나의 큰 셀(1x1)의 테이블입니다.

테두리를 제거하기 위해 3면의 1x1 테이블에 남아 있습니다. 이를 위해

  • "홈" 탭(그림 4의 1)으로 이동합니다.
  • "글꼴" 옆에 "단락"과 테두리(그림 4의 2)가 있습니다.
  • "테두리 없음"(그림 4의 3)을 클릭하여 모든 테두리를 제거합니다.
  • "상단 테두리" 또는 "하단 테두리"를 선택하십시오(그림 4의 4).

쌀. 4. Word 표에서 테두리 선택을 제거하는 방법(테두리를 보이지 않게 만들기)

나는 이것을 비디오에서 명확하게 보여줍니다 (기사 끝 부분).

그건 그렇고, 그림에서. 3은 더 쉬운 방법이 있음을 보여줍니다. Word에서 줄의 시작 부분에 커서를 놓고 "Horizontal Line"(그림 4의 5)을 클릭할 수 있습니다.

그림으로 Word의 III 선

삽입(그림 5의 1) - 도형(그림 5의 2)은 Word에서 수평선을 얻는 또 다른 방법입니다.

선을 완전히 수평으로 만들려면 Shift 키를 누른 상태에서 동시에 선을 그립니다.

쌀. 5. Word에서 선을 그리는 방법

화면 키보드를 사용하여 Word의 IV 줄

화면 키보드를 찾으려면 검색에 "화면 키보드"라는 문구를 입력하고 Windows 7 및 Windows 8에 대한 자세한 내용을 입력합니다.

Windows 10의 경우 검색 창에 "화상 키보드"를 입력하여 화상 키보드를 찾을 수도 있습니다.

쌀. 6. 온스크린 키보드

일반 키보드로 첫 번째 버전과 같은 방식으로 수평선을 만들어 보겠습니다. 에 화면 키보드대시, 시프트, 엔터의 세 가지 버튼이 필요합니다.

1 대시 및 엔터

Word의 새 줄에서 대시를 여러 번 클릭하고(그림 6의 1) Enter 키를 누릅니다. 얇은 수평선이 나타납니다.

2 Shift, 대시 및 Enter

Word의 새 줄에서 먼저 Shift(그림 6의 2)를 클릭한 다음 Dash(그림 6의 1)를 클릭합니다. 밑줄을 긋습니다. 따라서 2번 더 반복한 다음 Enter 키를 누릅니다. 결과적으로 두꺼운 수평선이 보입니다.

사이트의 가장 중요한 요소 중 일부를 강조하기 위해 모든 종류의 CSS 스타일및 속성. 물론 텍스트를 너무 신경쓰지 않고 강조 표시(예: 굵게 또는 기울임꼴로 변경) 배경또는 텍스트 주위에 프레임을 만듭니다. 그러나 제시된 방법 중 하나가 항상 적합한 것은 아닙니다. 의미론적 로드의 특성으로 인해 분리해야 하는 텍스트가 있다고 가정해 보겠습니다. 이것은 HTML 및 CSS 속성이 들어오는 곳입니다.

CSS를 사용하여 텍스트에 줄을 만드는 방법

우리의 목표를 달성하기 위해, 우리는 style.css 파일, 해당 속성을 작성하여 국경. 이렇게 하면 텍스트의 위, 아래 또는 특정 면에 줄이 나타납니다. 차례로 다음과 같이 라인 표시를 담당하는 여러 속성이 있습니다.

- 보더 탑- 텍스트 위에 위치한 수평선;

- 경계 오른쪽- 텍스트 오른쪽에 있는 수직선

- 경계 바닥– 텍스트 아래에 위치한 수평선;

- 경계 왼쪽왼쪽의 세로선입니다.

HTML에서 줄을 만드는 방법

사용 CSS 속성 HTML 코드를 편집하여 필요한 모든 값을 설정할 수 있습니다. 이렇게하려면 사이트의 관리 부분으로 이동하십시오. 게시된 자료 중 하나를 선택하고 전환 텍스트 에디터 HTML 코드 편집 모드로 전환하고 CSS 속성을 추가합니다. 샘플은 아래에서 볼 수 있습니다.



점선 또는 직선을 만드는 방법은 무엇입니까?



이러한 속성을 작성함으로써 제시되는 자료, 단락 또는 제목의 중요성을 강조할 수 있습니까?


명령어에 대한 간략한 설명

- 너비- 라인 길이;

- 단단한- 실선;

- 점이 찍힌- 점선.

스타일에 대한 더 깊은 이해를 위해 이 글을 읽는 것이 좋습니다.

사이트 코드를 변경하는 과정에서 선의 종류, 굵기, 색상을 결정하는 속성이 공백으로 나열된다는 점을 이해해야 합니다.

이 방법에는 몇 가지 장점이 있습니다.

거의 모든 라인을 만들 수 있는 광범위한 가능성.

HTML 코드에 직접 필요한 모든 변경을 쉽게 수행할 수 있습니다. 이는 경험이 부족한 사이트 빌더의 작업을 크게 단순화합니다.

HTML 태그로 직선을 만드는 방법

가장 먼저 주목하고 싶은 것은 html의 모든 미묘함과 원칙에도 불구하고 이 태그에는 닫는 태그가 없다는 것입니다. 어디서나 사용할 수 있습니다 HTML 코드, 태그 사이 그리고.

태그 속성

- 너비- 라인의 길이를 담당합니다. 백분율과 픽셀로 지정할 수 있습니다.

- 크기– 선 두께. 픽셀로 지정됩니다.

- 색깔– 선의 색상을 정의합니다.

- 맞추다– 라인 정렬을 담당하는 속성. 차례로 팀이 그에게 적용됩니다.