- 다양한 주제에 대해 자유롭게 글을 작성하는 게시판입니다.
Date 15/12/29 18:22:12
Name   Toby
Subject   CSS로 삼각형을 그려보자
이 글을 쓰기위해 배경을 설명하다보니 지난 글을 작성하게 되었습니다.
https://kongcha.net/?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코드로 좀 더 복잡한 그림을 그리는 방법을 소개해보겠습니다.



6
  • 야호! 즐거운 css!
  • CSS는 추천!
  • 컴알못이지만 추천을 눌러야 할 것 같은 글이다..


목록
번호 제목 이름 날짜 조회 추천
1780 기타화이버글라스를 조심해야 하는 이유(feat. 난방텐트) 5 홍차먹다빨개짐 15/12/15 28591 0
5564 육아/가정보네이도 무인양품 에어 서큘레이터 비교 4 빠른포기 17/05/03 27701 3
1324 문화/예술한국의 덕후들을 위한 서브컬쳐 성지들 22 블랙이글 15/10/23 27249 4
3678 게임[삼국지 영걸전] 1599 클리어 기념 팁 + 후기와 기타 등등 이야기 31 조홍 16/09/09 26550 8
1882 IT/컴퓨터CSS로 삼각형을 그려보자 18 Toby 15/12/29 26384 6
7015 게임[스압] 오랜만에 문명5 좀 돌려보고 문명별 후기 14 에밀리아 18/01/28 26283 4
621 문화/예술내가 드래곤볼의 셀 편을 안좋아하는 이유 32 王天君 15/07/20 25173 0
760 기타압구정 CGV 템퍼 시네마 체험기 13 Toby 15/08/10 25133 0
1293 일상/생각운전면허 도로주행을 2번 떨어졌습니다. (학원 코스 첨부해봤어요) 23 한신 15/10/19 24922 0
10744 게임불타는 성전을 기다리는 분을 위해 : BiS 아이템 목록 4 메리메리 20/07/04 24749 2
1345 일상/생각누드에 대한 단상(후방주의) 54 눈부심 15/10/26 24628 2
1252 과학/기술각인 - 애들은 엄마, 아빠 누구 머리를 닮나? 11 모모스 15/10/14 24235 6
8902 영화[감상평] 살인마 잭의 집 : 원시인 vs 현대인?(스포 有) 2 에스와이에르 19/02/26 23802 3
7137 꿀팁/강좌구글북스에서 샀는 전자책을 킨들로 읽기 7 Liebe 18/02/18 23642 2
2886 정치어느 소아성애자의 고백 27 피자맛치킨버거 16/05/25 23366 6
3366 IT/컴퓨터어느 게임 회사 이야기 (후기) 53 NULLPointer 16/07/27 23356 42
4954 게임삼국지 13 PK 리뷰 9 저퀴 17/02/21 22872 2
11579 정치민주당이 뭘해야할까? (20대 남성관련) 76 moqq 21/04/14 22834 7
9331 스포츠사사키 로키, 야구의 신이 일본에 보낸 선물 19 温泉卵 19/06/20 22798 19
219 기타아메리카 서부개척시대의 이면에 가려진 흑역사 5 개평3냥 15/06/05 22339 0
4723 기타작자 미상의 인터넷 글 < 그 애 > 14 은머리 17/01/30 22118 3
3931 기타[토막상식] 공칭치수(Nominal dimension)에 대하여 11 April_fool 16/10/16 21801 4
1622 IT/컴퓨터20만원대 LG모니터 h/w 캘리브레이션 논란 18 Toby 15/11/24 21761 0
546 기타카메라의 젤로 현상에 관해서 (쓰려다가 DSLR vs 캠코더로...) 15 한아 15/07/09 21599 0
3301 게임성우의 음성을 게임에서 안쓰는 경우 10 Leeka 16/07/20 21523 0
목록

+ : 최근 2시간내에 달린 댓글
+ : 최근 4시간내에 달린 댓글

댓글