1.학습한 내용

지난 시간에 이어 미디어 쿼리 두번째 학습 시간이었다.
오늘은 그리드 레이아웃(grid layout)에 대해 학습을 하였다.

다음은 그리드 레이아웃의 3가지 특징이다.
1. 시각적으로 안정된 디자인을 만들 수 있다.
2. 업데이트가 편한 웹 디자인을 구성할 수 있다.
3. 요소를 자유롭게 배치 할수 있다.

다음은 실습 한 결과물들이다.
(1) 메뉴생성 (pc 버전 - x축 , 모바일 - y축)

(2) helbak.com (덴마크 쇼핑몰 레이아웃 구현)

(3) bootstrap agency 사이트 portfolio 콘텐츠 pc mobile switch
(3x2) → (2x3) → (1x6)

(4) 미디어쿼리 할수 있는 방법 3가지

1. 하나의 CSS 파일 안쪽에 pc버전, 모바일버전 모두 mediaqueries (@media 넣는 방식)

@media (min-width:  320px) and (max-width:  539px) {}

2. 모바일용 css 파일 만들기( – link연결) → mediaqueries
   → css code가 엄청 길어지는 경우에 대비
   html에 입력 <link rel="stylesheet" type="text/css" href="css/mobile.css">
   
3. head 에서 style 태그 사용
   html에 입력 <style media="(min-width: 300px) and (max-width: 700px)">

2. 실습

깃허브 소스코드:
html :
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/7
css :
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/8

3. 어려웠던 내용 & 해결방법

bootstrap agency site에서 실습에서 meta viewport에서 이렇게 배율 설정이 되어 있는 상태인데, 크롬 브라우저에서 "ctrl+마우스휠"로 확대 또는 축소를 하면 제가 css에서 지정한 원래 고유의 width값을 변화를 주어야 확대 또는 축소된 상태에서 미디어쿼리가 작동을 하는건지 궁금하였다. 왜냐하면, 80%일때는 강좌에서 처럼 width값을 맞추면 지정된 size 이하가 되면 자동적으로 미디어쿼리가 동작을 하는데, 100%일때에는 가로창을 축소시켜도 미디어쿼리 자체가 동작을 하지 않았기 때문이다.
원래는 100%에서도 동작을 하여야 하는데 개발자 도구 상에서도 별 이상이 없었다. 아직까지 해결되지 못한 부분인데, 이 부분을 좀더 고민을 해보아야 할 것 같다.

4. 소감

교육 과정상 오늘 교육과정이 css의 마지막 과정이었는데, 강좌를 들어서 모방하는 느낌밖에 들지 않는것 같다. 만약 무에서 유를 창조 하라고 한다면, 전혀 하지 못할 것 같다.
적절한 비유일진 모르겠지만, 영어에서 문법과 어휘들을 배웠는데, 겨우 독해만 할수 있는 느낌 (라이팅과 스피킹을 하라고 한다면 전혀 못하는 단계)
2주하고 하루가 지났는데, Output 단계까지 오려면 Input을 역치이상 쏟아 부어야 할 것 같다.
내일부터는 kidsgao 실습이 예정되어있는데, 여태껏 배워왔던 HTML과 css 과정들을 계속 반복 숙달을 하여야 할 것 같다.