CSS / 도형 만들기 / 삼각형

CSS

CSS로 삼각형을 만들 수 있습니다. 사용하는 속성은 border입니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아보겠습니다.

1 삼각형 만들기
2 삼각형 회전하기
- 2.1 방법 1
- 2.2 방법 2

삼각형 만들기

기본

HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만듭니다.

<div class="triangle"></div>

가로와 세로의 크기를 0으로 만듭니다.
아래쪽, 왼쪽, 오른쪽에 테두리를 추가하면 사각형을 만들 수 있습니다.

.triangle {
  width: 0px;
  height: 0px;
  border-bottom: 360px solid #666666;
  border-left: 180px solid #666666;
  border-right: 180px solid #666666;
}

왼쪽 테두리의 색을 투명으로 하고...

.triangle {
  width: 0px;
  height: 0px;
  border-bottom: 360px solid #666666;
  border-left: 180px solid transparent;
  border-right: 180px solid #666666;
}

오른쪽 테두리의 색을 투명으로 하면 삼각형이 만들어집니다.

.triangle {
  width: 0px;
  height: 0px;
  border-bottom: 360px solid #666666;
  border-left: 180px solid transparent;
  border-right: 180px solid transparent;
}

테두리의 두께를 적절히 변경하면 여러 형태의 삼각형을 만들 수 있습니다.

.triangle {
  width: 0px;
  height: 0px;
  border-bottom: 360px solid #666666;
  border-left: 180px solid transparent;
  border-right: 480px solid transparent;
}

정삼각형

정삼각형의 높이는 밑변 길이의 반의 1.732배입니다.
직접 계산하거나, calc 속성으로 적절히 높이를 정해주면 정삼각형이 만들어집니다.

.triangle {
  width: 0px;
  height: 0px;
  border-bottom: calc( 180px * 1.732 ) solid #666666;
  border-left: 180px solid transparent;
  border-right: 180px solid transparent;
}

직각삼각형

왼쪽 테두리의 크기를 0으로 하면 직각삼각형이 만들어집니다.

.triangle {
  width: 0px;
  height: 0px;
  border-bottom: 360px solid #666666;
  border-left: 0px solid transparent;
  border-right: 240px solid transparent;
}

삼각형 회전하기

방법 1

테두리에 적용되는 값을 변경하면 삼각형을 회전 시킬 수 있습니다.
이 방법의 단점은 90도씩만 회전 가능하다는 것입니다.

.triangle {
  width: 0px;
  height: 0px;
  border-bottom: 360px solid #666666;
  border-left: 180px solid transparent;
  border-right: 180px solid transparent;
}

.triangle {
  width: 0px;
  height: 0px;
  border-left: 360px solid #666666;
  border-top: 180px solid transparent;
  border-bottom: 180px solid transparent;
}

.triangle {
  width: 0px;
  height: 0px;
  border-top: 360px solid #666666;
  border-left: 180px solid transparent;
  border-right: 180px solid transparent;
}

.triangle {
  width: 0px;
  height: 0px;
  border-right: 360px solid #666666;
  border-top: 180px solid transparent;
  border-bottom: 180px solid transparent;
}

방법 2

원하는 만큼 회전 시키려면 transform 속성의 rotate를 사용합니다.
각도를 입력하면 자유롭게 회전 시킬 수 있습니다.

.triangle {
  width: 0px;
  height: 0px;
  border-bottom: 360px solid #666666;
  border-left: 180px solid transparent;
  border-right: 180px solid transparent;
  transform: rotate( 45deg );
}

CSS

CSS / 구글 웹폰트 사용하는 방법

구글에서 많은 웹폰트를 제공하고 있다. 어떻게 사용하는지, IE를 지원하는 방법은 무엇인지 알아본다. 글꼴 선택하고 코드 얻기 구글 웹폰트에 접속한다. 한글 웹폰트가 필요하다면 Languages를 Korean으로 설정한다. + 버튼을 클릭하여 글꼴을 선택한다. 여러 개를 선택해도 된다. 아래에 있는 검은 색 바를 클릭한다. 구글 웹폰트를 사용할 수 있는 코드가 있는데, 기본 스타일 외에 다른 스타일을 선택하거나 한글을 사용하려면 ...

CSS / caption-side / 표(table)의 캡션의 위치를 정하는 속성

개요 caption-side는 표(table)의 캡션의 위치를 정하는 속성이다. 기본값 : top 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 caption-side: top | bottom | initial | inherit top : 기본값으로, 표의 위에 캡션을 위치시킨다. bottom : 표의 아래에 캡션을 위치시킨다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속 받는다. 예제 <!doctype html> <html lang="ko"> <head> ...

CSS / 이미지 버튼 만들기

버튼을 꾸미는 방법 중의 하나는 이미지를 이용하는 것입니다. 적당한 크기의 버튼을 만듭니다. 그 크기에 맞는 이미지를 배경으로 정합니다. 다음은 32x32 크기의 돋보기 이미지를 이용해서 버튼을 꾸미는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> input { ...

CSS / border-style / 테두리 모양을 정하는 속성

CSS / list-style-image / 목록의 마커로 이미지 사용하기

개요 list-style-image로 이미지를 ul, ol 등의 목록의 마커(marker)로 사용할 수 있습니다. 기본값 : none 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 list-style-image: none | url | initial | inherit none : 이미지가 없습니다. url : 사용할 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 이미지는 원본 크기 그대로 나옵니다. 따라서 글자 크기에 ...

CSS / ul, ol 가운데 정렬하는 방법

목록의 내용만 가운데 정렬하기 목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. ul { text-align: center; } 목록 요소 자체를 가운데 정렬하기 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. ul, ol의 기본 가로 크기는 100%이므로, 가로 크기를 지정해줘야 가운데로 정렬됩니다. ul { width: 300px; margin-left: auto; ...

CSS / columns / 다단으로 만들기

columns columns는 다단으로 만드는 속성입니다. 단의 최소 가로 크기와 단의 최대 개수가 속성의 값입니다. 기본값은 auto로, 값을 입력하지 않으면 auto로 처리합니다. IE는 버전 10 이상을 지원합니다. 예제 1 문단을 3단으로 만듭니다. 단의 최소 가로 크기가 설정되지 않았으므로 균등한 크기로 단이 만들어집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb { columns : 3; } </style> </head> <body> <p class="jb">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ...

CSS / text-indent / 들여쓰기, 내어쓰기 만드는 속성

text-indent 들여쓰기와 내어쓰기는 text-indent 속성으로 만듭니다. 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 됩니다. 기본값은 0입니다. 내어쓰기를 할 때는 왼쪽에 여백을 적절히 줍니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> p { font-size: 20px; ...

CSS / 선택자(Selector)

전체 선택자(Universal Selector) 전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다. 별표(*)로 나타냅니다. 예를 들어 다음은 모든 요소의 색을 파란색으로 만듭니다. * { color: blue; } 다른 선택자와 같이 사용할 때는 생략할 수 있습니다. 즉, 다음 두 줄은 같은 결과를 만듭니다. *.abc { color: blue; } .abc { color: blue; } 타입 선택자(Type Selector) 타입 선택자(Type Selector)는 h1, p, ...

CSS / 마우스 오버 효과 / 서서히 길어지는 선 그리기

마우스를 올리면 선이 그려지는 효과를 만들어봅니다. 위쪽 가로 방향으로 선 그리기 다음과 같이 사각형을 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CODING FACTORY