저번 면접때 주로 질문 받은건 반응형 웹이 가능하냐에 대한 질문을 많이 받았다.
내가 리뉴얼한 페이지는 반응형이 아니라 자신있게 할 수 있다고 말을 못했다.
준비되지 않은것에 자신있게 거짓말하기가 싫었다.
그리고 해본거랑 할 주 아는거는 차이가 크기 때문이다.
그래서 조금씩 해보기로했다.
처음에는 간단하게 시작하도록 하자.
미디어 쿼리 적용법은 4가지가 있다.
1.link
<head>태그 안에 위치하여 media 속성 안 조건에 만족할 때 해당 css파일을 불러온다
2.<style>
<head>태그 안에 위치하여 media 속성 안 조건에 만족 할 때 스타일을 적용 시킨다
3.<style> - @import
<style>태그 안에서 @import를 사용하여 뒷 부분의 미디어 쿼리를 만족 할 때 해당 css파일을 불러온다.
4.CSS파일
불러온 css파일 안 혹은 <style>태그 안에서 직접 미디어 쿼리를 작성하여 만족할 때 해당 스타일을 적용한다.
나는 css파일 스타일로 만들어보았다.
아주 간단하게 크기별로 box의 with값을 변화를 주었다.
처음에는 박스4개가 나란히 있고 창크기의 변화에 따라
25%~100%까지 해서 적용해 보았다.