안녕하세요. 명월입니다.
이 글은 CSS에서 테두리 및 여백 스타일 - border, margin, padding에 대한 글입니다.
CSS 스타일이라고하면 기본적으로 문자열, 여백, 테두리, 위치, 상태 스타일이 기본적으로 많이 사용되는 스타일입니다.
문자열에 대해서는 예전에 설명한 적이 있습니다.
링크 - [CSS] 문자 스타일
html태그 중에서 가장 많이 사용되는 태그라고 하면 div태그와 table태그가 있습니다.
그 중 table태그가 테두리 태그를 많이 사용합니다. 테두리 태그라고 해서 꼭 table만 사용하는 것은 아니고 다른 태그에서도 사용됩니다.
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>
<table>
<thead>
<tr>
<th>title</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>test1</td>
<td>data1</td>
</tr>
<tr>
<td>test2</td>
<td>data2</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
예제에서 테이블을 만들고 그 중 해더 태그(thead)와 바디 태그(tbody)를 나누어서 thead는 테이블의 타이틀을 tbody에는 내용을 넣었습니다.
현재 위 html에서 아무런 스타일을 넣지 않았기 때문에 테이블 태그라고 해도 글자만 보이게 될 것입니다.
위 예제의 테이블에 테두리(border) 스타일을 넣어보겠습니다.
table {
/* 테이블의 기본 테두리 스타일은 왜인지 이중선(?)이다. collapse 설정하면 실선으로 표시된다. */
border-collapse: collapse;
width: 500px;
}
/* table의 th 태그와 table의 td 태그 */
table th, table td {
/* 테두리 선 두께 */
border-width: 1px;
/* 테두리 선 스타일 - solid : 실선, dotted : 점선 */
border-style: solid;
/* 테두리 선 색상 */
border-color: black;
/* 선 굵기, 스타일, 색상 순으로 표시 할 수있다. */
border: 1px solid black;
/* 요소 기준의 왼쪽 라인의 수정 - 오른쪽, 위, 아래도 가능 border-right, border-top, border-bottom */
border-left: 2px dotted red;
/* 폭 크기 */
width: 50px;
/* 높이의 크기 */
height: 30px;
/* 텍스트 정렬 */
text-align: center;
}
기본적으로 모든 선은 두께 1px의 실선(solid), 색상은 검정색입니다. 여기서 왼쪽 선(border-left)는 두께 2px의 점선 빨간색으로 표시됩니다. 각 셀의 너비는 50px이고 높이는 30px입니다. 셀의 텍스트 정렬은 가운데 정렬로 표시됩니다.
border로 표시할 수도 있고 각 border-right, border-left 같이 위치에 따라 설정할 수도 있고, border-right-color 처럼 속성에 따라 설정할 수도 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div.background {
/* 높이 사이즈 */
height: 100px;
/* 테두리의 사이즈, 스타일, 색 */
border: 3px solid blue;
/* 안 여백 사이즈 */
padding: 10px;
/* 배경색 색 */
background: red;
}
span.item {
/* 요소 표시 타입: 상속(span의 기본 스타일) */
display: inherit;
/* 너비 사이즈 */
width: calc(70vw);
/* 높이 사이즈 */
height: calc(10vh);
/* 배경색 */
background: yellow;
/* 외 여백 사이즈 (왼쪽) */
margin-left: 30px;
/* 테두리 위 오른쪽 모서리(둥글게...) */
border-top-right-radius: 50px;
/* 테두리 */
border: 3px dotted blue;
/* 요소 그림자 설정 */
box-shadow: blue 4px 8px 16px 0px;
}
</style>
</head>
<body>
<div class="background">
<span class="item">Hello world!!</span>
</div>
</body>
</html>
위 예제는 div태그에서 span태그를 넣었습니다.
div태그는 기본 스타일의 너비는 width:100%입니다. 그것은 사실 display:block타입입니다만 display에 대해서는 정리해서 다음에 다시 설명하곘습니다.
div태그에는 높이와 테두리를 설정했습니다. 여기는 padding스타일를 설정했습니다. padding은 내여백인데 요소의 기준으로 안쪽 여백입니다.
예를 들면, div와 span의 왼쪽 여백은 div의 padding의 10px와 span의 margin의 30px에서 div와 span의 왼쪽 여백 간격은 40px입니다.
span의 너비와 높이에서 vw와 vh단위를 사용했습니다.
70vw는 브라우저 화면 크기에 따라 가로 폭 70%라는 뜻입니다. 10vh는 브라우저 화면 크기에 따라 세로 높이 10%의 의미입니다.
calc()은 css에서 유일하게 사용되는 함수입니다만 크기를 계산할 때 사용합니다.예를 들면,cal(70vw-10px)라고 작성이 되면 브라우저의 가로 폭의 70% 크기에 10px를 빼는 것이군요. 또, calc를 이용하면 서로 다른 단위의 크기를 계산할 수 있습니다.
margin과 padding는 border와 같이 right, left, top, bottom의 분할 설정을 할 수 있습니다.
radius의 경우는 사각형의 모서리를 둥글게 하는 스타일입니다.
box-shadow는 요소의 그림자를 그리는 스타일입니다. 그림자는 색깔, 세로(위(-)아래(+)), 가로(왼쪽(-)오른쪽(+)), 거리, 투명도 순으로 설정할 수 있습니다.
여기까지 CSS에서 테두리 및 여백 스타일 - border, margin, padding에 대한 설명이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Study > Javascript, Jquery, CSS' 카테고리의 다른 글
| [CSS] 트랜지션 (transition) (0) | 2020.02.18 |
|---|---|
| [CSS] Column 요소 스타일 (0) | 2020.02.17 |
| [CSS] 정렬 스타일(float) (0) | 2020.02.12 |
| [CSS] 위치(postion)과 요소 객체 스타일(display) (0) | 2020.01.29 |
| [CSS] 문자 스타일 (0) | 2020.01.27 |
| [CSS] 의사 선택자 - link, visited, target, enabled, disabled, not, active, hover, focus (0) | 2020.01.23 |
| [CSS] 의사요소 - fist-line, first-letter, before, after (2) | 2020.01.22 |
| [CSS] 의사클래스 - only-child, only-of-type, empty, empty, root (0) | 2020.01.21 |