반응형
1) border-collapse
collapse는 붕괴라는 뜻으로 할고있는데 아마 보더라인을 병합하는게 기존 보더라인을 합침으로써 없어지니까
collapse라고 하는지 모르겠다.
border-dollapse:separate;는 기본값이므로 알고만 있자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>border-colapse 속성을 이용한 border설정하기</title>
<style type="text/css">
table, th, td{border:1px solid blue;}
.separate{border-collapse:separate;} /*기본값*/
.collapse{border-collapse:collapse;}
</style>
</head>
<body>
<h1>border 분리</h1>
<table class="separate">
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table>
<h1>border 병합</h1>
<table class="collapse">
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>
결과
기본 값인 분리 모델을 보면 각 셀의 보더마다 라인이들어가있다. 하지만 border-collapse:collapse;를 사용하면 깔끔하게 합쳐진 모습이된다.
2)overflow 속성
overflow 속성에는 hidden, scroll, auto, visible 등이 있다.
| overflow:hidden; | 콘텐츠의 내용이 박스의 크기를 넘어가는 경우 박스의 크기만큼만 보이고 나머지 컨텐츠는 보이지 않도록 숨길 수 있음. |
| overflow:scroll; | 박스의 크기와 컨텐츠의 내용과 상관없이 박스에 스크롤바를 생성할 때 사용. 박스의 크기가 컨텐츠보다 클경우 스크롤바는 비활성화 되어 나타남. |
| overflow:auto; | 컨텐츠의 내용이 박스의 크기보다 많아서 박스에 자동으로 스크롤바가 생성되도록 함. |
| overflow:visible; | 콘텐츠의 내용이 박스의 크기를 넘어가는 경우 박스의 크기를 무시하고 컨텐츠의 내용을 모두 보여지게 한다. =>기본값 |
각 속성을 style태그에 적용시켜보았다.
p{
border:1px solid black;
padding:5px;
width:150px; height: 70px;
}
.hidden{overflow:hidden;}
.scroll{overflow:scroll;}
.auto{overflow:auto;}
.visible{overflow:visible;}/*기본값*/결과
반응형
'web > HTML&CSS' 카테고리의 다른 글
| HTML에 구글 웹 폰트/웹 아이콘 사용하기. (0) | 2020.03.27 |
|---|---|
| [CSS]transform(3D변형)효과 주기 (0) | 2020.03.27 |
| HTML5의 시멘틱태그, 그 외 태그들 (0) | 2020.03.26 |
| HTML 태그: 기본태그/table 태그 (0) | 2020.03.17 |
| HTML 이란 무엇일까? (0) | 2020.03.15 |
댓글