[새싹x코딩온] 풀스택 개발자 부트캠프 과정 3주차-1 회고 | 반응형, Bootstrap

 

반응형이란?

웹 사이트를 개발할때 과거 정적인 페이지에서 요즘엔 가변형 반응형 웹사이트가 많이 생겼습니다

과거에는 모바일, PC 웹사이트가 각각 따로 만들어졌다면 요즘엔 하나로 합쳐 클라이언트 접속기기의 해상도에 따라 변하는 웹사이트가 완전히 자리잡게 되었습니다 하지만 아직까지 모바일과 PC웹을 따로 구분하여 운영되고있는 서비스도 많은데요 이부분은 웹사이트의 용도에 따라 달라질 수 있습니다

 

특히 많은 정보를 담고 있는 사이트라면 반응형으로 개발하기가 어려울 수 있습니다 네이버를 예시로 들자면 네이버의 경우 포털 사이트 외 에도 다양한 서비스를 제공하고 있습니다 이 많은 데이터를 반응형으로 개발하게된다면 데이터용량에 제약이 있는 모바일의 경우 불필요한 데이터를 사용하게되어 소비자측면에서 좋지못한 영향이 생길 수 있고 모바일 디바이스 자체 성능이  PC와는 차이가 있기 때문에 최적화 면에서도 좋지 않을 수 있습니다

 

모바일에서 주로 서비스된다면 반응형 웹이 더 좋을 수 있지만 어떠한 내용이 담기느냐에 따라서 구조가 변경될 수 있습니다

 

미디어쿼리

미디어쿼리는 CSS에서 사용되는 문법으로 뷰포트의 사이즈 조건에 따라서 해상도별 스타일에 대해 대응할 수 있습니다 표준적으로는 모바일, 태블릿, PC, over 이렇게 4개의 단계로 설계를합니다 기기의 발전으로 요즘은 21:9 비율을 갖고있는 모니터도 많기 때문에 4개의 단계로 나누는 편입니다 문법은 아래와 같습니다

 

// max-width, min-width
@media media screen and (크기) {
  
}

 

@media screen and (max-width: 700px) {
	body{
			background-color: yellowgreen;
            }
            
}

 

크기값에는 min-width, max-width 값과 수치 값을 작성하여 사용할 수 있습니다 위의 문법에서는 700px 이하 일때 body 태그의 스타일 배경색을 연녹색으로 하겠다는 뜻을 담고 있습니다 이렇게 특정 해상도에 따라서 보이는 요소의 스타일을 변경하여 각 해상도마다 최적의 화면을 보여주는 기술을 미디어 쿼리 반응형 웹이라고합니다 직저 CSS코드로 작성하는 방법 도 있지만 프레임워크를 사용하여 보다 빠르고쉽게 반응형 웹을 개발 할 수있습니다

 

프레임워크와 라이브러리의 차이

프레임워크는 웹개발을 할때 좀 더 쉽게 만들 수 있도록 뼈대 구조를 제공하는 도구입니다 프레임워크는 설계단계부터 구조적으로 어떻게 사용해야하는지 가이드라인이 정해져있기 때문에 자유도가 라이브러리에 비해 떨어지긴 하나 개발할때 많은 기능들을 보다 빠르게 개발할 수 있다는게 가장 큰 장점입니다

 

라이브러리는 특정 기능을 동작하는 코드의 모음으로 직접 호출하여 사용하는 방식입니다 프레임워크와 달리 구조에 방해받지않고 내가 설계한 코드에서 사용할 수 있습니다

 

Bootstrap이란?

위에서 말한 다양한 프레임워크 중 하나로 HTML, CSS, JS 기능까지 다양한 기능을 포함하고있는 프레임워크입니다 

부트스랩은 기본적인 CSS 디자인도 개발되어있어 별도의 복잡한 CSS를 작성하지않아도 쉽게 개발할 수 있습니다