CSS Flexbox 강좌

CSS Flexbox 강좌

제1강.  Flexbox 소개와 반드시 익혀야 하는 이유

본문

웹이 시작된 이후로 웹종사를 끊임없이 괴롭혀 온 것은 컨텐츠를 화면 원하는 곳에 배치하는 문제였습니다.

이와 관련, 상당기간 table 엘리먼트가 그 역할을 수행했습니다.


웹표준이 정착하면서 table은 더이상 사용되지 않았고, CSS에서 제공하는 position을 포함한 여러 속성들을 혼합하여 이 문제를 해결해 왔습니다.

부트스트랩이 몰고온 grid개념은 CSS표준에 레이아웃과 관련한 전문 속성을 요구하게 되었고, 표준화기구에서는 Flexbox를 제시하게 됩니다.

꽤 오랜기간 보완을 거듭해서 지금은 웹사이트 레이아웃의 해결책으로 자리매김하였습니다.

1차원 축으로 인한 미비점으로 CSS Grid가 나왔지만 아직은 웹브라우저 ie를 사용하는 사람이 있어서 CSS Grid가 정착하기엔 이른 감이 있습니다.

웹퍼블리셔를 비롯한 웹종사자에게 현재 가장 중요하고 필요한 웹 표준은 CSS Flexbox라고 여겨집니다.


CSS Flexbox를 이해하면 엘리먼트를 원하는 곳에 적절하게 배치할 수 있습니다.


무엇보다 부트스트랩4가 Flexbox를 이용하여 레이아웃 및 대부분의 컴포넌트를 구성하고 있습니다.


CSS Flexbox를 충분히 익히면 부트스트랩4를 더욱 편하고 다양하게 다룰 수 있습니다.


HTML 


<div class="container">
  <header>header</header>  
  <section>
    <nav>nav</nav>
    <main>content</main>
    <aside>aside</aside>
  </section>
  <footer>footer</footer>    
</div>


CSS


body {
  font-family: '맑은고딕', Helvetica, Arial, sans-serif;
  padding: 50px;
  font-size: 14px;
  color:white;
}
.container{
  background:#ff5577;
  border:5px solid #ff0033;
  font-size:2rem;;
}
header,section,footer{
  background:#55aa99;
  margin:5px 1px;;
  padding:5px;
}
nav,main,aside{
  padding:5px;
  background:#eee;
  color:#333;
}
main{
  background:#aaa;
}

댓글목록

등록된 댓글이 없습니다.