반응형 HTML+CSS35 반응형으로 Youtube 영상 삽입하기(Responsible youtube Embed) youtube 영상을 웹 페이지 내에 '퍼가기'를 해보면 정작 사이즈가 정해져 있어서 모바일 반응형으로 동작하지 않습니다. Mobile이 대세인데, 뭔가 조금 불편하죠. 그래서 이번에는 유튜브 영상을 모바일 반응형으로 퍼가는 방법을 한번 정리해보겠습니다. 저도 까먹을 때 마다 참고하면서 HTML + CSS 코드를 작성하거든요. 유튜브에서 아무 영상을 하나 골라봤습니다. 조만간 개봉한다는 트레일러 영상입니다. (Imax로 보고 싶어요!!) 보통 블로그나, 카톡 등에서 공유할 때는 영상 하단의 [공유] 버튼을 누르고 팝업되는 창에서 [복사] 버튼을 누릅니다. 그러나, 잘 아시다시피 웹 페이지에 삽입(Embed)하기 위해서는 소스 코드를 복사해가야 합니다. 공유 창에서, 소스코드 아이콘을 표시되는 '퍼가기' .. 2022. 12. 5. 재미있게 Flex 공부하기 - Flexbox Froggy 문제풀이 13~24 재미 있게 Flex를 공부하는 방법 그 두 번째 시간 이전 포스팅에 이어 Flexbox Froggy 후반부를 풀어봅시다. Flex를 익혀두면 HTML문서로 Layout 잡을 때 정말 간단하면서도 강력함을 느낄 수 있으니 이참에 꼭 익혀두면 좋겠습니다. 문제 13 flex-direction + justify-content + align-items 이상 3가지를 조합하면서 개구리들이 어떻게 배치되는 지 살펴보는 문제입니다. 곰곰히 살펴보면, row정렬에 center에 end라는 키워드가 떠 오른다면 당신은 이미 실력자!! #pond { display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-end; } 문제 .. 2022. 12. 2. 재미있게 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 ··· 6 7 8 9 다음 반응형
