CSS / 도형 만들기 / 삼각형
CSS의 border 속성으로 삼각형을 만들 수 있다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아본다.
삼각형 만들기
기본
- 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 / IE8 이하에서 border-radius, box-shadow 적용시키는 방법
CSS3에서 많은 속성이 추가되었습니다. 그 중에서 개인적으로 가장 많이 사용하는 것이 border-radius입니다. 테두리를 둥글게 만들거나 이미지를 원으로 만들 때 이미지 편집 프로그램을 사용할 필요가 없기 때문입니다. 하지만 문제가 있습니다. IE8 이하에서는 적용되지 않는다는 것이죠. 이 문제를 해결해주는 것이 PIE입니다. 간단한 코드 한 줄로 IE8 이하에서도 border-radius를 적용시킬 수 있습니다. PIE 다운로드 다음 링크에서 PIE를 다운로드 받습니다. http://css3pie.com/download/ 업로드 압축을 풀면 ...
CSS의 border 속성으로 삼각형을 만들 수 있다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아본다. 삼각형 만들기 기본 HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만든다. <div class="triangle"></div> 가로와 세로의 크기를 0으로 만든다. 아래쪽, 왼쪽, 오른쪽에 테두리를 추가하면 사각형을 만들 수 있다. .triangle { width: 0px; height: 0px; border-bottom: 360px solid #666666; ...
CSS / Flex / align-self / 아이템의 교차축 정렬 정하는 속성
align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 이렇게 정한 정렬은 콘테이너 안의 모든 아이템에 적용됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...
이미지를 가운데 정렬하는 방법은 여러 가지가 있습니다. 그 중 자주 사용되는 두 가지를 소개합니다. 두 방법 모두 아래처럼 이미지를 가운데에 놓습니다. 방법 1 이미지의 부모 요소에 text-align 속성을 추가하는 방법입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { text-align: center; } </style> </head> <body> <div> <img src="images/200x200.png" alt=""> </div> </body> </html> 방법 2 부모 요소를 사용할 수 없고 이미지만 스타일링이 가능하다면, img 요소를 block 요소로 만든 ...
CSS / text-shadow / 글자에 그림자 효과를 주는 속성
개요 text-shadow는 글자에 그림자 효과를 주는 속성이다. 기본값 : none 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 3 박스에 그림자 효과를 주고 싶다면 box-shadow를 사용한다. 문법 text-shadow: offset-x offset-y blur-radius color | none | initial | inherit offset-x : 그림자의 수평 거리를 정한다. (필수) offset-y : 그림자의 수직 거리를 정한다. (필수) blur-radius : 흐림 정도를 정한다. (선택 : ...
CSS / position의 값이 fixed일 때 가운데 정렬하는 방법
position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다. 아래는 가운데에 위치한 두 요소가 있는 간단한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
float float는 요소를 왼쪽 또는 오른쪽에 배치할 때 유용한 속성입니다. float 속성을 부여한 요소의 다음 요소는 float 속성을 부여한 요소가 차지하는 위치만 제외하고 나머지 공간을 채우게 됩니다. 사진을 왼쪽 또는 오른쪽에 배치하고 그 주위를 텍스트로 채울 때 사용하거나, 사이트 레이아웃을 만들 때 사용합니다. overflow overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. ...
CSS / background-size / 배경 이미지의 가로 크기와 세로 크기를 정하는 속성
개요 background-size로 배경 이미지의 가로 크기와 세로 크기를 정할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 background-size: auto | length | cover | contain | initial | inherit auto : 이미지 크기를 유지합니다. length : 값을 두 개 넣으면 첫번째 값이 가로 크기, 두번째 값이 세로 크기입니다. 값을 한 개 ...
CSS / border-collapse / 표의 테두리와 셀의 테두리 사이의 간격 처리 방식 정하는 속성
개요 border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정한다. 기본값 : separate 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 border-collapse: separate | collapse | initial | inherit separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둔다. collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앤다. 겹치는 부분은 한 줄로 나타낸다. initial : 기본값으로 ...
CSS / background-origin / 배경 이미지를 어느 영역부터 채워나갈지를 정하는 속성
개요 HTML 요소는 박스로 이루어져 있고, 바깥 여백 영역(Margin Area), 테두리 영역(Border Area), 안쪽 여백 영역(Padding Area), 내용 영역(Content Area)으로 구분합니다. background-origin으로 배경 이미지를 어느 영역부터 채워나갈지를 정합니다. 기본값 : padding-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-origin: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역 왼쪽 위부터 채웁니다. padding-box : 안쪽 여백 영역 왼쪽 ...