Box Model
-
margin
경계선 외부의 공간
p{ margin:100px; margin-top :10px; margin: 10px 20px 40px 10px; margin: 10px 40px; } -
border
경계선
p{ border: 2px solid blue; border-color:red; /* border-bottom: 10px; */ } -
padding
실제 내용과 경계선 사이의 공간
/* Padding */ padding: 10px; padding-left:40px; -
content ( width and height)
실제 내용
width: 50%; /* %는 부모요소에 따른 비율을 말한다 */ /* height: 300px; */
전체 사용예제
p{
/* Content - Width and Height */
width: 50%;
/* %는 부모요소에 따른 비율을 말한다 */
/* height: 300px; */
/* Border */
border : 2px solid blue;
/* border-bottom: 10px; */
/* Padding */
padding: 10px;
padding-left:40px;
/* Margin */
margin:100px;
/* margin-top: 50px; */
/* margin: 20px 40px 500px 10px; */
/* top right bottom left */
margin: 0 auto 0 auto;
/* auto로 자동배치가 가능하다. */
margin: 0 auto;
/* (top,bottom) (left,right) */
margin: 50px 20px;
}실습. Tic Tac Toe 보드 만들기
위와 같은 형식으로 만드는 실습을 해보았다.
먼저 테이블을 3행3열로 만든 후 border 를 칠해야하는 부분에 class를 두개를 준 후, 색을 넣어주는 방식으로 문제를 해결했다.
테이블을 가운데 배치하기위해서 margin:auto를 이용했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tic Tac Toe</title>
<style>
body {
text-align: center;
}
table {
margin:auto;
}
.vert{
border-left:1px solid black;
border-right: 1px solid black;
/* width: 73px; */
}
tr{
width: 100px;
height: 100px;
}
td{
width: 100px;
height: 100px;
}
.horizon{
border-top: 1px solid black;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<h1>Tic Tac Toe</h1>
<table>
<tr>
<td></td>
<td class="vert"></td>
<td></td>
</tr>
<tr>
<td class ="horizon"></td>
<td class="vert horizon"></td>
<td class ="horizon"></td>
</tr>
<tr>
<td></td>
<td class="vert"></td>
<td></td>
</tr>
</table>
</body>
</html>'IT > WEB' 카테고리의 다른 글
| [Bootstrap] 부트스트랩 프로젝트 시작하기(버전3) (0) | 2020.10.07 |
|---|---|
| [CSS] Image 갤러리 만들기 실습 (0) | 2020.10.07 |
| [CSS] 셀렉터 기초 (0) | 2020.10.07 |
| [HTML] 간단한 회원가입 양식 만들기 (0) | 2020.10.06 |
| JDBC 정리 및 실습 코드 (1) | 2020.05.22 |
