집 > 뛰어나다 > 수평 CSS 라인을 만드는 방법. CSS로 블록을 정렬하는 방법은 무엇입니까? HTML에서 줄을 만드는 방법


수평 CSS 라인을 만드는 방법. CSS로 블록을 정렬하는 방법은 무엇입니까? HTML에서 줄을 만드는 방법




일

페이지에 수평선을 만드세요.

해결책

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

태그 포함

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

기본 라인

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

예시 1. 수평선

HTML5 CSS 2.1 IE Cr Op Sa Fx

수평선 색상

텍스트 문자열

이 예의 결과는 그림 1에 나와 있습니다. 1.

쌀. 1. 색칠된 수평선

왜 네 가지 방법이 필요한 것 같습니까? 결국 거의 모든 사람은 자신에게 익숙한 한 가지 방법을 사용합니다. 예를 들어 Shift 키와 대시 키를 여러 번 눌렀더니 이렇게 수평선이 생겼습니다.

하지만 결과적으로 점선이 표시되는데 실선이 필요한 경우에는 어떻게 해야 할까요?
- 키보드의 Shift 키에 결함이 있을 가능성이 높습니다. 도움이 되는 다른 방법은 다음과 같습니다.

3.
4.
5.

아마도 Word에서 줄을 만드는 가장 친숙한 방법은 키보드에서 두 개의 키를 사용하는 것입니다.

I 키보드를 이용한 얇은 선, 굵은 선, 이중 점선

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

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

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

1) Word 편집기에서 "-"(대시) 키를 여러 번 누르면 임의 길이의 점선이 나타납니다.

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

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

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

쌀. 2. Word의 얇고 두꺼운 수평선

이제 우리는 인쇄합니다 두꺼운페이지 전체 너비에 걸쳐 수평선:

  • 이번에도 동일한 대시 키와 Shift 키(원하는 대로 왼쪽 또는 오른쪽)를 찾습니다. Shift를 누른 상태에서 놓지 마세요.
  • 이제 새(!) 줄에서 대시를 여러 번(예: 3-4회) 클릭합니다(Shift를 놓지 않은 상태에서): ___. 쉬프트를 해제하세요.
  • 이제 Enter 키를 누르세요. 두꺼운 수평 실선이 나타납니다.

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

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

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

II 표를 사용하는 Word의 줄

위쪽 또는 아래쪽 테두리만 색칠되어 있고(표시됨), 테이블의 나머지 3개 측면에는 테두리가 그려지지 않은(보이지 않음) 하나의 셀(1x1) 테이블을 사용하여 수평선을 얻을 수 있습니다. .

줄이 있어야 할 곳에 커서를 놓습니다. Word의 상단 메뉴에서 다음을 클릭합니다.

  • 인서트(그림 3의 1),
  • 표(그림 3의 2),
  • 하나의 셀(그림 3의 3).

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

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

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

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

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

영상(기사 마지막 부분)에서 이를 명확하게 보여줍니다.

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

III 그림으로 Word의 선

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

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

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

화상 키보드를 사용하여 Word의 IV 라인

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

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

쌀. 6. 온스크린 키보드

일반 키보드를 사용하여 첫 번째 버전과 동일한 방법으로 수평선을 만듭니다. 화면 키보드에는 대시, Shift 및 Enter라는 세 개의 버튼이 필요합니다.

1 대시 및 Enter

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

2 Shift, 대시 및 Enter

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

모든 독자들에게 인사드립니다. 때때로 마스터는 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을 사용하는 일반 사이트와 WordPress 등 CMS를 사용하는 사이트에서 모두 설정할 수 있지만 이 경우 HTML 모드로 전환해야 합니다.

그럼, 더 궁금한 점이 있으시면 댓글로 질문해주세요.

HTML 페이지를 만들 때 스타일은 필수적인 역할을 합니다. 특히 다양한 기호와 장식 디자인에 관해 이야기할 때 이러한 작은 것들은 페이지의 "언어"를 보다 접근하기 쉽고 명확하게 만들고 전반적인 인식과 모양을 크게 바꾸는 데 도움이 됩니다. 가장 중요한 디자인 요소 중 하나는 수평선이며, 더 나아가 이를 사용하여 작업하는 방법과 html에서 수평선을 만드는 방법을 더 자세히 배울 것입니다.

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

HTML의 수평선은 다양한 기능을 수행하는 페이지 디자인 요소입니다.

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

다양한 기능을 구현하는 가장 접근하기 쉬운 방법으로 간주되는 것은 수평선입니다. 만들기가 매우 간단하고 겉으로는 매우 수익성이 좋아 보입니다. HTML 코드를 간단히 변경하면 다음을 제어할 수 있습니다.

  • 길이;
  • 너비;
  • 색상 특성;
  • 한쪽 또는 다른 쪽 가장자리에 정렬합니다.

수평선은 블록 요소를 참조한다는 점은 주목할 가치가 있습니다. 이는 페이지에서 새 줄을 차지하고 그 뒤의 텍스트가 아래로 이동한다는 의미입니다.

HTML에서 수평선 만들기

간단한 태그(삼각 괄호 안의 hr)를 사용하여 줄을 설정할 수 있습니다. "Horisontal Rule"의 약어이며 일반적인 외부 매개변수를 설정합니다. 닫는 태그가 필요하지 않고 독립적으로 존재할 수 있다는 점에서 다른 많은 태그와 다릅니다. 태그의 추가 값을 사용하여 요소의 외부 특성을 변경할 수 있습니다.

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

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

  1. 조정. 왼쪽이나 오른쪽 가장자리에 정렬이 가능하며 중앙에도 정렬이 가능합니다. 페이지 전체 줄을 정렬할 수 없으므로 이 속성은 너비 매개변수를 이미 설정한 경우에만 적용됩니다. 정렬을 위해 "align" 태그에 추가 속성을 설정하고 방향을 추가합니다. 중앙 - 중앙, 왼쪽 - 왼쪽, 오른쪽 - 오른쪽 정렬입니다.

이 경우 완성된 태그는 다음과 같습니다. 예를 들어, 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

비디오로 수평선 만들기

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

필요한 수평선 크기를 결정한 후 정보가 구조화되고 시각적으로 잘 구성되도록 사이트 페이지를 배열할 수 있습니다. 이렇게 하면 방문자가 제시된 정보를 더 쉽게 인식하고 귀하의 사이트를 다른 사이트와 구별할 수 있습니다.

안녕하세요 여러분! 오늘은 html을 이용하여 가로선 만드는 방법을 알려드리겠습니다.

실제로 수평선을 만들어야 할 필요성은 예를 들어 텍스트의 한 부분을 다른 부분에서 분리해야 할 때 자주 발생합니다.

CSS를 사용한 수평 및 수직선

CSS로 이를 수행할 수 있습니다. 이를 위해 div 태그를 사용하여 블록에 필요한 텍스트 섹션을 묶은 다음 style.css 파일 또는 html 코드에서 직접 border-top을 사용하여 위쪽 또는 아래쪽 테두리에 대한 이 블록의 속성을 작성합니다. 그리고 국경 바닥. 예는 다음과 같습니다.

수직 HTML 라인

CSS를 사용한 수평선.

이번 경우에는 html 코드에서 직접 CSS로 스타일을 지정하고 위쪽 테두리를 실선으로 아래쪽 테두리를 점선으로 만들었습니다.

페이지에서는 다음과 같이 표시됩니다.

CSS를 사용한 수평선.

이 방법에는 다음과 같은 장점이 있습니다.

  • 거의 모든 유형의 라인을 설정할 수 있는 광범위한 설정;
  • 수평선과 수직선을 모두 만들 수 있습니다. 수직선을 만들려면 border-top을 border-left로, border-bottom을 border-right로 변경해야 합니다.

단점은 코드가 상대적으로 크다는 점입니다.

그러나 결과적으로 html을 사용하여 텍스트에 수평선을 삽입할 수 있습니다. 동시에 CSS로 올라갈 필요조차 없습니다. 태그는 이를 위해 사용됩니다.

.

html 태그가 있는 수평선

이 태그의 첫 번째 특징은 쌍을 이루는 종료 태그가 없다는 것입니다. 태그 사이의 HTML 코드 어디에서나 사용할 수 있습니다. 그리고.

이 태그에는 다음과 같은 속성이 있습니다.

  • 너비- 수평선의 길이를 픽셀 또는 백분율로 정의합니다.
  • 색상– 선의 색상을 정의합니다.
  • 맞추다– 선의 정렬을 오른쪽 가장자리 - 오른쪽, 왼쪽 가장자리 - 왼쪽, 중앙 - 중앙으로 설정합니다.
  • 크기– 선 두께(픽셀).

다음은 HTML 코드의 예입니다.