이 글을 쓰기위해 배경을 설명하다보니 지난 글을 작성하게 되었습니다.
https://www.redtea.kr/?b=3&n=1576

간단히 요약하면 웹페이지는 HTML, CSS, Javascript로 작성하는데 그 중 HTML은 내용/구조를 CSS는 스타일(디자인)을, Javascript는 동작을 담당합니다.

보통 CSS 코드는 글꼴의 크기와 색상을 설정하고, 배경색상을 지정하고, 테두리를 그리는 정도의 간단한 스타일을 지정하는데요.
CSS로 그림을 그리는 방법을 얘기해보고자 합니다.


보통 그림은 이미지 파일로 처리 합니다.
<img src="그림파일명.jpg">

위와 같은 태그를 사용해서 웹페이지에 이미지 파일을 삽입 할 수 있지요.

하지만 간단한 CSS로도 그림을 그릴 수 있습니다.

사각형을 그려보자

사각형은 쉽습니다.

<div></div>

이렇게 태그를 하나 놓고,
div {
    width: 100px;
    height: 100px;
    background: #000;
}

이렇게 CSS 코드를 작성하면, 검은 사각형을 하나 그릴 수 있습니다.

원을 그려보자

원도 쉽습니다.

위에 그린 사각형에 아래와 같이 한 줄의 코드를 추가하면 모서리를 둥글게 만들 수 있습니다.

border-radius: 10px;




모서리의 둥글기 값을 높여서 100%로 주면 원이됩니다.

border-radius: 100%;

삼각형을 그려보자

삼각형....??
삼각형은 쉽지 않습니다. 과거에는 CSS로 삼각형을 그릴 수 있는 방법은 없는 것으로 여겨져 왔습니다.
그래서 간단한 삼각형을 사용하더라도 항상 포토샵으로 이미지 파일을 만들어서 삽입하곤 했지요.

하지만 누군가가 CSS로 간단히 삼각형을 그릴 수 있는 방법을 발견해냈습니다.

그 방법은 이렇습니다.

일단 CSS border속성을 사용해서 테두리를 칠 수 있습니다.

div {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}



테두리를 두껍게 할 수도 있습니다.

border: 10px solid #000;



테두리의 4방향을 모두 다른 색으로 줄 수도 있습니다.

border-top: 10px solid #000;
border-right: 10px solid #F00;
border-bottom: 10px solid #0F0;
border-left: 10px solid #00F;



테두리의 두께를 더 두껍게 할 수도 있습니다.

border-top: 50px solid #000;
border-right: 50px solid #F00;
border-bottom: 50px solid #0F0;
border-left: 50px solid #00F;



테두리의 색상을 투명으로 줄 수도 있습니다.

border-top: 50px solid #000;
border-right: 50px solid #F00;
border-bottom: 50px solid transparent;
border-left: 50px solid #00F;



3방향을 투명으로 주면, 삼각형 완성!

border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid #00F;




다음번에는 CSS코드로 좀 더 복잡한 그림을 그리는 방법을 소개해보겠습니다.