HTML로 가로줄 넣는 방법 _ 선 종류, 선 굵기, 선 색상 코드

공부/코딩공부

by 나만시 2021. 9. 20. 10:45

#HTML #HTML코딩 #HTML가로줄 #HTML구분선

#선종류 #선굵기 #선색상

#복붙으로코딩하자

HTML로 가로줄 넣는 방법

HTML에 가로줄 넣는 다양한 방법이 있는데 가장 간단한 코딩이에요.

아주 잘 쓴 글 일지라도 읽을 볼때 가독성 있게 글을 구성하는 것이 중요하겠죠? 그래서 적절히 구분 선을 넣어주어서 글의 가독성을 높히고 글의 핵심을 독자가 잘 찾아볼 수 있게 만들어주기 위해 가로줄 넣기를 통해서 해보시면 좋을 것 같아요.

가로줄 넣는 기본 방법

<hr>

기본적인 적용 방법이에요.

선굵기, 선색상, 선색상 설정 방법

HTML로 선의 종류, 선의 굵기, 선의 색상을 설정할 수 있어요.

선 굵기

: 단위는 px, pt, %, em 등을 쓸 수 있어요.

선 굵기

: red blue black 등의 색상 이름을 써도 되고, #eeeeee 같은 코드로 써도 되요. 코드는 아래의 링크를 참조하면 되요.

<HTML 컬러 코드 확인하기>

HTML 컬러 코드

HTML 컬러 차트 사각형 모양의 컬러버튼을 클릭하여 HTML 컬러 코드를 찾으세요. HTML 컬러 코드 이론 "이 이상한 기호와 숫자와의 조합이 어떤 의미가 있을까?" 하고 궁금하신가요. 그 답은 "예" 입

html-color-codes.info

선 종류

: solid dotted dashed double groove ridge inset outset 등이 있어요.

<hr style="border: 선종류 선굵기 선색상;">

세가지 속성중 선종류에 어떤류의 선을 넣을지 결정해요. 종류들은 Tistory 에서는 HTML에 적용이 안되더라구요... 그래서 코드펜 링크를 아래에 걸어두었으니 해당 되는 코드에 적용은 코드펜을 통해서 확인해주세요!

티스토리에서 HTML에서 적용 시키려면 아래와 같이 적용하면 됩니다. 선 종류는 선택하지 못하고 색상, 가로폭, 굵기만 설정이 가능한 코딩인데 이후에 다른것 찾으면 다음에 포스팅으로 알려드리도록 할게요.

<p style='background:색상; width:가로폭; height:굵기;'></p>

>> solid : 일직선
<hr style="border: solid 10px red;">

<hr style="border: solid 10px red;">

적용 확인하기

>> dotted : 점선

<hr style="border: dotted 10px red;">

적용 확인하기

>> dashed : 'ㅡ' 기호로 이루어진 선

<hr style="border: dashed 10px black;">

적용 확인하기

>> double : 두겹의 선

<hr style="border: double 10px red;">

적용 확인하기

>> groove : 중간이 옴폭한 선

<hr style="border: groove 10px red;">

적용 확인하기

>> ridge 중간이 솟은 선

<hr style="border: ridge 10px red;">

적용 확인하기

>> inset

<hr style="border: inset 10px red;">

적용 확인하기

>> outset

<hr style="border: outset 10px red;">

적용 확인하기

가로줄 위치 지정 방법

<hr style="border: 선종류 선굵기 선색상;"> 앞서 설명한 코드에서 align="위치" 를 삽입하면 되요.

<hr align="위치" style="border: 선종류 선굵기 선색상;">

위치 : left(왼쪽), right(오른쪽), center(가운데)

ex) <hr align="center" style="border: solid 10px black;">

가로줄 길이 지정 방법

<hr style="border: 선종류 선굵기 선색상;">에 width: 몇%;를 삽입하면 되요.

<hr style="border: 선종류 선굵기 선색상; width: 몇%;">

ex) <hr style="border: solid 10px black; width: 70%;">

가로줄의 길이, 위치, 종류, 굵기, 색상 모두를 적용 시키면 이렇게 되겠죠?

<hr align="위치" style="border: 선종류 선굵기 선색상; width: 몇%;">

저작자표시

'공부 > 코딩공부' 카테고리의 다른 글

[HTML] 해당 본문으로 바로 이동, 드롭다운 메뉴 만들기 (0)	2021.09.26
[공부: 코딩 공부] 아이패드로 코딩하기 1, HTML과 CSS 공부 (0)	2020.03.04
[공부: 코딩공부] 아이패드프로 3세대로 코딩 공부, 구름 IDE(Goorm IDE) (0)	2020.03.03
[공부: 코딩] Swift Playgrounds, 아이패드로 코딩 배우기!! (0)	2020.02.27