반응형 CSS20 재미있게 Grid 공부하기 - Grid Graden 문제풀이 15~28 CSS에서의 Grid 시스템 이란? 이전 포스팅에서도 알려드렸던 내용을 잠깐 복습하고 가도록 합니다. Flex와 달리 Grid는 각 셀을 이루는 가로축 세로축 가이드라인(=Grid)를 기준으로 합니다. 양수로 카운트 할 때는 좌에서 우로 음수로 카운트 할 때는 우에서 좌로 Grid Number를 지정할 수 있다고 했습니다. 그리고 Grid의 시작은 부모(Container) 요소에서 display: grid;를 주는 것으로 시작합니다. 그리고 grid-template-columns와 grid-template-rows를 이용해서 바둑판 모양의 격자를 만들고 시작하게 된다고 했죠? #garden { display: grid; grid-template-columns: 20% 20% 20% 20% 20%; gri.. 2022. 12. 8. 재미있게 Grid 공부하기 - Grid Garden 문제풀이 1~14 얼마 전 포스팅에서 다룬 Flexbox Froggy와 더불어 Grid를 재미있게 학습할 수 있는 Grid Garden을 한번 풀어보았습니다. 이 문제도 한 1년 전쯤에 이미 풀어보았던 것인데요, 저의 경우 Flex를 더 자주 사용하다보니 Grid에 대한 기억이 가물가물해진 김에 다시 한번 문제를 풀어보게 되었습니다. 문제는 https://codepip.com/ 에서 회원가입/로그인을 진행하면 풀 수 있습니다. 저는 처음에는 Grid가 Flex 보다 더 직관적인 것도 같고 쉬운 것도 같고 그랬던 거 같았는데 Flex를 자주 사용하다보니 Flex가 오히려 쉬워진 감이 있습니다.^^; 최근 Web에서는 Layout 배치에 있어 Flex와 Grid를 잘 섞어서(?) 사용하고 있으니 두 가지 기능 모두 잘 살펴두.. 2022. 12. 7. 반응형으로 Youtube 영상 삽입하기(Responsible youtube Embed) youtube 영상을 웹 페이지 내에 '퍼가기'를 해보면 정작 사이즈가 정해져 있어서 모바일 반응형으로 동작하지 않습니다. Mobile이 대세인데, 뭔가 조금 불편하죠. 그래서 이번에는 유튜브 영상을 모바일 반응형으로 퍼가는 방법을 한번 정리해보겠습니다. 저도 까먹을 때 마다 참고하면서 HTML + CSS 코드를 작성하거든요. 유튜브에서 아무 영상을 하나 골라봤습니다. 조만간 개봉한다는 트레일러 영상입니다. (Imax로 보고 싶어요!!) 보통 블로그나, 카톡 등에서 공유할 때는 영상 하단의 [공유] 버튼을 누르고 팝업되는 창에서 [복사] 버튼을 누릅니다. 그러나, 잘 아시다시피 웹 페이지에 삽입(Embed)하기 위해서는 소스 코드를 복사해가야 합니다. 공유 창에서, 소스코드 아이콘을 표시되는 '퍼가기' .. 2022. 12. 5. 재미있게 Flex 공부하기 - Flexbox Froggy 문제풀이 1~12 재미있게 Flex를 공부하는 방법 CSS를 한창 재미있게 공부하면서 요즘은 예전에 한번 공부했던 Flex를 다시 복습하고 있습니다. 그러던 차에 라는 게임을 다시 한번 풀어보고 있습니다. https://flexboxfroggy.com/ Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 또는 codepip.com 에서도 같은 내용을 만날 수 있습니다. 일단 무료로 제공되는 게임은 Flex와 Grid를 이용한 게임입니다. 게임을 하면서 Flex나 Grid의 동작방식에 익숙해지고 그러다가 무릎을 탁~! 치게 되는 재미 있는 교육용 게임이라는 생각이 들었습니다. 문제 1 워밍업 문제라서 쉬운 편입니다. 문제 아래에는 제가 푼 해답이 있으니 문제를.. 2022. 12. 1. 이전 1 2 3 4 5 다음 반응형
