Updated:

css의 레이아웃(display 속성)을 알아보자.

  • html

          <div>1</div>
        <div>23435</div>
        <div>3</div>
          
        <!--Inline-level-->
        <span>1</span>
        <span>2</span>
        <span>3</span>
    
    • block과 inline

        div,span{
          width: 80px;
          height: 80px;
          margin : 20px;
        }
        div {
          background: red;
          display: inline;
        }/* 한줄에 여러개를 넣을 수 있으며
        위 width,height와 상관없이 컨텐츠 크기에 딱 맞게
        설정된다.*/
        span {
          background: Blue;
          display: block;
        } /*블락은 한줄에 한개씩 width,height설정에 맞게 
        표현된다*/
            
      
      • Output.ver1

    • inline-block

      div,span{
        width: 80px;
        height: 80px;
        margin : 20px;
      }
      span {
        background: Blue;
        display: block;
      } /*블락은 한줄에 한개씩 width,height설정에 맞게 
      표현된다*/
      div {
        background: red;
        display: inline-block;
      } /* 인라인-블락은 한줄에 여러개를 넣을 수 있으며
      위width에 반영되어 설정된다.*/
      
      • Output.ver2

댓글 쓰기