반응형
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/01_box_width_height.css">
</head>
<body>
<!-- 1st 박스 -->
<div></div>
<!-- 2nd 박스 -->
<div></div>
</body>
</html>
[CSS]
/* box 기본속성 : 높이, 가로, 바깥여백, 안쪽여백, 외곽선 */
div{
/* 가로 */
width: 100px;
/* 세로 */
height: 100px;
/* 배경색 */
background-color: red;
/* 외곽선 */
/* border : 선두께 선스타일 선색깔 */
border: 5px solid orange; // solid가 실선
/* 안쪽 여백(padding) */
padding: 30px;
/* 바깥 여백(margin) */
margin: 50px;
}
[결과]
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/02_box_detail.css">
</head>
<body>
<div></div>
</body>
</html>
[CSS]
/* box 기본 속성 : 상세 */
div{
/* 가로 */
width: 100px;
/* 세로 */
height: 100px;
/* 외곽선 */
/* border : 선두께, 선스타일, 선색상 */
border: 5px solid orange;
/* 안쪽 여백 : 상/좌/하/우 */
/* padding: 10px; */
/* 따로 설정 */
/* padding-left: 0px;
padding-top: 30px;
padding-right: 0px;
padding-bottom: 30px; */
/* 축약형 : */
/* padding : 상 우 하 좌(12시 기준으로 시계방향) */
padding: 30px 0 30px 0;
/* 바깥여백 : 상/좌/하/우 동일하게 설정*/
/* margin: 10px; */
/* 따로 설정 */
/* margin-left: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px; */
/* 축약 형 */
/* margin : 상 우 하 좌 */
margin: 10px 0 10px 0;
}
[결과값]
반응형
'CSS > CSS 이론' 카테고리의 다른 글
| [CSS] CSS 디자인 우선순위 (0) | 2023.08.09 |
|---|---|
| [CSS] 반응형 웹 이론 - 이미지 처리 (0) | 2023.08.09 |
| [CSS] 배경이미지 (0) | 2023.08.08 |
| [CSS] 폰트스타일 (0) | 2023.08.07 |
| [CSS] 태그선택자 (0) | 2023.08.07 |