[CSS] 레이아웃

레이아웃

• block level은 한줄에 하나씩, inline level은 사이즈 되는 한 표기됨.
• display - block-level과 Inline-level을 변경할 수 있음, 속성값 : block, inline-block, inline
  

  span {
  	display: block;
  }
  
  div {
  	display: inline-block;
  }​

   
  • inline: 상자크기와 상관없이 안에 내용물만을 꾸며줌. 내용물이 없다면 아무 효과도 나타나지 않음.
  • inline-block: 물건크기와 상관없이 상자에 맞춰서 표기. 한줄에 사이즈 되는만큼 여러상자 표기됨.
  • block : 물건크기와 상관없이 상자에 맞춰서 표기. 한줄에 하나의 상자만.
  • 정리 ! inline은 물건, inline-block은 한줄에 여러개가 들어가는 상자, block은 상자!
    

 

• position - 위치설정
  • 기본값은 static. - 가능한 속성값 : relative, absolute, fixed, sticky ,,,,
    

    .container {
    	left: 20px;
    	top : 20px;
    	position: relative;
    }​

  • relative : 아이템이 원래 있어야 할 자리에서 상대적으로 이동.
  • absolute: 아이템이 담겨있는 상자 기준(부모 박스 중에서 가장 근접한, static이 아닌 부모박스 포지션 기준)에서 이동
    

    /* 
    <article class="container">
    	<div></div>
    	<div class="box"></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    </article>
    */
    
    .box {
    	left: 20px;
    	top : 20px;
    	position: relative;
    }​

    >> 이 경우 box는 container위치에서 수치만큼 이동함.
    
    
  ** relative는 원래 자리에서 이동하므로 빈공간이 생기는 반면, absolute는 그 자리에서 아이템이 빠져나온것이므로 다른아이템이 그자리를 채움. **
  • fixed : 상자에서 완전히 벗어나 윈도우, 페이지 상에서 이동
  • sticky : 스크롤을 해도 있어야할 자리 그대로 없어지지 않고 있음.

 

• box-sizing (box-sizing: content-box | border-box | initial | inherit)
  • content-box : 콘텐트 영역을 기준으로 크기를 정함. (기본값)
  • border-box : 테두리를 기준으로 크기를 정함.
  • initial : 기본값으로 설정.
  • inherit : 부모 요소의 속성값을 상속.
    
    

 

참고 - 유튜브 드림코딩