친절한효자손 취미생활

예전에 한번 border의 속성에 대해서 설명을 드린적이 있습니다. 뭔가 설명이 미흡했던 관계로 다시한번 정리해서 올리려고 합니다. 이번에는 이해하기가 좀 더 수월할 것 입니다. 먼저 아래의 결과화면을 보시기를 바랍니다.


See the Pen CSS3 : border-width, border-style, border-color by rgy0409 (@rgy0409) on CodePen.


div 박스마다 약간씩 다른 스타일의 테두리가 적용되어 있습니다. 통상적으로 가장 많이 사용되어지는 방법은 가장 마지막인 BOX13 의 형태 입니다. border 의 속성에는 크게 두께, 스타일, 색상이 들어가는데, 이것을 따로 마크업 할 때도 있고, 한번에 마크업 할 때도 있습니다. 결과는 같지만 쓰임이 달라서 적시적소에 사용하면 됩니다.


예를 들자면 나는 왼쪽과 아래쪽에만 테두리를 주고 싶고 왼쪽에는 빨간색, 아래쪽에는 파란색, 왼쪽 테두리는 10px의 두께를 가지고, 아래쪽은 5px의 두께를 만들기를 원하면서 왼쪽 테두리는 두줄, 아래쪽은 점선으로 만들고 싶은 경우가 있다고 가정해 봅시다. 이럴때는 어떤 식으로 마크업을 하면 좋을까요? 이 예제가 바로 BOX14, BOX15 입니다. 이 부분은 참고만 해두시면 좋을 것 같습니다.



간단하게 border 속성으로만 표현하고자 한다면 아래와 같이 마크업 하시면 됩니다. 단 이렇게 진행하는 조건은 모든 테두리에 동일한 두께, 동일한 스타일, 동일한 색상을 표현하고자 할 경우 입니다. 사실 이 방법을 가장 많이 사용합니다.


border: width style color;



그리고 각 위치별로 다른 속성을 부여하고 싶다면 따로 마크업 하시면 됩니다.


border-width ▶ 테두리의 두께 설정

border-style ▶ 테두리의 스타일(모양) 설정

border-color ▶ 테두리의 색상(절대값 또는 #16진수 또는 rgba값) 설정


border-style의 경우는 위의 예제를 참고하시어 아래의 설명을 보시면 좀 더 이해가 수월할 것 입니다.


스타일종류 설명
solid

실선

dotted

점선

dashed

파선
double이중 실선

groove

안쪽으로 파인 선

ridge

볼록한 입체감이 있는 선

inset

박스 자체가 들어간듯한 효과를 주는 선

outset

박스 자체가 나온듯한 효과를 주는 선

hidden

선을 숨김

none (기본값)

선 없음

친절한효자손 취미생활



또다시 위의 예제를 살펴봐주세요. 그 중에서 BOX11, BOX12번을 봐주시기 바랍니다. 방금 설명드렸던 width, style, color를 각각 따로 마크업을 했고 BOX11은 테두리 4개에 대해 모두 속성을 부여했지만, BOX12의 경우는 두께는 2개의 값만, 스타일은 3개, 색상은 2개만 마크업 했습니다. 해당 스타일의 요소에 데이터를 몇 개를 입력하느냐에 따라서 테두리가 적용되는 위치가 다릅니다.


border-width (style, color 포함) : 1개의 값; ▶ 4개의 테두리에 모두 일괄 적용

border-width (style, color 포함) : 2개의 값; ▶ 위/아래, 오른쪽/왼쪽 테두리 순으로 적용

border-width (style, color 포함) : 3개의 값; ▶ 위, 오른쪽/왼쪽, 아래 테두리 순으로 적용

border-width (style, color 포함) : 4개의 값; ▶ 위, 오른쪽, 아래, 왼쪽 테두리 순으로 적용


이 순서를 기억하셨다가 나중에 CSS에서 border 스타일을 표현하고자 할 때 요긴하게 사용하시면 됩니다. width 값을 3개를 마크업 했다고해서 style 이나 color 까지 꼭 3개를 맞출 필요는 없습니다. 이점도 참고하시면 좋겠습니다.


또한 border의 4개의 위치 중에서 특정 부위의 테두리를 없애려면 hidden 또는 none 처리를 하거나, 두께를 0으로 만들어 버리면 됩니다. 보통 하나의 div에서 border-style을 hidden으로 하든 none 으로 하든 결과값은 같습니다. 하지만 table 같은 표에서의 경우는 다릅니다. hidden 의 경우는 이웃하는 table의 셀이 서로 합쳐지는 것 같은 결과를 얻지만, none의 경우는 단순히 선만 없어지는 결과가 됩니다. 이 차이점을 잘 기억해 주세요. 끝.





공유하기

facebook twitter kakaoTalk kakaostory naver band