Bootstrap의 개념을 이해하고 스팀잇 같은 사이트 개발을 위해서 개념잡기

isogo (45)in #kr-dev • 8 years ago (edited)

음 본업이 프로그래머라 가장 잘할수 있는게 무었일까 생각해보니 이거밖에 없나봅니다.

가장 기초부터 개념을 익혀가는 반응형 웹에 대한 이해입니다.

반응형웹은 Steemit 처럼 화면의 해상도에 따라 웹 화면이 동적으로 변화하기 때문에 PC, 모바일 기기등에 사용할수 있습니다.

그중 Bootstrap를 이용한 반응형 웹을 구현해보려 합니다.

Bootstrap는 반응형이며 모바일 우선인 웹 프로젝트 개발을 위해 가장 인기있는 HTML , CSS , JS 프레임 워크 입니다

Bootstrap의 장점

반응형이라 PC , 모바일 둘다 사용가능
IE 기반의 웹기술이 아니라 웹 표준에 맞춰저 있기 때문에 크로스 브라우징 지원
디자이너 지원없이 화면 개발 가능
배우기 쉽다.

Bootstrap 단점

새로운 html 기술을 익혀야 한다.
반응형이라고 해서 PC, 모바일 무한정 지원이 아니라 의도에 맞게 기획해야한다.

Bootstrap의 장점과 단점의 내용에서 보더라도 새로운 기술을 익혀야 하는 리스크를 제외하면 장점이 많은 기술입니다.

모바일 웹 화면과 데스트탑 화면을 따로 만들어서 서비스할 필요없이 하나의 화면으로 모든 상황이 대처되기 때문에 생산성 향상에 도움을 주는 기술이라 할수 있습니다.

PC 버전으로 만들어진 일간스포츠 웹 사이트 .. 화면을 줄일시에 동적으로 변경이 없습니다.

일간스포츠 사이트를 모바일로 접속하면 기존 사이트와 다른 모바일 전용 사이트가 열립니다.

결국 2개의 사이트를 개발 및 관리를 하고 있다는 뜻이죠.

이처럼 예전에 만들어진 대부분의 국내 사이트는 반응형 지원이 안됩니다.

반응형웹으로 만들어진 스팀잇 사이트 !!!! 역시! 외국사이트들이 발빠릅니다.

이제 이 스팀잇 사이트와 같은 Bootstrap기반의 반응형 웹 사이트에 대한 개념을 알아보도록 하겠습니다.

반응형 사이트의 반응형 대응 개념에 대한 이야기를 시작하겠습니다.

First Header	Second Header
Content from cell 1	Content from cell 2
Content from cell 1	Content from cell 2

이 테이블의 코딩이 예전에는 고정픽셀 방식이였습니다.

<table style="width:450px">
<tr><td>Content from cell 1 <td><td>Content from cell 2 <td></tr>
<tr><td>Content from cell 1 <td><td>Content from cell 2 <td></tr>
</table>

대충 이런 테이블 고정 픽셀 방식이라고 보시면 됩니다. 테이블 크기가 고정되어 있기 때문에 화면이 커지거나 줄어들어도 테이블은 자기 크기를 유지하게 됩니다.

반응형은 고정 픽셀이 아니라 % 의 개념으로 보시면 됩니다.

<table style="width:100%">
<tr><td>Content from cell 1 <td><td>Content from cell 2 <td></tr>
<tr><td>Content from cell 1 <td><td>Content from cell 2 <td></tr>
</table>

100%의 크기를 가지는 테이블은 화면이 커져도 100%고 화면이 줄어들면 줄어든 크기의 100%를 차지 하기 때문에 동적으로 화면 사이즈가 조정이 가능합니다.

반응형웹에서 사이즈는 일정한 범위를 할당 받는거라 생각하시면 됩니다.

좀더 쉽게 설명할수 있는 재주의 부족으로 이정도로 밖에 표현을 못하겠네요.

다음에는 Bootstrap의 기본원리인 Grid System으로 돌아오겠습니다.

Grid System만 할줄알면 Bootstrap을 정복한것입니다 ^^;;;

다음 게시물에서는 다들 정복자가 되실꺼라 봅니다.

팔로우 , 리스팀 격하게 환영합니다.

감사합니다.

#kr #kr-newbie #jjangjjangman