css 예제 + position 4가지

관련 react JSX코드:

   <div className="App">
      <h2> CSS Sample </h2>
      <div className="MyDiv">
         <div className="Child"></div> * 5개
         
      </div>
      <div className="MyDiv" style={{display:'flex', justifyContent:'spaceBetween'}}>
        <div className="Child" > </div>
        <div className="Child" > </div>
      </div>
      <div className="MyDiv">c</div>
    </div>

 

<POSITON 4가지 - 기본 static은 제외 >  - 4개 포지션은 left,top,right, bottom 제공.

• relative -  기본static과 거의 동일하지만 left/top 등을 쓰면  dom흐름에서 좀 벋어난다. 
• absolute -  (sticky가 아닌 다른 포지션에 대해, 없을경우는 전체 window에 대해)  left, top을 고정한다. 
                    =>  그래서 부모를 relative로 하면 제일 좋고,  부모를 absolute로 해도 좋음.
• fixed - absolute와 비슷하나, fixed는 스크롤도 되지 않고 그자리 고정된다(absolute는 parent에 고정되므로 스크롤이 따라서 됨)
• sticky = (relative+fixed) : 보통은 relative처럼 동작하지만, 스크롤시 fixed 처럼 동작한다. 

 

<grid >  display:flex와 함께 display:grid 가 유연한 레이아웃을 제공.  flex에서도 flex-wrap: wrap; 으로 어느정도 구현가능.