이번에 알아 볼 내용은 padding, margin, border이다.
이는 MAC기준 command+option+i키를 누른 뒤 뜨는 개발자 화면에서
왼쪽 중앙 조금 아래에 보이는 네모칸에 화살표 대각선으로 들어가있는거 누른 뒤에, 어떤 컨텐츠에 마우스를 갖다 댄 뒤 아래로 스크롤 해보면
이렇게 볼 수 있다.
우리가 보고있는 주 요소는 content라고 생각하면 된다.
border
-테두리
-테두리라고 두께가 없는게 아니다. border-width를 통해 두께 설정, border-style을 통해 선의 모양을 설정, border-color를 통해 선의 색상설정도 가능하다.
padding
-border와 content사이의 공간(안쪽여백이라고도 하는 듯 하다.)
-padding-(top,botton,right,left) : npx 또는 padding : 상px 우px 하px 좌px;로 패딩의 상하좌우 두께설정이 가능하다.
margin
-border밖 외부의 여백을 뜻한다.
-margin또한 padding처럼 두께설정이 가능하다.
아니근데 inline,block설명하는 거 아니었나?
왜 border padding margin에 대해 이야기를 했냐면... 이게 적용되는 내용이 inline,block,inline-block마다 다 다르다.
결론부터 말하자면
inline
1.padding : 좌/우 padding만 적용, 상/하 무시(배경색은 적용)
2.margin : 좌/우 margin만 적용, 상/하 무시
3.border : 좌/우 border만 적용, 상/하 무시
block
1.padding : 상/하/좌/우 다 적용
2.margin : 상/하/좌/우 모두 적용되는데 위 아래 2개의 margin이 있고 각각 400px의 margin을 가지고 있다면 800px만큼 벌어지는게 아니라 상쇄되어 400px만 벌어지게 된다.
근데 이 상황은 block끼리 겹치는 상황이고, inline이나 inline-block의 margin과는 그냥 서로의 margin의 합만큼 쫙 벌어진다.
3.border : 상/하/좌/우 모두 적용
inline-block
1.padding : 상/하/좌/우 모두 적용
2.margin : 상/하/좌/우 모두 적용
3.border : 상/하/좌/우 모두 적용
한 예시를 보자
<body> <span class="chiko">chikorita</span> <span class="chiko">chikorita</span> <span class="o2">chikorita</span> <div>chikorita</div><br> <div>chikorita</div> </body>div{ background-color: darkgoldenrod; width: 100px; } .o2{ background-color: green; padding: 30px 30px 50px 30px; } .chiko{ display: inline-block; background-color: palevioletred; height: 30px; }결과
초록색 치코리타는 위의 패딩을 30px을 줬는데 왜 30px만큼 안 벌어질까?(배경색은 적용이니까 적용되어야 한다고 생각했다.)
이는 padding, margin, border같은 요소는 태그들에만 있는게 아니라 body에도 적용이 되기 때문이다.body{ padding:30px; margin:30px; border: 12px; border-style: solid; }해당 코드를 추가해서 보자
body에도 적용이되어 구분이 되고 있는 것을 볼 수 있다.
이렇듯이 페이지 내부의 요소들을 적절히 잘 설정해 주어야 작성자가 원하는대로 만들 수 있으니 이렇게 저렇게 다뤄보고 감을 잡도록 해보자.
