[HTML CSS] 이미지와 텍스트 테두리 및 line style 적용하는 방법은?

 

html border 테두리 설정에서는 <'선-너비'> <선 스타일> <컬러> 순서대로 속성을 정해주면 되며, <line style>에는 hidden/ solid/ dotted/ dashed/ double/ outset/ inset/ groove/ ridge 스타일이 있어 이들 중 하나로 지정해주시면 됩니다.

---

1. border 속성은 어떤 순서대로 지정될까요?

border : <선 너비> <선 스타일> <컬러> 순서대로 지정해주면 됩니다.

/* 이미지 코드 설명 태그 */
img {
  border: 10px dashed chartreuse
}

/* 본문 태그 설명 부분 */
p {
  border: 10px double orangered;
  width: 320px;
  text-align: center;
}

 

 선 너비에서는 대표적으로 px나 rem 이라는 단위로 나타내어 지정해주고, 선 스타일에서는 제가 대표적으로 말씀드린 코드들이 저 자리를 차지하게 됩니다. 색상의 경우 에디터마다 색을 보여주는 경우가 많지만 혹시나 원하는 색상을 찾고싶다 하신다면 링크를 참고해주시면 되겠습니다 :)

 

https://collocationvoca.tistory.com/41

어도비 프로그램이나 PPT / HTML에서 많이 쓰이는 색상은 뭘까요 ??? [ 색상 이름 / RGB 컬러/ 어도비

 

---

2. <line-style> 선 스타일 속성은 어떤걸 적어주어야할까?

 라인 스타일 부분은 선의 모양을 결정해주는 속성이 들어가게 됩니다.

 두번째 나와있는 라인 스타일 부분의 경우 선의 모양을 정해주는 것이기 때문에 시각적으로도 효과가 탁월합니다. 보통 solid와 hidden스타일을 많이 사용하며 hidden/ solid/ dotted/ dashed/ double/ outset/ inset/ groove/ ridge 등 스타일이 다양하게 있습니다.

---

라인 스타일 활용 코드는?

/* 본문 태그 설명 부분 */
p {
  border-style: double;
  width: 200px;
  text-align: center;
}
     (adsbygoogle = window.adsbygoogle || []).push({});

 활용법의 경우 위에서 말씀드렸다시피 border : <선 너비> <선 스타일> <컬러>의 가운데 부분 자리에 원하는 라인을 적어주시면 됩니다. 이 뿐만 아니라 바로 위의 코드 예시처럼 따로 태그를 지정해주어 그 안에 속성으로 border-style을 작성해줄 수 있습니다.

---

라인 스타일 활용 예시는?

 혹시나 각각 스타일의 활용 예시를 확인해보고 싶으시다면,  아래 블로그 링크를 통해 다양한 사진으로 확인해보실 수 있습니다.

https://blog.naver.com/PostView.naver?blogId=suwonleee&logNo=222430723674&categoryNo=8&parentCategoryNo=&from=thumbnailList 

 

[ HTML / CSS ] border 이미지 & 텍스트 테두리 와 선 스타일 line style 다양한 활용을 하려면 어떻게 해

 

 

저의 아주 작은 티끌 코딩 글이 블로그 방문자 님의 작업에 도움이 됐으면 좋겠습니다.

좋아요(❤) 버튼 ↙은 항상 감사합니다.

방문하신 모든 분들 좋은 하루 되세요 : )