CSS3 - 83 [ CSS GRID #7] 그리드와 플렉스를 활용한 반응형 레이아웃 구현하기

[@sixinco]

선생님 좋은 영상 감사합니다. 도움이 많이 되었어요

[@하루-b6p]

목소리가... 목소리가 너무 좋으세요 ㅠㅠㅠ 감사히 들으면서 잘 따라하고 있는데 목소리가 너무 좋으셔서 중간 중간 멈추고 감탄하네요. 조곤조곤,,, ㅠㅠㅠㅠ 이미 목소리 좋다는 말 많이 들어보셨을 듯.

[@Ezweb]

ㅎㅎ 감사합니다^^

[@루삼]

css grid와 flex를 학습하긴 했는데 직접 예제를 따라하면서 익혀야 할 것 같다고 판단해 찾게되었습니다. 감사합니다.

[@Jerry-e7p]

영상 너무 감사합니다

[@5일차200일차도전원준]

감사합니다..

[@Ezweb]

시청해 주셔서 감사드립니다.

[@pompopo9958]

와 패딩을 줘서 그림 나오게 하다니 신기해요

[@강무성-o9r]

썸네일부분의 패딩을 잡는 곳에서요. padding-bottom: 60% 부분이 이해가 안됩니다. 부모가 준 공간의 60%를 잡아라고 하셔는데 제눈이 썩었는지 하나의 그리드 컬럼으로 보면 item-1는 p를 더해 설명을 넣어도 80%는 배경으로 잡하는거 같고 나머지는 배경이 한 20% 만 차지 하는것 같은데... 개념을 못 잡겠네요...

[@Ezweb]

클래스명 .thumb에는 배경만 있고 해당 태그 안에 내용이 없기 때문에 높이를 줘야 배경이 나옵니다. 이때 높이를 그냥 height를 px로 써도 되지만 그러면 그림이 나오는 곳의 높이가 고정이기 때문에 가로 너비를 100%로 그 너비의 60%를 높이로 주려고 합니다. 이때 높이를 그냥 60%를 주면 작동하지 않습니다. 그래서 요소의 크기는 border까지이니까, 하지만 여기선 보더는 필요없고 padding을 이용해서 높이를 생성하려고 합니다. padding-bottom:60%하면, 만약 가로 너비가 200px인 요소의 높이는 자동으로 120px정도의 높이로 인식되게 된는 것입니다.

[@준성박-z4o]

예제를 어디서 다운 받을수 있는지 알 수 있을까요?ㅠ

[@Ezweb]

예제는 멤버쉽(실버이상)을 가입하면 구글 드라이브 폴더를 공유드립니다.

[@hello-1024-wellcome]

안녕하세요 덕분에 css로 레이아웃 마스터에 한발자국 다가서게된것같습니다. 질문 두개가있는데.. 괜찮을까요? 첫번째: .card요소에 min-height:100%를 주셨는데, height:100%으로만 해주는거와 차이가 없어보입니다. 혹시 콕 짚어서 min을 해주신 특별한 이유가있을까요? 두번째: 포지션 조정으로 hover시 요소를 변환시켜주는 방식으로하셨는데 저는 트랜스폼을 활용해서 구현해봤습니다. 이거의 차이는 개발자마다 선호하는 스타일의 차이일 뿐인걸까요? 마지막으로 이렇게 좋은 강의 감사합니다.❤🙂

[@Ezweb]

질문하신 내용 모두는 선호하는 스타일의 차이입니다^^

[@채새링]

안녕하세요질문드립니다 a 태그( 클래스명 card)에 넣은 효과들을 -> a태그를 감싸는 div 태그 ( 클래스명 item-1 ~ 7) 에 효과를 넣지 않는 이유가 뭔가요? 저는 계속 아이템 전체를 감싸는 div에 효과를 계속 주었는데 이지웹님은 div에 주지않고 a태그에 주는 이유가 궁금합니다.

[@채새링]

.card{ background-color: #fff; color: black; text-decoration: none; box-shadow: 0 2px 5px rgba(0,0,0,.1); display: flex; min-height: 100%; flex-direction: column; position: relative; top:0; transition: 0.25s; } 이것들을 .band > div{ background-color: #fff; color: black; text-decoration: none; box-shadow: 0 2px 5px rgba(0,0,0,.1); display: flex; min-height: 100%; flex-direction: column; position: relative; top:0; transition: 0.25s; } 이렇게 변경하는거요 ! 제가 해보았는데 안되긴하는데 이유가 궁금해요 ..

[@Ezweb]

바로 위 부모에게 지정해도 크게 다르지 않습니다. 지금 다시 보니 큰 차이 없겠습니다. ^^ 특별한 이유는 없었습니다.

[@채새링]

@@Ezweb 아하^^ 감사합니다 계속 궁금했는데 물어보길잘햏네용 ㅎㅎ 오늘 밤 편히 잘 수있겠어요 !! 강의 정말 감사합니다

[@potentiall986]

안녕하세요~ 반응형 잡으실 때 기본값에 grid template rows를 auto 로 줬기 때문에 media 구간별 잡을 때는 row 신경 안 쓰고 grid template columns 값만 잘 주면 되는 것인가요? 그리고 grid로 반응형 잡을때는 fr 단위로 주는 것이 좋은지요? 저는 일일히 컬럼 라인 세서 하다가 더 불편한 것 같아서요..높이가 지정된 div들을 배치할 경우에는 개별 그리드 아이템 rows에 auto를 못 주지 않나요?ㅠ

[@Ezweb]

반응형에서는 grid template columns에서 너비를 어떻게 할지만 정해도 쉽게 잡을 수 있습니다. 단위는 fr이 편한 이유는 퍼센트로은 안되는 모자라거나 넘치는 부분을 채우는 속성이 가능하기 때문입니다. 물론 디자인에 따라서는 일일이 컬럼 라인을 세서 잡는 경우가 있을 수 있습니다. 높이가 지정된 div 같은 경우에는 부모요소에 row를 auto로 주고 해당 div에는 반응형에서 높이를 세로 지정하면 되겠습니다. 간단히 예제를 만들어 봤으니 코드 확인해보세요. codepen.io/alikerock/pen/zYOobOj

[@potentiall986]

@@Ezweb 안녕하세요~ 풀스크린 widh100% 페이지 구상 중인데요.. 반응형 하려면 중앙정렬용으로 매 섹션에 프레임 껴주는게 좋을까요? 풀스크린이더라도 해상도를 1200px or 12800x로 프레임 잡고 들어가야할지요? 12그리드를 넣으려고 하는데..열의 폭 120에 gutter 10 10해서 1440px도 종종 시원한느낌으로 잘 쓰이던데, 반응형엔 별로일까요? 저해상도 고려해서 column폭 80에 좌우마진 10,10해서 1200px도 고려하고 있습니다.. 잘 이해는 못하고 쓰고 있어서 걱정되어 여쭤봅니다 ㅠㅠ 요지는 1920px해상도 기준일 때 12그리드 가독성 높게잡으려면 대략 수치를 어떻게 주는게 좋을까요? 어도비 XD이용해보니 12그리드 간격 30이나 20줫을때 나머지 수치들이 자동 변경이라 흔히 이론상으로 주는 수치로 제가 임의로 변경이불가하더라구요 ㅠ 열 12 간격폭 23 열폭 120 맨좌우마진 113 이런식인데...이러면 결국 max width 1200px이 넘어버립니다 ㅠㅠ 그리드가 1200px 딱 맞아야 가운데정렬용 컨테이너 기능을 하는게 아닌가요?ㅠㅠ

[@Ezweb]

@@potentiall986 부트스트랩의 그리드 시스템을 참조하면 쉽겠습니다. 부트스트랩 v4의 경우 1200이하에서는 컨테이터의 너비를 1140으로 잡습니다. 컬럼 너비 70, gutter 30 getbootstrap.com/docs/4.3/layout/grid/ 그리드는 1200에 딱 맞춰야한다는 룰은 없습니다. 다만 1140너비가 19인치 모니터에서 폭이 적당하여 컨텐츠가 한눈에 들어오는 너비이기 때문에 선호할 뿐입니다.

[@potentiall986]

@@Ezweb 부트스트랩이용 하지 않게되면 gutter 30으로 잡으면 좌우 15 15 홀수라서 애매하진 않늘까요?

[@Ezweb]

potential L 그리드 너비 70에 양옆 15마진 x 12 = 1200입니다. 즉 마진 까지 포함하면 1200, 양옆 마진 제외하면 1170입니다. 제가 질문을 이해못한건가요? ^^;