CSS border의 기본 사용 방법
CSS속성을 이용해서 다양한 도형을 만들어 보도록 하겠습니다.
여러분이 아셔야하는 것은 border, border-radius, :before, :after 이렇게 딱 4가지입니다.
border, border-radius, :before, :after를 이용해서 만들수 있는 예제들입니다.
어떻게 감이 오시나요?
그럼 여러분이 생각하시는 border는 어떤것일까요?
바로 아래의 이미지와 같을거라고 생각하고 있습니다. 맞나요?
.border {
width: 300px;
height: 100px;
border: 10px solid green;
}
.border-radius {
width: 300px;
height: 100px;
border: 10px solid green;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
border속성을 정확히 알고 있다면 쉽게 풀 수 있는 문제입니다.
border는 다 알고 계시겠지만 한번 더 알아보는 시간을 가져야지 앞으로 진행이 좀더 원활하지 않을까 싶네요~
border를 이용하려면 어떤것이 필요할까요..?
border속성을 줄 대상체와 width와 height가 있어야할것이라고 당연히 생각할것입니다.
content+padding+border+margin
border를 이용하기 위해서는 최소한 content 또는 width와 height가 있어야 할것입니다
그러나 우리들이 지금해야할 목적은 오직 삼각형의 도형을 만들기 위한 시간입니다.
그러니 content 또는 width와 height는 다 필요없습니다.
즉 content도 없어야하고, width와 height도 없어야 합니다.
content는 대상체에 content가 없으면 될일이고 width와 height는? width=0; height=0; 쉽죠?
content도 없고 width=0; height=0;인 상태에서 한번 border를 넣어보도록 하겠습니다. 단 각변에 컬러값은 다르게 넣어야 합니다. 왜냐구요?
아래 이미지를 보시면 쉽게 이해가 가실것입니다.
무릅을 탁 치시는분이 계시군요? ^^;
그렇습니다. 각변에 영역을 알아보기 쉽게함으로써 대각선형태로 나누어진다는것을 보여드리기 위한 것입니다.. 그럼 여기서 필요없는 부분은 하나 하나씩 버리면 됩니다.
버리는 방법은 간단합니다 0과 transparent를 이용하는것입니다.
CSS border를 이용한 삼각형 만들기
아래 순서대로 한번 제작을 해보겠습니다.
- width=0; height=0;을 주었더니 피라미드를 위에서 바라본것처럼 4개의 삼각형이 생겼습니다. 우리가 필요한 부분은 4개의 삼각형중에 아래의 녹색의 삼각형이므로 하나하나씩 제거해보겠습니다.
- border-top-width: 0; 우리에게 필요없던 윗부분을 없앴습니다. 그럼 좌우 파란색영역과 노란색영역만 없어지면 되겠군요.
- 2번에서 한것처럼 border-right-width: 0;을 주면 어떻게 될까요?
이런 삼각형에 반쪽까지 사라져버렸습니다. 직각삼각형이 되버렸습니다. 우리들은 이런걸 원했던것이 아닙니다.
그럼 노랑색부분만 뺄 방법은 없을까요?border-right-color: transparent; 이것이 해답입니다. border-right 영역은 살리고 대신 투명처리함으로써 우리가 원했떤 삼각형 형태를 살리고 있습니다. border-left 역시 같은 방법을 사용하면 됩니다.
- 완성된 삼각형 형태입니다.
밑변과 높이는 예제 이미지에서 보시는것처럼 각 변에 border-width를 이용하시면 됩니다.
- border-left-width: 0; 3번에서 우리는 실수로 border-right-width: 0; 넣어봤더니 삼각형에 반쪽이 없어진것을 보았습니다. 실수였지만 우리는 직각삼각형도 만들 수 있다는 사실을 알게 되었습니다. 한마디로 “소 뒤 걸음치다가 쥐 잡은겪이네요”.
CSS Code
.border {
width: 0;
height: 0;
border: 100px solid #00cc33;
border-top-width: 0;
border-right-color: transparent;
border-left-color: transparent;
}
다음 시간을 기약하며
누구나 알 수 있고 만들 수 있지만 속성에 대해서 이해하고 아이디어를 가지고 있다면 이보다 더 좋은 아이디어가 나올 것이라고 보고 있습니다.
다음 시간에는 지금 시간에 배운 삼각형을 이용해서 CSS3 Speech Bubbles을 만들어 보겠습니다.
