코어자바스크립트의 1쪽부터 10쪽까지 독서했다
내용이 어려워 10쪽을 독서하는데 1시간 조금 넘게 걸렸다. 계획을 매일 5쪽씩 독서하는것으로 수정했다.
프리캠프4주차2일인데 아직 복습이 부족하다. 그리고 공부양이 줄었다고 느슨해진 감이 크다. 나의 목표는 단순히 부트캠프 수료가아니라 내가 직접 문제를 직면하고 개발을 통해 해결하기위해 공부하는것이다. 내가 상상하는것을 현실로 구현시키고 싶어 배우는 것이라는것 잊지말자.
많이 부족했던 하루이다. 반성하고 다시 감사하며 나아가자.
아래의 내용은 오늘 복습했던 미디어쿼리 내용이다.
2주차때 배웠던 css내용들 중에서 가장 미숙했던 반응형웹을 만들어주는 미디어 쿼리를 복습했다.
반응형 웹은 인터넷을 스마트폰, 테블릿 pc, 데스크탑pc 로 이용하는데 이때 해당 기기에따라 보이도록 만들어진 웹을 말한다.
Pc/Mobile 웹(예날 방식) 접속기기 종류에 따라 다른 url로 연결 시켜줌.
반응형 웹 어떤 기기로 접근하든 같은 url로 접속됨. 하지만 크기에따라 반응하여 다르게 보임
미디어쿼리로 반응형 웹을 쉽게 구현할수 있다.
미디어 쿼리를 통해 뷰포트의 너비에 다라 웹 사이트의 스타일 시트를 수정할 수있다. 뷰포트 너비 이외에도 단말기의 종류, 해상도 등을 기준으로 설정 할 수있다.
@media 미디어 쿼리
@media secret and(max-width:500px){
//스크린의 viewport 너비가 500px 이하일 경우
//적용시킬 스타일 시트
}
Break point는 반응형 웹사이트 작업의 기준이 되는 중단점을 말한다.
Viewport 화면중에 실제로 내용이 들어가는 창인데,디바이스마다 규격이 다르다.
Pc/태블릿/모바일의 기준이 되는 규격 분기는 아래와 같다.
Mobile:0~767px
Tablet:768~1023px
Pc:1024px~1439px
PcLarge:1440px
이를 참고하여 반응형 웹을 만들자.
이번 4주차 기간동안 나만의 다이어리를 만들 계획인데 이다이어리를 반응형웹으로 만들어볼 생각이다.
