본문 바로가기
반응형

분류 전체보기135

반응형으로 Youtube 영상 삽입하기(Responsible youtube Embed) youtube 영상을 웹 페이지 내에 '퍼가기'를 해보면 정작 사이즈가 정해져 있어서 모바일 반응형으로 동작하지 않습니다. Mobile이 대세인데, 뭔가 조금 불편하죠. 그래서 이번에는 유튜브 영상을 모바일 반응형으로 퍼가는 방법을 한번 정리해보겠습니다. 저도 까먹을 때 마다 참고하면서 HTML + CSS 코드를 작성하거든요. 유튜브에서 아무 영상을 하나 골라봤습니다. 조만간 개봉한다는 트레일러 영상입니다. (Imax로 보고 싶어요!!) 보통 블로그나, 카톡 등에서 공유할 때는 영상 하단의 [공유] 버튼을 누르고 팝업되는 창에서 [복사] 버튼을 누릅니다. 그러나, 잘 아시다시피 웹 페이지에 삽입(Embed)하기 위해서는 소스 코드를 복사해가야 합니다. 공유 창에서, 소스코드 아이콘을 표시되는 '퍼가기' .. 2022. 12. 5.
[실무적용 CaseStudy] 체크박스 체크해야 버튼 눌리게 해주세요~ 오래 전부터 인연을 만들고 있는 한 고객사로부터 업무요청이 들어왔습니다. 쇼핑몰을 운영하고 있는 곳인데요, 도예 관련한 재료를 판매하는 곳이라 흙덩이 같이 덩치 큰 재료가 많습니다. 그러다 보니 무게와 크기가 각각 달라서 일반 배송을 해야 할지, 트럭을 이용해 배송을 해야 할지 결정해야 하고 주문된 제품의 가짓수에 따라 배송료도 다양하게 산정되는 실무가 존재하는 곳입니다. 그러나 어디서나 무조건 고객분들은 성격 급하시죠^^; 배송비 차등정책을 쇼핑몰 곳곳에 안내해두었지만 해당 안내를 챙겨서 읽는 분은 많지 않을 겁니다. 그러다 보니, "고객분들이 제발 배송비 정책을 사전에 잘 인지할 수 있도록 해주실 수 없나요?" 라는 요청을 받게 되었고 어라? 이거 요즘 공부하는 javascript로 처리가능할 것 같.. 2022. 12. 4.
누구냐, 넌? Javascript 구조분해 할당(Destructuring) 기초개념 정리 자바스크립트 코딩 공부를 간간히 하다보니 언제부턴가... 구조분해할당 또는 디스트럭처링이라는 단어가 심심치 않게 보이기 시작합니다. 느낌적인 느낌으로는 화살표 함수 ( => )처럼 등장한 새로운 문법이 아닐까 생각하곤 했습니다. 이 참에 가볍게 정리해보기로 합니다. JavaScript의 구조 분해 할당은 무엇인가? 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 구조 분해 할당 - JavaScript | MDN 구조 분해 할당 구문은 배열이나 객체의 .. 2022. 12. 3.
재미있게 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.
반응형

티스토리툴바