CSS 속성

Jan 15, 2024


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        /* 
        1. 태그마다 고유한 디자인 특성들이 있다. 
        2. 그 특성들을 무력화 시키고 디자인 하는 것이 편하다.
        3. inline-block, block을 주로 쓰고  inline을 쓸 일은 별로 없다.
        */

        /* 내가 높이를 50으로 잡았지만 마진, 모더, 패딩 등의 속성을 추가하면서 화면에 보이는 영역이 달라진다. */
        display: block;
        width: 200px;
        height: 200px;
        /* 인라인은 무조건 내용물의 크기에 따라 높이와 너비가 결정되기 때문에 높이 200, 너비 200으로 설정한 것이 반영되지 않는다. */
        /* 인라인-블락을 써야 높이와 너비의 지정이 가능하고 전체적인 레이아웃이 깔끔하고 */
        background-color: red;
        margin-bottom: 10px;
        border: 10px solid black;
        padding: 10px;
      }
    </style>
  </head>

  <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </body>
</html>

See more posts

CSS 속성

More articles

프로세스 강제 종료

CSS 사용 방법

span과 div(inline, block)

인터페이스 적절히 활용하기