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


목록
번호 제목 이름 날짜 조회 추천
1332 육아/가정거미는 곤충이 아니라고? 14 Toby 15/10/24 9796 0
2972 기타다람쥐 - 생긴대로 판단하면 안 된다 (약혐) 14 Toby 16/06/08 8380 0
1466 IT/컴퓨터트위터 홍차봇 계정을 만들었습니다. 5 Toby 15/11/05 9920 2
2409 일상/생각스토퍼, 클로저, 댐퍼 5 Toby 16/03/16 7610 0
2960 IT/컴퓨터내 계정도 털렸을까? @ www 17 Toby 16/06/07 4077 0
1542 일상/생각홍차넷에 질문을 많이 해주세요. 13 Toby 15/11/12 6493 0
1576 IT/컴퓨터웹 프론트엔드(front-end)란? 20 Toby 15/11/17 8397 8
1616 꿀팁/강좌해커 스크립트 6 Toby 15/11/23 13098 5
1622 IT/컴퓨터20만원대 LG모니터 h/w 캘리브레이션 논란 18 Toby 15/11/24 21768 0
1702 꿀팁/강좌페이코 이벤트 꿀빠세요 (티몬 1만원 할인, 벅스 6개월 990원) 5 Toby 15/12/04 8538 1
1753 기타김광림의원 국회 중 인사청탁 문자 발송 15 Toby 15/12/11 8181 0
1788 정치세월호 청문회가 진행중입니다. 6 Toby 15/12/16 5149 0
1789 정치두산 희망퇴직 이슈 관련 22 Toby 15/12/16 6686 0
1791 기타망년회 벙개를 하려고 합니다 57 Toby 15/12/16 6061 3
1819 일상/생각홍차넷 망년회 벙개를 잘 마쳤습니다. 14 Toby 15/12/19 6549 0
1844 문화/예술텍사스 홀덤 19화가 업로드 되었습니다. 6 Toby 15/12/22 6071 1
1878 기타자문단 활동을 신청해주세요. 27 Toby 15/12/29 4991 0
1882 IT/컴퓨터CSS로 삼각형을 그려보자 18 Toby 15/12/29 26395 6
1895 IT/컴퓨터모바일 컨텐츠 제작업체 '메이크어스' 4 Toby 15/12/30 5610 0
1961 IT/컴퓨터CSS로 글씨에 불을 질러보자 10 Toby 16/01/06 10497 5
1963 정치엄마부대 대표의 경력 22 Toby 16/01/06 6034 0
1969 정치더불어민주당 새 로고 공개 / 김한길 안철수 신당 입당 21 Toby 16/01/07 5351 0
1996 방송/연예썰전 새 패널로 전원책, 유시민 합류 9 Toby 16/01/11 4982 0
2004 요리/음식탕수기 제작기 26 Toby 16/01/11 5746 6
2024 IT/컴퓨터IE 8,9,10 에 대한 업데이트가 공식 종료되었습니다. 34 Toby 16/01/14 4994 0
목록

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

댓글