HTML_div를 이용한 박스 디자인

▶️ 박스 디자인에 많이 쓰는 CSS 속성

  .box {
    margin : 20px; 
    padding : 30px;
    border : 1px solid black;
    border-radius : 5px;
  }

margin은 안쪽 여백, padding은 안쪽 여백, border는 테두리, border-radius는 테두리를 둥글게 처리한다. 이외에도 속성이 매우 많으니 구글링을 잘 활용하자.

---

▶️ display : block이 내장되어있는 div박스

  .box {
    display : block;
  }

모든 div, p, h1, li 등은 display : block 속성을 주지 않아도 기본적으로 내장되어있다. 그래서 p태그나 div태그를 사용하면 한 행을 전부 차지하는데, 이것이 싫다면 display 속성을 다른 것으로 부여한다.

---

▶️ inherit(css 상속)

font-size, color, font-family, text-align 같은 속성들은, 부모 태그에 속성을 부여하면 안에있던 자손들 태그까지 전부 상속된다. 주로 글자와 관련된 스타일들이 주로 inherit된다.

---

▶️ 레이아웃 가로정렬1 : float를 사용한 방법

  <div>
    <div class="left-box"></div>
    <div class="right-box"></div>
  </div>

  .left-box {
    width : 100px; 
    height : 100px;
    float : left;
  }
  .right-box {
    width : 100px; 
    height : 100px;
    float : left;
  }

1. 위 코드는 박스 두개를 만들어 각각 왼쪽으로 정렬시킨다.
2. 하지만 float를 쓰면 요소를 붕 띄우다보니 그 다음에 오는 HTML요소들이 제자리를 찾지 못한다.

    <div>
      <div class="left-box"></div>
      <div class="right-box"></div>
      <div class="footer"></div>
    </div>

  .left-box {
    width : 100px; 
    height : 100px;
    float : left;
  }
  .right-box {
    width : 100px; 
    height : 100px;
    float : left;
  }
  .footer {
  clear : both;
  float : none;
  }

이를 방지하기 위해 다음요소에 clear : both; float : none 속성을 추가한다.

---