Today we will learn about difficult tools so listen carefully guys, Let's get it.
- class는 .과 같이쓰고 id는 #과 같이 쓴다는 것을 잊지말자.
<style type="text/css">
.aaa{
border: dashed;
}
.bbb{
border: dotted;
}
.ccc{
border: double;
}
.ddd{
border: groove;
}
.eee{
border: inset;
}
.fff{
border: outset;
}
.ggg{
border: ridge;
}
</style>
</head>
<body>
<span class="aaa">김덕배</span><span class="aaa">김덕배</span><span class="aaa">김덕배</span><span class="aaa">김덕배</span>
<br><br><br><br>
<span class="bbb">김덕배</span><span class="bbb">김덕배</span><span class="bbb">김덕배</span><span class="bbb">김덕배</span>
<br><br><br><br>
<span class="ccc">김덕배</span><span class="ccc">김덕배</span><span class="ccc">김덕배</span><span class="ccc">김덕배</span>
<br><br><br><br>
<span class="ddd">김덕배</span><span class="ddd">김덕배</span><span class="ddd">김덕배</span><span class="ddd">김덕배</span>
<br><br><br><br>
<span class="eee">김덕배</span><span class="eee">김덕배</span><span class="eee">김덕배</span><span class="eee">김덕배</span>
<br><br><br><br>
<span class="fff">김덕배</span><span class="fff">김덕배</span><span class="fff">김덕배</span><span class="fff">김덕배</span>
- border는 테두리를 정해주는것을 말하는것 같다.
<style type="text/css">
span {
border-color: black;
border-bottom: solid;
border-width: 1px;
padding: 15px;
border-bottom: solid;
border-top: dashed;
border-left: double;
border-right: dotted;
}
</style>
- 말그대로, border는 모퉁이를 말하며, radius는 사각형을 둥굴게 하는 기능을 가진다.
border-radius: 20px /* 모퉁이를 둥글게 만듬 퍼센트로도 사용가능 */
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
<!--뭐 이런표현도 가능하다 알아두자-->
- 적혀진 데이터가 테이블을 벗어나도 테이블의 크기는 고정이된다.
table-layout: fixed; /* 고정시켜버림 */
- 반대로, 데이터의 크기가 테이블을 초과하면 그만큼 테이블도 같이 늘어나게된다.
table-layout: auto; /* 자동으로 글짜수가 늘어나면 칸도 같이 늘어나게 */
- vertical-align: top;은 테이블에서만 먹힌다는것을 명심하자.
/* vertical-align: top; */'Front > CSS' 카테고리의 다른 글
| [CSS] 부트스트랩을 사용하지 않고 반응형 웹 페이지 제작하는 방법 (0) | 2022.11.25 |
|---|---|
| [CSS] 배경관련된 모든모음 (0) | 2022.11.24 |
| [CSS] <ul> , <span> Using background-color tools (0) | 2022.01.18 |
| [CSS] CSS Background tools (0) | 2022.01.17 |
| [CSS] Using CSS background tools (0) | 2022.01.15 |