가로선 스타일
아래 다양한 스타일의 가로선들을 살펴보고 마음에 드는 스타일의 가로선을 손쉽게 복사하세요.
사용방법
1. 아래 선 스타일 중 하나를 선택하세요.
2. 선택한 스타일을 클릭하면 해당 코드가 아래에 표시되고, 코드를 복사할 수 있습니다.
3. 복사된 코드를 웹페이지나 문서에 적용하세요.
심플한 실선: 기본적이고 전통적인 구분선 스타일입니다.
굵은 실선: 더 두꺼운 선으로 내용 간의 분리를 강조합니다.
점선: 가볍고 세련된 느낌을 줍니다.
파선: 독특하고 예술적인 느낌을 줄 수 있습니다.
이중선: 더 정교하고 세분화된 구분이 필요할 때 사용할 수 있습니다.
그루브 선: 수평선 주위에 양옆으로 파여든 효과를 생성합니다. 이것은 수평선이 화면 아래로 파여들어가 보이게 하며, 주로 버튼 또는 눌려 있는 것처럼 보이게 할 때 사용됩니다.
릿지 선: 수평선 주위에 양옆으로 돌출된 효과를 생성합니다. 이것은 수평선이 화면 위로 돌출되어 보이게 하며, 주로 금속적이거나 입체적인 느낌을 전달하려고 할 때 사용됩니다.
넓은 페이드 선: 선이 양쪽으로 서서히 사라지는 효과를 줍니다.
회색 인셋 선: 회색으로 내용을 인셋하는 스타일입니다.
갈색 아웃셋 선: 갈색으로 외곽을 강조하는 스타일입니다.
그라데이션 굵은 실선: 색상 그라데이션 효과가 적용된 두꺼운 선입니다.
그라데이션 굵은 실선: 색상 그라데이션 효과와 선 위/아래에만 외곽선이 적용된 두꺼운 선입니다.
그라데이션 굵은 실선: 색상 그라데이션 효과와 외곽선이 적용된 두꺼운 선입니다.
그라데이션 굵은 실선: 색상 그라데이션 효과와 모서리가 둥근 외곽선이 적용된 두꺼운 선입니다.
아래 코드 설명을 참고하여 선 스타일을 취향에 맞게 수정해보세요.
<hr style=""height: 3px; width: 100%; border-top: 2px solid #663300; border-bottom: 2px solid #f0f0f0; border-radius: 10px; background-image: linear-gradient(to right, #FF5733, #007BFF);" >
- 'height'의 px을 조절해 선의 두께를 설정할 수 있습니다.
- 'width:'의 숫자를 px 또는 %로 조절해 선의 가로 너비를 설정할 수 있습니다.
- 'border-top' 또는 'border-bottom'의 px을 조절해 선의 위/아래에 외곽선을 추가하고 두께를 설정할 수 있습니다.
- 'border-radius'의 px을 조절해 모서리가 둥근 스타일을 설정할 수 있습니다.
- 'style'에 포함된'#000000'의 숫자 조합을 통해 선의 색상을 설정할 수 있습니다.
- 'background-image: linear-gradient(to right, #FF5733, #007BFF)'의 두 가지 색상을 변경을 통해 그라디언트 스타일을 수정할 수 있습니다.
색상코드는 아래를 참고하세요.
이상 html 코드를 활용해 다양한 스타일로 가로선을 삽입하는 방법을 알아봤습니다. 본인만의 유니크한 가로선을 만들어 보세요!