BoostCourse/HTML/CSS

CSS - 기본4 (레이아웃, Margin, Border, Padding)

Wooni0477 2019. 11. 13. 19:37
반응형


CSS - 기본4 (레이아웃)


1. Margin, Border, Padding 조절



기본적인 범위는 위 그림과 같다.

-auto는 글씨나 콘텐츠 등

-auto는 내용물 사이즈에 따라 자동



-아래 사이트에서 직접 테스트 해볼수 있다.
https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel




1) margin 배치

element간의 간격을 조절한다.


예제

test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <link rel="stylesheet" href="test.css"/>

<div class="left">left</div>
<div class="bottom">bottom</div>

</body>
</html>

test.css

.bottom{
    margin-bottom: 100px;
    margin-top: 100px;
}



Output

2) border 배치

해당 태그에 테두리를 그린다.


test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <link rel="stylesheet" href="test.css"/>
 
  <div class="wrap">
    <div class="static">static</div>
    <div class="relative">relative</div>
    <div class="absolute">absolute</div>
    <div class="fixed">fixed</div>
  </div>
 
</body>
</html>



test.css

.wrap > div{
    border : 1px solid gray;
}



Output



3) Padding 배치


테두리와 내부 값(위 그림 auto) 사이 공백 조절




test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <link rel="stylesheet" href="test.css"/>
 
  <div class="wrap">
    <div class="static">TEST</div>
   
  </div>
 
</body>
</html>


test.css


.wrap > div{
    padding: 10px;
}




Output









반응형