CSS3 border 속성으로 다양한 삼각형 만들기 (표현 방법)
CSS3로 다양한 삼각형을 만들 수 있습니다. 아니 표현한다는게 더 정확한 키워드겠네요. 웹코딩으로는 사각형이 기본 형태이기에 별도로 삼각형을 구성하는 태그는 없습니다. 저도 검색을 통해 알아보니 border로 삼각형을 만들 수 있는 방법을 알았고, 이것저것 해보니까 조금 이 바닥(?)이 어떻게 돌아가는지 이해가 됩니다. 우선 아래의 예제를 살펴보세요. 예제를 통해서 하나씩 설명드려보겠습니다.
See the Pen CSS3 : Express Triangle by rgy0409 (@rgy0409) on CodePen.
div 안쪽에 p태그로 번호를 부여했습니다. p태그에는 테두리를 주어서 중심이 어디인지를 확인할 수 있도록 마크업 해두었습니다. HTML과 CSS 버튼을 누르셔서 태그 요소들을 확인하실 수 있습니다.
먼저 1번 div의 경우는 지극히 기본형태 입니다. 알아보기 쉽게 border의 위, 아래, 왼쪽, 오른쪽에 각각 다른색을 넣었습니다. 중심은 당연히 div 사각형의 정중앙이 되겠습니다. 가로 및 세로가 각 100px 짜리 div 입니다. 여기에서 border의 영역이 어디까지 구별되어 들어가게 되는지 확인할 수 있는것이 바로 2번 div 입니다.
2번 div의 경우는 border의 두께를 div 사이즈와 동일하게 넣었습니다. 그랬더니 보시는 것처럼 저렇게 테두리가 적용되는것을 확인하실 수 있습니다. 보시면 가운데 빈 공간을 제외한 나머지 영역이 확장되는것을 알 수 있습니다. 즉 div 의 가로 세로 크기를 0으로 만들면, 가운데 빈 공간이 체워진다는 뜻이 됩니다. 그것이 바로 3번 div 입니다.
3번 div를 살펴보니 삼각형 4개가 보입니다. 사실 이것은 눈으로만 보여지는것이지, 현재 삼각형이 된 것이 아닙니다. 한마디로 CSS에서 삼각형을 표현하는것은 그냥 눈속임 입니다.
4번의 경우, 위의 빨간색 border 테두리 색상에 red 대신, transparent를 넣었습니다. transparent는 투명이라는 뜻 입니다. 그래서 div의 형태를 유지하면서 빨간색만 사라진 효과를 얻을 수 있습니다.
5번의 경우는 위가 완전 사라졌습니다. 스타일에 보시면 border-top 속성이 없기 때문입니다. 5번 숫자의 위치를 살펴보시면 중심점이 top에 있는것처럼 보이는데, 사실 border-top이 없기 때문에 마치 중심이 위로 간 것 처럼 보여지는 것 뿐입니다.
6번은 아까 4번의 경우를 응용해서, top과 right의 색상을 투명으로 처리한 것입니다. 이제 7번부터 중요합니다.
7번의 경우는 중심이 녹색 삼각형의 가장 위의 꼭지점에 위치해 있다는것을 알 수 있습니다. 이 뜻은 5번 div처럼 border-top 속성이 없다는 소리겠죠. 그리고 left와 right의 컬러속성을 투명으로 만든것이 됩니다. 이제 조금씩 감이 오시죠? 확인해 보실것은 중심점, 그리고 어떤 부분에 컬러를 넣고, 어떤 부분을 투명으로 처리하며, 또 어떤 부분의 속성을 지우느냐에 따라 다양한 삼각형을 표현할 수 있을 것 입니다.
8번은 7번과 비슷합니다. border-bottom 속성을 없애고, 왼쪽과 오른쪽 색상을 투명으로 만든것입니다.
9번은 border-left 속성이 없으며, top과 bottom의 색상이 투명입니다.
10번은 border-right 속성이 없으며, 9번과 마찬가지로 top과 bottom의 색상이 투명입니다.
11번부터는 아래의 그림을 보시고 다시 설명하겠습니다.
현재 이렇게 표현이 되고 있습니다. 원리는 지금까지 설명했던것과 같습니다. 중심점의 위치를 먼저 살펴보세요. 그러면 border-top과 border-right 속성이 없다는것을 알 수 있습니다. 결국 표현되는 영역은 저기 검정색 점선으로 표시된 부분만 해당이 됩니다. 여기에서 색의 방향을 살펴보세요. 중심점을 기준으로 왼쪽으로 색상이 표현되어 있습니다. 결국 border-left에 색이 들어가고, 그 나머지인 border-bottom은 투명으로 처리가 되었다는 것을 알 수 있습니다.
나머지 12, 13, 14번 div도 이와 같은 원리입니다. 방향에 대한 설정만 달리 해주시면 이렇게 다양한 방향의 삼각형이 완성 됩니다.
15번은 가로가 긴 삼각형 입니다. 간단합니다. 현재 중심점을 기준으로 오른쪽으로 색상이 표현되고 있으니 이것은 border-right에 색이 들어간 경우라는걸 알 수 있습니다. 그리고 border의 두께에 대한 값을 늘리면 가로로 길어지는 효과를 만들 수 있을겁니다.
16번은 border-top의 두께를 늘린것 입니다.
여기까지해서 CSS3에서 border 속성을 이용하여 다양한 삼각형을 표현하는 방법에 대해서 알아봤습니다. 원리를 이해하면 이제 원하는 삼각형의 형태로 얼마든지 만드실 수 있으실 겁니다. 이 방법들을 응용해서 직접 한번 삼각형을 표현해 보시기 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
