728x90
반응형
테두리 기본 설정
border: royalblue 3px solid; /* color, width, style */
#border-style-list {
/* border shorthand : 원래는 width, style, color를 각자 설정해야함 */
border: royalblue 3px solid;
list-style-type:none;
}
#border-style-list > li {
border:solid black 5px;
padding: 3px;
margin: 15px;
font-size: 35px;
}
#border-style-list > li:first-child {
border-style: solid;
}
#border-style-list > li:nth-child(2) {
border-style: dotted;
}
#border-style-list > li:nth-child(3) {
border-style: dashed;
}
#border-style-list > li:nth-child(4) {
border-style: double;
border-width: 10px;
}
#border-style-list > li:nth-child(5) {
border-style: inset;
border-width: 10px;
}
#border-style-list > li:nth-child(6) {
border-style: outset;
border-width: 10px;
}
#border-style-list > li:nth-child(7) {
border-style: groove;
border-color: skyblue;
border-width: 10px;
}
#border-style-list > li:nth-child(8) {
border-style: ridge;
border-color: teal;
border-width: 10px;
}
#multivalues {
list-style-type: none;
padding: 5px;
}
#multivalues > li {
border: solid 10px black;
padding: 5px;
font-size: 20px;
margin: 5px;
}
#multivalues > li:first-child {
border-color: crimson;
}
#multivalues > li:nth-child(2) {
border-color: crimson seagreen;
}
#multivalues > li:nth-child(3) {
border-color: aquamarine chocolate blueviolet;
}
#multivalues > li:nth-child(4) {
border-style: none none double none;
border-color: brown cornflowerblue darkgreen darkgoldenrod;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05_테두리.html</title>
<link rel="stylesheet" href="./assets/css05.css">
</head>
<body>
<h3># border styles</h3>
<ul id="border-style-list">
<li>solid</li>
<li>dotted</li>
<li>dashed</li>
<li>double</li>
<li>inset</li>
<li>outset</li>
<li>groove</li>
<li>ridge</li>
</ul>
<h3># 하나의 속성(property)에 여러 값을 주는 경우</h3>
<ul id="multivalues">
<li>하나의 속성에 하나의 값을 주는 경우 (모든 방향)</li>
<li>하나의 속성에 두 개의 값을 주는 경우 (위/아래, 오른쪽/왼쪽)</li>
<li>하나의 속성에 세 개의 값을 주는 경우 (위, 오른쪽/왼쪽, 아래)</li>
<li>하나의 속성에 네 개의 값을 주는 경우 (위, 오른쪽, 아래, 왼쪽)</li>
</ul>
</body>
</html>728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS] 단위(px, mm, cm, in) (0) | 2023.06.04 |
|---|---|
| [CSS] 여백(margin, padding) (0) | 2023.06.04 |
| [CSS] 배경(background) (0) | 2023.06.04 |
| [CSS] CSS 적용하기 (0) | 2023.06.04 |
| [CSS] 선택자 (0) | 2023.06.04 |
