css - text구성요소 테두리만들기

텍스트가 쓰여지는 구성요소에 테두리를 더해서 웹페이지의 다른 부분과 간단하게 구분할 수 있다. 테두리는 복잡한 페이지의 가독성을 높여 줍니다. 그리고 페이지에 약간의 그래픽 효과를 줄 수 있습니다 

 

 

 

지금 위와 아래에서 보시는 것처럼 텍스트 주위로 회색 테두리가 만들어집니다. 이렇게 만드는 코딩을 해보겠습니다 

 

 

 

css코딩모드에서 다음과 같이 코딩을 입력해 줍니다  그러면 바로 위에보시는 회색테두리의 결과가 나오게 됩니다

 

 

 

 

 

 

3px : 이는 테두리의 폭이다 

solid : 테두리의 유형이다. dotted, dashed, groove,  ridge 등과 같은 다른 테두리 유형도 시험해 보라 대체로 solid가 가장 많이 쓰인다.

grey : 테두리 컬러다 원하는 컬러를 사용할 수 있다. 또는 #47D812 같은 HTML컬러코드를 사용할 수도 있다. 

 

CSS코딩을 위처럼 입력한후 문서에서 텍스트를  왼쪽과 같이 입력하고 출력하게되면

 

XXXXXXXXXXXX

XXXXXXX

XXXXX

XX

 

 

 

결과값이 이렇게 출력됩니다  선명한 회색테두리가 생겨서 더 보기에 좋지 않나요?