[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 2주차 - 5일차 회고⎜bootstrap, 반응형 웹

bootstrap

bootstrap이란 웹 사이트를 쉽게 만들 수 있도록 도와주는 공개 HTML, CSS, JS 프레임 워크

 

*프레임워크란?

  - 어떤 프로그램을 만들기 위한 기본 틀

 

 

 

 

 

사용방법

1. bootsrap 홈페이지 접속
2. 상단 바에 Docs 클릭 후 getting start 메뉴에서 Download 클릭
3. CDN via jsDelivr 아래 있는 링크 복사하여 head 태그 안에 붙여 넣기 하면 사용준비 완료!

들어가면 정말 여러 가지 요소들과 테마들이 많다.(물론 테마는 사용하려면 유료임.) 앞으로 사용하면서 익숙해져야 할 거 같다.

 

오늘은 그중 아이콘 사용 방법을 알아보았다.

 

bootstrap 홈페이지 상단에 Icons 클릭 후 아래쪽에 Install을 클릭하면 CDN 아래 있는 첫 번째 링크 복사 후 head 태그 안에 붙여 넣기.(이 작업을 해야 아래에 보이는 작업이 가능)

 

그 후 원하는 아이콘이 있으면 그걸 클릭해서 들어간 후 Icon font 아래쪽에 링크 복사 후 사용

 

반응형 웹

 : 하나의 웹사이트가 pc, 스마트폰, 태블릿 pc, 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법

 

대표적으로 카카오 모빌리티 홈페이지나, 삼성 뉴스 룸 홈페이지 같은 경우는 반응형 웹이다. 화면 크기에 웹 페이지의 디자인과 레이아웃이 움직인다.

 

 장점 

1. 모든 플랫폼에서 일관된 콘텐츠 경험 가능
2. 보편적이지 않은 화면 크기의 새로운 기기에서도 작동을 가능

 단점

1. 각각의 기기에서 웹사이트가 렌더링 되는 방식에 대한 통제가 상대적으로 어려움
2. 요소가 잘못된 순서 또는 크기로 재배치되는 경우, 시각적 계층 구조 방해함
3. 디자인에 대한 더 많은 전문 지식이 필요, 플랫폼 간 테스트 및 디자인 조정 요함
4. 동적 콘텐츠를 불러오는 데 더 많은 작업이 요구

적응형 디자인

 : 웹 페이지에서 감지된 기기를 기반으로 미리 만들어진 정적인 레이아웃을 불러와 사용

 

장점

1. 각 플랫품 및 상황과 맥락에 맞춰 제공되는 완벽한 맞춤화된 경험
2. 원하는 기기에 맞게 최적화된 디자인을 할 수 있는 고성능 작업 수행
3. 광고 및 타사의 통합 콘텐츠에 대한 간편화 맞춤화

단점

1. 콘텐츠가 모든 기기에 일관지이 않을 경우에는 부정적인 영향을 미침

>>뭐가 더 좋고 나쁘다 이런 건 정해져 있지 않지만 상황에 맞게 사용을 하면 좋을 거 같다.

 

반응형 웹을 위해서 탄생한 게 바로 

viewport 이다.

@media (미디어 쿼리)

 - 서로 다른 미디어 타입(디바이스 화면)에 따라 별도의 css를 지정하게 하는 기술

 

@media 미디어유형 and (크기 규칙)

미디어 유형 : All(전부), Print(인쇄), Screen(브라우저 / 이걸 제일 많이 사용할 거 같음)

크기 규칙 : min(최소 뷰포트 넓이 설정), max(최대 뷰포트 넓이 설정)

 

ex)

<style>

@media screen and (max-width: 480px) {

}

/*화면 넓이가 480px 이하일 경우 화면에 적용*/

@media screen and (min-width: 480px) {

}

/*화면 넓이가 480px 이상일 경우 인쇄에 적용*/

</style>

 

다음 주부턴 프로젝트 진행을 한다고 하는데 주말 간 좀 더 열심히 공부를 해놔야 원활한 진행이 될 거 같다.