- 다양한 주제에 대해 자유롭게 글을 작성하는 게시판입니다.
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는 추천!
  • 컴알못이지만 추천을 눌러야 할 것 같은 글이다..


?!?! 와우...
레지엔
갑자기 ANSI코드가 생각나는 기분이...
Beer Inside
이분 채소 전화선으로 인터넷 하신분...
이야기 ANSI코드로 그림도 그렸던 시절..
Jannaphile
네온사인처럼 울긋불긋하거나 이리저리 움직이거나...
뭐한다고 당시에 ANSI 공부도 했던 건지. -_ㅠ
실제로 이 방법으로 삼각형을 그리는 방법은 요즘에 실무에서도 많이 씁니다.
저는 항상 이 방법을 사용해서 삼각형을 그리는 편이구요.

이미지 파일보다 용량이 적고, 파일 전송 횟수를 하나 감소시킬 수 있으며, 색상이나 크기 조정이 쉽게 된다는 면에서 코드로 그리는것에 더 장점이 있기 때문입니다.
얼그레이
저도 이거 할 줄 알아요:D 헤헤
Beer Inside
이제 5각형 그리는 방법도........ 삼각형을 5개 모으면 되려나....
damianhwang
조만간 css로 그랑죠 소환하는 법 강좌가 올라올 것 같숩니다!!!
April_fool
정삼각형은 어찌 그리려나요?
저는 뭐 그리는 건 캐드로밖에 몰라서…
위에선 정사각형으로 했지만 약간 넙적한 사각형으로 하면 정삼각형도 가능합니다 ㅎㅎ
곧내려갈게요
우왕.... 플랫디자인 시대에 걸맞는 강의입니다....?
음냐... 그냥 웹폰트 쓰는 저는.. T.T
웹폰트보다도 가볍겠죠? 해볼만은 하겠네요.
단순히 삼각형 하나가 필요한 경우라면 CSS로 그리는 것이 좋을 수 있겠으나, 저처럼 늘 CSS를 다루는 사람이 아니면 필요한 크기와 모양으로 맞춰 그리는 것도 상당히 번거롭고 어렵습니다.
대개의 경우 단색 픽토그램을 자유로운 모양으로 여러개 사용하기 때문에, 사실상 웹폰트 방식을 쓰는게 현실적으로는 훨씬 낫다고 생각합니다.
넵 감사합니다. 다만 지적 호기심으로 해보고 싶어지긴 하네요. 실제 업무에 적용해서 만들려면 좀 경험이 필요하겠지요. 사이즈 맞추는 것도 꽤 다양한 크기로 만들어야 할텐데...
다다음 글 쯤으로 소개하려고 했는데... 스포일러이십니다 ㅎㅎ
남자는 사각팬티죠
목록
번호 제목 이름 날짜 조회 추천
2356 IT/컴퓨터알파고의 작동 원리 8 Toby 16/03/09 6158 5
2289 IT/컴퓨터애플이 2015년 상반기 투명성 보고서를 게시하였습니다. 17 Beer Inside 16/02/24 4604 3
2269 IT/컴퓨터LG의 플래그쉽 휴대폰 G5가 공개되었습니다. 15 Darwin4078 16/02/22 5399 0
2258 IT/컴퓨터삼성 기어 VR 사용기- 이것은 광고글이 아닙니다.(엄격,진지) 5 삼성그룹 16/02/19 5234 0
2110 IT/컴퓨터1월 한국 스마트폰 판매순위 10 Leeka 16/01/25 5262 0
2102 IT/컴퓨터구글,애플에 년 1조 2천억 지불 5 Leeka 16/01/23 4079 1
2070 IT/컴퓨터3주간의 개인 프로젝트 삽질기..(1/2) 11 칸나바롱 16/01/20 8494 5
2024 IT/컴퓨터IE 8,9,10 에 대한 업데이트가 공식 종료되었습니다. 34 Toby 16/01/14 5314 0
2012 IT/컴퓨터국정원 사이버안보 보안권고문 페이지의 정보는 쓸만한가요? 10 한아 16/01/12 6569 0
2011 IT/컴퓨터[정보] ESET NOD32 백신 1년 3,300원 프로모션 25 April_fool 16/01/12 7748 1
2002 IT/컴퓨터애플뮤직, 유료 회원 1000만명 돌파 18 Leeka 16/01/11 5158 0
1984 IT/컴퓨터인텔, 스카이레이크 기반의 컴퓨팅 스틱 발표 3 Beer Inside 16/01/09 4484 0
1964 IT/컴퓨터LG.. 15인치 980g.. 의 그램 공개 13 Leeka 16/01/06 6479 0
1961 IT/컴퓨터CSS로 글씨에 불을 질러보자 10 Toby 16/01/06 10880 5
1960 IT/컴퓨터추수감사절 미국 쇼핑 기기 분석 10 Leeka 16/01/06 5003 0
1950 IT/컴퓨터2015년 스마트워치 시장 결과 1 Leeka 16/01/05 4791 0
1943 IT/컴퓨터와이브로를 아시나요? 37 얼그레이 16/01/04 5389 2
1942 IT/컴퓨터중고차매매 스타트업 규제 논란 11 kpark 16/01/04 6281 0
1941 IT/컴퓨터정초부터 오배송으로 당황스런 일이.... 18 damianhwang 16/01/04 5650 0
1904 IT/컴퓨터세계 시총 1~3위 기업 순위.. 8 Leeka 15/12/31 4806 0
1895 IT/컴퓨터모바일 컨텐츠 제작업체 '메이크어스' 4 Toby 15/12/30 5902 0
1882 IT/컴퓨터CSS로 삼각형을 그려보자 18 Toby 15/12/29 26910 6
1800 IT/컴퓨터구글은 우릴 멍청이로 만드나 47 눈부심 15/12/17 7416 3
1736 IT/컴퓨터막귀 입장에서 써보는 5만원 이하 스피커 사용기 21 전크리넥스만써요 15/12/09 11783 2
1693 IT/컴퓨터Amazon All-new Kindle Paperwhite 사용기 14 선비 15/12/03 7552 0
목록

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

댓글