"반응형 넌 대체 누구냐?"
초보 프론트엔트 개발자 멘붕 이야기 02
초보 프론트엔트 개발자 멘붕 이야기 02
"반응형 넌 대체 누구냐?"
난 전통 개발자가 아니다. 흔히 말하는 비전공 개발자다. 개발자라 하기엔 아직 어색한 초보 중에 왕 초보 개발자다.
그래서 나의 하루는 멘붕과 피로곰의 연속이다.
코드실종 사건이 익숙해지기도 전에...
또 다시 나를 멘붕시키는...
그건 바로 부트스트랩...
어디서 들어는 봤다. 반응형을 쉽게 만드는 프로그램이라는 것 까진 알았다.
나름 호기심에 책을 보기도 했다. 분명 책으로 봤을땐 쉽다 생각했는데...
역시 실무는 ㅠㅠ
부트스트랩으로 만든 홈페이지에 페이지를 추가하는 작업이였는데
픽셀단위로 짜다가 그리드기준으로 작업하려니 도저히 내가 원하는 위치에 딱! 안된다.
잘 모르니...더더 어렵다.
부트스트랩 홈페이지가서 학습을 해도~
이해 될 듯 이해되지 않는...
그래서 결국 포기하고 하드코딩으로 작업했다.
그래도 요즘 부트스트랩으로 작업을 많이 하니 배워두긴 해야하는데..
더더욱 지금 맡은 프로젝트가 반응형이라...
이어 나를 멘붕시킨게 바로 반응형!
이것 때문에 몇 번을 수정작업 중인지 모른다.
미디어쿼리를 쓰고 가변그리드를 사용한다는 이 핵심이 말 처럼 쉽지 않다.
도대체 디바이스 어디다 맞춰야 하고
어디까지 맞춰야 하고
기준을 못 잡아스 멘붕 ㅠㅠ
뻘짓을 얼마나 한지 모른다. 처음엔 가변 그리드로 작업해야 한다는 걸 망각해서;;
고정 그리드로 즉, px로 작업해서 엎고
해상도를 여기저기 기준 없이 맞추다보니~ 이건 너무 노가다라 아니다 싶고;;
사실 아직도 100% 이해가 안되스 헤메는 중이지만
1. 가변그리드로 작업한다. px 가 아닌 %로
2. 기준 디바이스를 정한다.
3. max-width 값을 정한다.
4. 미디어쿼리 해상도 어디까지 할지 정한다.
4번을 뒤엎은 다음에야 좀 알듯 한 상태
먼저 width 와 margin, padding은 %와 px섞어서 작업했다. width 는 % 로 다 잡고~
그리고 디바이스는 회사pc와 내 핸드폰으로 잡았다. 바로 확인이 가능하니깐...
또 요즘 컴퓨터는 해상도가 너무 제각각이라~max-width로 1280px에 맞추고
미디어쿼리도 pc, 모바일 세로, 모바일 가로 이렇게 일단 작업중이다.
사실 여전히 잘은 모르겠다.
width와 height값 사용 안하고 margin과 padding으로만 작업한다고 해서 시도했다가~~또 멘붕!
height 값 없으니 레이아웃을 자꾸 벗어나기도 하고 배경도 안나오고...
width 값을 생략하니 도저히 감이 안오고
그래서 일단은 생략할 수 있는건 하고 아닌건 넣으면서 작업중이다.
아~ 반응형 넌 대체 누구냐??
<공부하자>
부트스트랩
버전4
기본적인 설명이 잘 되어 있다.
일단 다운 받아서작업중인 css와 js폴더에 각각 넣고 사용법 대로 코드를 작성하면 된다.
