In this post, 02 CSS lecture is introuduced.

Box Model

HTML의 tag 들은 그 성격에 따라 화면 전체를 사용하는 tag (e.g. h1 tag) 와 자기 크기 만큼을 갖는 tag (e.g. a tag) 들이 있다. 전자를 block level element(tag), 후자를 inline element 라고 부른다.

• block level element를 inline element 처럼 쓰고 싶다면 display property를 다음처럼 inline으로 설정하면 된다. 마찬가지로 block이라 쓰면 inline element를 block level element 처럼 쓸 수 있다.
• display: none 으로 설정하면 tag를 안보이게 할 수도 있다.

<style>
    h1 {
        border-width: 5px;
        border-color: red;
        border-style: solid;
        display: inline;
    }
    a {
        border-width: 5px;
        border-color: red;
        border-style: solid;
     		display: block;
    }
</style>

• 위 코드를 (display 속성이 없다고 가정하고) 다음과 같이 간단히 표현할 수 있다. 속성 값들의 순서는 중요하지 않다.

  <style>
      h1, a {
          border: 5px red solid;
  </style>
  

• Box Model

  <style>
      h1 {
          border: 5px red solid;
          padding: 20px; /* 테두리와 컨텐츠 사이 간격 */
          margin: 10px; /* 영역과 영역 사이 간격 */
          width: 100px; /* 영역 폭 */
      }
  </style>
  

• 개발자 도구의 elements - style 을 보면 특정 tag가 어떤 css style의 영향을 받고 있는지 일목요연하게 보여준다.

  

다음과 같이 Box Model 에서의 여러 속성들을 적절히 조정하여 다음과 같이 깔끔한 선을 만들어 낼 수 있다.

<style>
    a {
        color: black;
        text-decoration:none;
    }
    h1 {
        font-size: 45px;
        text-align: center;
        border-bottom: 1px solid gray;
        margin: 0;
        padding: 20px;
    }
    ol {
        border-right: 1px solid gray;
        width: 100px;
        margin: 0px;
        padding: 20px;
    }

    body{
        margin: 0px;
    }
    .saw{
        color: gray;
    }
    .active{
        color: red;
    }
</style>