1) 학습한 내용

1.mediaquery

:반응형 CSS

장점

1) 모든 기기에서 접속 가능
2) 가로모드에 맞춰 레이아웃 변경 가능
3) 사이트 유지 관리 용이
4) 최신 웹 표준 따름

단점

1) 사이트 디자인이 단순
2) 하위 버전 브라우저와 호환성 문제가 있을 수 있음 -> 미디어쿼리는 CSS3 기술

①미디어가 print이고 별도 css로 작성한 경우 연결 방법

<link rel="stylesheet" media="print" href="./css/print.css">

②768px 이하 태블릿 용 css를 별도로 작성한 경우 연결 방법

<link rel="stylesheet" media="screen and (max-width:768px)" href="./css/tablet.css">

2.mobile-first

모바일기기 레이아웃을 기본으로 CSS 만들고 이 후 데스크탑 쪽으로 맞추는 방식: mobile first
-> 모바일 기기 제약을 고려해 처리속도,화면크기 최적화를 먼저 진행

320px ~ 768px 미만 : 모바일기기

768px ~ 1024px 미만 : 태블릿

1024px~ : PC

3.card

media부분이 아닌 부분의 코드와 중복되는 부분은 작성하지 않는다!
but 서로다른 media부분에서는 중복되더라도 작성해야 한다.

-화면크기에 따라 card가 가로정렬 또는 세로정렬로 변화

320px ~ 768px 미만 : 모바일기기

768px ~ 1024px 미만 : 태블릿

1024px~ : PC

4.기타

display 설정 참고 사이트
mediaqueri를 사용한 사이트
색상조합 사이트

카페전문점 과제

2) 학습내용 중 어려웠던 점

display, position 속성의 종류가 많아 차이점을 이해하기 어려웠다.

3) 해결방법

강사님께 수업 중 질문을 하여 해결하였다.

4) 학습소감

페이지 너비에 따라 내용은 동일하지만 배치가 달라지는 것을 배우게 되어 재밌었다