CSS / 도형 만들기 / 마름모
마름모는 삼각형을 두 개 붙여서 만든다.
- HTML 문서에 다음과 같이 내용이 없는 요소를 하나 넣는다.
<div class="rhombus"></div>
- 크기를 0으로 한 후, border 속성을 이용하여 삼각형을 만든다.
- position: relative;는 나머지 반쪽의 위치를 잡기 위해 넣은 것이다.
.rhombus {
width: 0px;
height: 0px;
border-right: 200px solid #666666;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
position: relative;
left: -50%;
}
- :after 선택자를 이용하여 삼각형을 하나 더 만든다.
- position을 이용하여 위치를 잘 맞추면 마름모가 만들어진다.
.rhombus:after {
content: "";
border-left: 200px solid #666666;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
position: absolute;
top: -100px;
left: 200px;
}
- 전체 코드는 다음과 같다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body {
margin: 0px;
}
.container {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.rhombus {
width: 0px;
height: 0px;
border-right: 200px solid #666666;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
position: relative;
left: -50%;
}
.rhombus:after {
content: "";
border-left: 200px solid #666666;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
position: absolute;
top: -100px;
left: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<div class="rhombus"></div>
</div>
</div>
</body>
</html>
목록의 내용만 가운데 정렬하기 목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. ul { text-align: center; } 목록 요소 자체를 가운데 정렬하기 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. ul, ol의 기본 가로 크기는 100%이므로, 가로 크기를 지정해줘야 가운데로 정렬됩니다. ul { width: 300px; margin-left: auto; ...
CSS / 마우스로 텍스트 드래그했을 때 배경색, 글자색 바꾸기
웹브라우저에서 텍스트를 마우스로 드래그하면 선택된 글자는 파란색 배경에 흰색을 바뀝니다. 이 색은 CSS로 바꿀 수 있습니다. 사용하는 선택자는 가상 요소 ::selection입니다. 다음은 텍스트를 선택했을 때 배경은 검은색으로, 글자는 노란색으로 만드는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ::selection { background-color: black; color: yellow; } </style> </head> <body> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. ...
CSS / z-index / 요소의 수직 위치 정하는 속성
z-index position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 이때 요소들의 수직 위치를 z-index 속성으로 정합니다. 값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려갑니다. 예제 1 세 개의 div 요소를 겹치게 배치했습니다. 코드 상 나중에 입력한 것일 수록 위로 올라옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { width: 100px; height: 100px; position: absolute; } div.x { background-color: #2196F3; top: ...
표와 셀의 기본 크기 표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다. 크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다. 다음은 크기를 파악하기 위해 테두리만 추가한 간단한 표입니다. 여기에 스타일을 추가해서 크기를 변경해보도록 하겠습니다. <!doctype html> <html lang="ko"> ...
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 / overflow / 내용이 요소의 크기를 벗어났을 때 처리 방법 정하는 속성
개요 overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 2 문법 overflow: visible | hidden | scroll | auto | initial | inherit visible : 박스를 넘어가도 보여줍니다. hidden : 박스를 넘어간 부분은 보이지 않습니다. scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다. auto : 박스를 ...
HTML은 탭을 연속하여 여러 개 넣어도 하나의 공백으로 인식합니다. 하지만 pre 태그를 이용하면 입력된 그대로 출력할 수 있습니다. 기본적으로 하나의 탭을 8개의 공백으로 인식합니다. 예를 들어 아래처럼 코드를 만들면...(각 줄 앞에 있는 빈 칸은 모두 탭입니다.) <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> pre { font-family: Consolas, monospace; font-size: 24px; } </style> </head> <body> <pre> Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. </pre> </body> </html> 웹브라우저에서는 다음처럼 출력합니다. 탭 크기가 ...
체크박스 꾸미는 방법 체크박스를 바로 꾸미는 건 어렵습니다. 그래서 체크박스와 연결된 라벨(label)을 만들고 라벨을 꾸밉니다. 라벨을 클릭하면 체크박스가 체크되고, 다시 클릭하면 체크가 해제되는 성질을 이용하는 겁니다. 체크박스 만들기 빈 라벨을 가진 체크박스를 만듭니다. for 속성을 이용해서 체크박스와 라벨을 연결시켜야 합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...
CSS / backface-visibility / 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성
backface-visibility backface-visibility는 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 backface-visibility: visible | hidden | initial | inherit visible : 보이게 합니다. 기본값입니다. hidden : 보이지 않게 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 체크박스에 체크하면 박스가 180도 회전합니다. 첫 번째 박스는 앞면이 보이고, 두 번째 박스는 ...
CSS / clip / 요소의 특정 부분만 보이게 하는 속성
개요 clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 2 문법 clip: auto | shape | initial | inherit auto : 요소의 모든 부분이 나옵니다. shape : 특정 부분이 나오도록 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 특정 부분만 나오게 할 때는 다음과 같은 코드로 나오는 ...