1. padding
1. 각 방향 지정 (margin도 옵션 동일)
padding-top : 20px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 30px;
2. 방향을 위, 오른쪽, 아래쪽, 왼쪽의 시계방향 순서대로 적용
padding:20px 30px 20px 30px;
3. 상하, 좌우
상하 좌우padding : 20px 30px;
4. 한번에 네 방향 안쪽 여백 지정
padding: 30px;
코드 예시
<style>
div{
width:200px;
height: 200px;
border : 2px solid blue;
padding : 30px;
}
</style>2. div
div는 division의 약자로 웹사이트의 레이아웃을 나타내기 위한 공간 분할 표현
block에 해당하는 태그로 레이아웃을 배치 할 경우 css를 활용하여 스타일 적용하여 사용
코드 예시
<body>
<div>div
</div>
</body>3. border
선 표현 -> 선의 굵기 선의 스타일 선의 색상(단어,컬러코드)
ex> 10px solid #000
<style>
div{
border : 2px solid blue;
}
</style>속성 한번에 지정
border : width 선의 굵기, style 선의 스타일, border-color 선의 색상
코드 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin : 10px;
}
.box1{
/* border 하위 속성 - 3개의 속성 함께 사용 */
border-width: 3px;
/* 선의 굵기 >> 전체적용, 기본값 medium */
border-style: solid;
/* 선의 스타일 >> 전체 적용 */
border-color: red;
/* 선의 색상 >> 전체 적용 */
}
.box2{
/* border 속성 한번에 지정
border : width선의 굵기 style선의 스타일 border-color선의 색상*/
border : 3px dashed blue;
}
.box3{
border: 3px dotted purple;
}
.box4{
border:3px double gray;
}
.box5{
border: 5px groove gray;
}
.box6{
border:5px ridge gray;
}
.box7{
border:5px inset gray;
}
.box8{
border:5px outset gray;
}
</style>
</head>
<body>
<div class="box1">일반실선</div>
<div class="box2">긴점선</div>
<div class="box3">점선</div>
<br>
<div class="box4">이중선</div>
<div class="box5">입체</div>
<div class="box6">테두리창</div>
<div class="box7">테두리안쪽</div>
<div class="box8">테두리바깥쪽</div>
</body>
</html>결과
