HTML&CSS box-sizing, margin auto, table

Box-sizing

<div class="first">1번째 박스 가로 200</div>
<div class="second">2번째 박스 가로 200</div>

div {
  width: 200px;
  height: 100px;
  text-align: center;
}

.first {
  background-color: yellow;
}

.second {
  background-color: pink;
  padding: 0 50px 0 50px;
}

HTML과 CSS가 다음과 같을 때,

위와 같은 모습을 보이게 됩니다. Div 박스의 width값을 200px으로 주었는데,

두 번째 박스는 padding 으로 주어진 값 때문에 가로 길이가 300px가 됩니다.

하지만 이런 식으로 추가된 padding값 때문에 element의 width가 바뀌는것은 직관적이지 못합니다.

눈으로 보이는 길이와 주어진 값이 같아야 설계하기도 편하고 알맞게 코딩하기 쉬워지겠죠!

이런 문제를 해결하기 위해서 box-sizing property가 등장하게 됩니다.

div {
  width: 200px;
  height: 100px;
  text-align: center;
}

.first {
  background-color: yellow;
}

.second {
  background-color: pink;
  padding: 0 50px 0 50px;
  box-sizing: border-box;
}

위에 올렸던 css코드와 다른 점은 box-sizing: border-box 뿐입니다. 이 한 줄을 추가해 주면

박스의 가로는 200픽셀이면서 왼쪽과 오른쪽에 padding 이50px씩 있는 모양으로 바뀌게 됩니다.

이런 장점 때문에 대부분의 웹에서 box-sizing 속성을 기본적으로 적용한다고 하네요~~

margin auto

<p>sample text</p>
<p class="m-a">sample text</p>

p {
  width: 200px;
  background-color: rgb(216, 216, 216);
}

.m-a {
  margin: 10px auto;
}

HTML 과 CSS를 다음과 같이 작성했을 때

위와 같이 나타나게 됩니다.

이렇게 되는 이유는 margin에 값을 2개 줄 경우 첫번째 값은 상하, 두번째 값은 좌우에 적용되게 되는데,

(만약 4개의 값을 주는 경우, 위 오른쪽 아래 왼쪽 순서로 적용되게 됩니다)

auto값은 남은 여백을 왼쪽과 오른쪽에 균등하게 분배하겠다는 의미를 가지게 되어 가운데에 있는 것처럼 보이게 됩니다.

table

<table class="mytable">
  <tr>
    <th></th>
    <th>1pm</th>
    <th>2pm</th>
    <th>3pm</th>
  </tr>
  <tr>
    <th>Gym</th>
    <td>Dodge ball</td>
    <td>Kick boxing</td>
    <td>Sack racing</td>
  </tr>
  <tr>
    <th>Exercise Room</th>
    <td>Spinning</td>
    <td class="mytb-span" colspan="2">Yoga marathon</td>
  </tr>
  <tr>
    <th>Pool</th>
    <td class="mytb-span" colspan="3">Water polo</td>
  </tr>
</table>

.mytable th,
.mytable td {
  border: 1px solid black;
}
th {
  color: green;
}
.mytb-span {
  background-color: rgb(132, 206, 142);
}

태그 th는 table heading의 줄임말으로써 열과 행에 제목을 추가하는 용도로 사용합니다.

th태그 사용 시 자동으로 가운데정렬, 굵은 글씨 효과가 적용됩니다. 따로 css효과를 주어 덮어씌울 수도 있습니다.

tr태그는 table row의 줄임말으로, 테이블의 한 행을 의미합니다

각각의 셀은 tr 태그 내의 td 태그로 표현할 수 있습니다.td는 table data의 줄임말입니다.

colspan으로 열 병합, rowspan으로 행 병합을 할 수도 있습니다.