본문 바로가기
반응형

전체 글132

재미있게 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.
버튼을 클릭하면 클립보드에 복사하기, Button, Clipboard 주말을 맞이하여 잠깐 생각해둔 바 있던 개인 프로젝트를 진행해보고 있습니다. 당근빠따 실력은 아직 미천하지만 그 동안 공부해온 내용 수준 안에서 완성을 해 볼 수 있는 수준으로 기획했습니다. Kin Converter라고 일단 대충 이름을 붙여봤는데요 상단 Textarea에 코드를 넣고 [ Convert ] 버튼을 클릭하면 변경된 코드가 아래쪽 Textarea에 출력되고 이때 알아서 복사해가거나 [ Copy to ClipBoard ] 버튼을 클릭하면 메모리에 복사가 되어 퍼가기 쉽게 하는 기능입니다. 요즘은 유튜브나 다른 서비스들에서도 저렇게 버튼을 클릭하면 생성된 코드를 메모리에 복사해주는 그런 기능들을 자주 볼 수 있습니다. 자, 실습! 일단 버튼을 하나 만들고 onclick 이벤트를 받으면 copyT.. 2022. 12. 6.
반응형으로 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.
반응형

티스토리툴바