반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-model(선, 바깥여백, 안여백)★★★★★</title>
<link rel="stylesheet" href="./css/study1.css">
</head>
<body>
<div class="container">
<h1>박스모델3요소</h1>
<p>모든 태그는 박스모델 3요소를 가지고 있다.</p>
<ul>
<li>테두리-border</li>
<li>테두리 기준 바깥여백 - margin</li>
<li>테두리 기준 안쪽여백 - padding</li>
</ul>
<p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>lorem</p>
</div>
</body>
</html>
@font-face{
font-family:elice;
src:url(../font/EliceDigitalBaeum_Bold.ttf);
}
.container{font-family: elice;}
.box{
border:1px solid red;
/* border의 축약형을 표현한 것으로 원래는 아래와 같음
border-width:1px; = 테두리의 두께
border-style:solid; = 테두리의 스타일[solid(실선), dotted(점선), dashed(긴점선)]
border-color:red; = 테두리의 칼라
테두리를 일부만 넣고 싶다면 속성명을 border-left / border-right / border-top / border-bottom 식으로 바꾸면 됨
*/
margin:100px;
/* 테두리 바깥 여백을 일부만 넣고 싶다면 속성명을 margin-left / margin-right / margin-top / margin-bottom 식으로 바꿔 따로따로 쓸 수 있음 */
padding:80px;
/* 테두리 안쪽 여백을 일부만 넣고 싶다면 속성명을 padding-left / padding-right / padding-top / padding-bottom 식으로 바꿔 따로따로 쓸 수 있음 */
}
반응형
'IT > HTML&CSS' 카테고리의 다른 글
| [CSS] overflow/box-shadow/text-shadow/border-radius/opacity(2021-10-19) (0) | 2021.11.24 |
|---|---|
| [CSS] 박스모델 예제_Box model 공부(2021-10-12) (0) | 2021.11.24 |
| [CSS] Background_배경 스타일 넣기(2021-10-07) (0) | 2021.11.18 |
| [CSS] 웹폰트, inline vs block(2021-10-05) (0) | 2021.11.18 |
| [CSS] 스타일 상속 및 Font 관련 CSS 속성(2021-09-28) (0) | 2021.11.18 |