요즈음 취업을 하게 되어서 , 회사에 적응 기간을 갖느라고
블로그 활동을 꾸준히 하지 않았는데 다시 블로그를 하면서 그날그날 배운 내용을 복습 하는 시간을 가져 보려고 합니다 ,
저는 회사에서 자체 서비스를 개발하고있으며 , 저는 프론트엔드 개발자로서 새 서비스를 시작할때에 웹 화면을 개발하거나 , 기존에 만들어져 있는 프로젝트들을 유지/보수/개발을 하고 있습니다 .
스택은 Vue.js , bootstrap을 사용하고 있으며 , 저는 bootstrap5에 대해서 지식이 좀 부족한거 같아서 ,
이것에대해 공부를 좀 하려고 합니다 .
당분간은 css퍼블리싱 위주로 공부를 할 생각입니다 .
bootstrap을 사용하면서 중요한 부분은 grid system을 잘 이해하는 것이라고 생각하는데요 ,
우선 bootstrap에서의 grid는 기본적으로 12 column으로 이루어져 있으며 ,
무조건 길이를 12 column을 맞추어야 합니다 .
그리고 grid을 사용하기 위해서는 row의 자식으로 사용해야 합니다 . 이것을 코드로 나타내어 보자면 ,
<div class='row'>
<div class='col-4'>
<span>hello world!</span>
</div>
<div class='col-4'>
<span>hello world!</span>
</div>
<div class='col-4'>
<span>hello world!</span>
</div>
</div>
이렇게 표현할수 있겠습니다 .
row밑에 grid-column 시스템을 적용시키고 , column의 길이는 12를 맞추어 줘야 하므로 3개의 column을 생성할것이면 각 column의 길이는 4가 되어야 3개 column의 총 길이가 12가 됩니다 .
또한 responsive layout을 작성하기 위해서는 각 breakpoint에 맞는 class를 주면 되는데요 ,
우선 이 breakpoint는 다음과 같습니다 .
그리고 상위 breakpoint를 이용해서 ,
<div class='row'>
<div class='col-lg-6'>
<span>hello world!</span>
</div>
<div class='col-lg-6'>
<span>hello world!</span>
</div>
</div>
이렇게 class를 주면 화면사이즈가 lg , 즉 992px보다 작게 되면 6 column의 길이를 갖게 됩니다 .
이런식으로 responsive layout을 작성할 수 있습니다 .
이 <div class='row'></div> 를 크롬 브라우저에서 열어서 확인을 해보면 , display:flex; 옵션이 주어져 있습니다 ,
따라서 이 class에 justify-content-center , align-items-center 를 사용하면 바로 적용이 가능합니다 .
그리고 부모에 col이 들어가있는 div를 확인하여 보니 flex : 0 0 auto가 주어져 있었습니다 . width도 % 값으로 들어가있었는데 ,
12 coulmn을 기준으로 계속 width값이 바뀌는것을 확인할 수 있었습니다 .
그리고 image파일을 사용할때에 , img-fluid라는 class를 사용하면 max-width는 100% , height값은 auto로 잡아줍니다 .
반응형 제작할때에 좋은것 같습니다 .