CSS / margin, padding
<div id = "div1">
안녕하세용
</div>
<div id = "div2">
코린이입니다
</div>
<div id = "div3">
코인이 아니라 코딩입니다!
</div> /*모든 div속성 정해주기*/
div{
width: 200px;
height:100px;
float: left;
}
/*div 개별 속성*/
#div1{
background-color: #24a7ff;
}
#div2{
background-color: #ff887f;
}
#div3{
background-color: #acff85;
}
여기 요롷게 가로배치 된 div가 3개 있다! 일단 margin부터 살펴볼건데, 편의상 아래 div개별 속성은 코드에 담지 않겠다! 변하지 않았다고 생각하면 된다.
margin
div{
width: 200px;
height:100px;
float: left;
margin: 10px;
}
달라진 점이 무엇일까! div사이가 서로서로 띄워졌다! 사실은 div만 서로 띄워진 것은 아니다.
사이 간격의 띄워진 것 말고도 차이가 보이는가?! 우리가 보기엔 왼쪽과 위쪽이 띄워졌다. 사실은 앞 뒤 양 옆이 간격이 생긴 것이다!
margin을 번역기에 돌리면 '여유'라고 나오는데, 말 그대로 내 주변에 여유를 두고 공간을 확보한다는 뜻이다. 나와 내 사방에 있는 앞, 뒤, 양 옆의 사람들과의 여유간격을 둔다! 라고 외워두면 편하다. margin은 top, bottom, left, right 따로 간격을 넣어 줄 수 있고, margin-top, margin-bottom 등등으로 나타낼 수 있다. 만약 저 네 개를 쓰기 귀찮다면
div{
width: 200px;
height:100px;
float: left;
margin: 20px 10px 50px 20px ;
}이런식으로 한 줄에 몰아서 써도 되는데, 왼쪽부터 순서대로 top, right, bottom, left이다. 시계방향으로 돌아간다고 생각하면 된다!
주의사항 ! margin은 간격을 두는 것이지, 절대로 위치를 옮기거나 하는 친구는 아니다! 잘 알아두도록!
padding
div{
width: 200px;
height:100px;
float: left;
padding: 20px;
}
padding을 준 상태인데 위와 뭔가가 다르다! padding은 패딩을 입었다고 생각하면 된다. 뚱뚱해졌다! 패딩을 입으면 앞 뒤 양 옆으로 뚱뚱해진다!
padding은 번역기가 메워넣기라고 하는데, 속을 보충했다, 뚱뚱해졌다! 이렇게 생각하면 이해하기 편하다. padding도 마찬가지로 top, bottom, left, right로 조절 할 수 있고, 보통은 글자의 중심을 맞출 때 많이 쓰는데,
div{
width: 200px;
height:100px;
float: left;
text-align: center; /*텍스트 가운데정렬*/
padding-top: 100px;
}
오잉 이자식이 너무 뚱뚱해졌다! 우리, 보통 뚱뚱해지면 어떻게 하는가! 보정속옷을 입는다거나, 꽉 끼는 옷으로 살이 안 쪄보이도록 착시효과를 주지 않는가!! 그 때 쓰는 것이 바로 box-sizing이다.
div{
width: 200px;
height:100px;
float: left;
text-align: center;
padding-top: 30px;
box-sizing: border-box;
}
오잉 다시 맨 위와 같이 홀쭉해졌는데, 텍스트는 가운데로 갔다! 나의 div가 저렇게 뚱뚱해지고싶지 않다면 box-sizing을 border-box로 설정하고 padding을 적당하게 설정하면, 원래 원하는 div의 크기를 유지하면서 div 안의 요소를 정렬해줄 수 있다! 삐져나온 내 살들을 보정속옷에 구겨넣어서 날씬해보이도록 한다! 라고 생각하면 된다.