미디어쿼리를 이용한 반응형 웹 구현하기

 

 

 

신경쓴 점

 

• 반응형 대응/ 더 손쉬운 유지보수를 위해 애초에 html font-size를 10으로 맞춰놓고, 미디어쿼리에서 rem값을 사용하여 font-size를 조절했다.
• margin이나 padding의 값도 반응형을 위해 rem으로 조절했다.
• flex를 사용하여 두 컨텐츠가 direction을 row 혹은 colum으로 손쉽게 방향을 전환할 수 있도록 했다.

 

배운 점

 

• 미디어쿼리를 처음 사용해봤는데 생각보다 어렵지 않았다.
• min-width 와 max-width는 생각보다 이름이 막 와닫지 않는다. 확실히 외워버려야겠다!
• 사실 저 텍스트들이 한글자씩 다음행으로 떨어지는게 싫어서 word-break: keep all;을 설정했는데 먹지 않았다. 시간부족으로 일단 넘겼으나, 찾아보니 빔캠프에 영상이 있어 공부해보고 다음부턴 꼭 적용해야겠다.