border 테두리 속성에 대한 CSS 태그 및 요소 사용법
오늘은 CSS 스타일 중 border 태두리 속성에 대해서 배웠습니다. 사용법은 간단합니다. 테두리가 어떤 형태로 나타나는지, 그리고 해당 요소는 무엇인지만 기억해 주시고, 적절한 문장을 강조하고자 할때, 한 문단을 감싸고자 할 때 적시적소에 쓰시면 되겠습니다.
우선 마크업 상태를 확인해 주시기 바랍니다. 그리고 본문 body 안쪽에는 단락 요소인 p태그를 사용했고 짧은 문장을 몇 개 적었습니다. 그리고 p태그는 class 값을 부여했습니다. 각 클래스별 스타일을 내부스타일 방식으로 head의 style 에서 지정하였습니다. 보시면 border 속성값이 대략적으로 3가지 묶음 정도로 보여지게 되는데 각 요소의 역할은 다음과 같습니다.
border : { 테두리 두께, 테두리 형태(디자인), 테두리 색상 ; }
이렇게 이루어져 있습니다. 이 부분을 기억해 주시면 좋을 것 같습니다. 또한 border 도 특정 위치에 따라 보여지게만 할 수 있습니다. 전 시간에 배워본 margin 혹은 padding의 top / bottom / left / right 를 기억하시죠? 똑같이 이용할 수 있습니다.
border-top → 위쪽 테두리
border-bottom → 아래쪽 테두리
border-left → 왼쪽 테두리
border-right → 오른쪽 테두리
그리고 원하고자 하는 위치에서만 선을 보이지 않게 할 수도 있습니다.
border-top : none ; → 위쪽 테두리를 없앰
border-bottom : none ; → 아래 테두리를 없앰
border-left : none ; → 왼쪽 테두리를 없앰
border-right : none ; → 오른쪽 테두리를 없앰
이렇게 하시면 됩니다. 그러면 위의 예시대로 마크업하여 출력되는 결과물을 한번 살펴보겠습니다.
네. 이렇게 나타나게 됩니다. border 스타일은 자주 사용되는건 아니지만, 티스토리 블로그에서 관련글이라던지 강조하고 싶은 문장이라던지 이런 경우에 적절히 쓰면 좋을 것 같습니다.
이렇게 말이죠.
간단하죠? 끝.
"친절한효자손 취미생활" 을 검색!
