반응형 javascript36 반응형 이미지 교체 기능, <img>를 <picture>로 감싸보자 얼마 전 포스팅에서, HTML 문서에 삽입한 이미지를 반응형으로 만드는 아주 간단한 팁을 살펴보았습니다. [실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷 [실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷 아주 간단하게 이미지 반응형으로 넣기 매년 연말 연시가 되면, 고객분들로부터 신년인사 팝업 게재 요청이 들어옵니다. 매년 반복되는 시즈널한 루틴업무죠. 인사말씀 분량이 많은 경우 팝업 kincoding.com 그런데 이처럼 1개의 이미지를 반응형으로 동작하게 하는 것이 아니라, 가로세로 비율이 다른 여러 개의 이미지를 그때 그때 반응형으로 맞처서 아예 교체를 해주려면 어떻게 해야 할까요? 이번 포스팅에서는 바로 이 점을 살펴보도록 해보겠습니다. 반응형 이미지를 교체하려면 태그를 사.. 2023. 1. 2. Javascript의 변수 선언: var, let, const는 서로 어떻게 다를까? var ? let ? const? 차이가 뭘까? 다른 사람들이 짜 놓은 자바스크립트 코드를 살펴보자면, 변수를 선언할 때 var를 쓰는 사람도 있고, let을 쓰는 사람도 있고, const를 쓰는 사람들도 있습니다. 물론 만들어진 목적에 맞게 잘 사용하는 사람도 있고, 습관처럼 그냥 사용하는 사람들도 있을 겁니다. 그래도 뭐 이참에 그 차이를 명확하게 잘 이해하고 적시적소에 잘 사용하는 게 바람직하겠죠? 선언, 할당 그리고 범위 우선 '변수(Variable)'이라는 것에는 선언, 할당, 범위라는 개념이 있습니다. var를 예로 들자면 var number; // 변수명만 써주면 '선언' number = 1 // 값을 넣어주면 '할당' var number = 1; // 선언과 동시에 할당하는 것도 가능. 나.. 2022. 12. 30. Bootstrap 기초 class 사용 + Javascript 조작하기 연습 이전 포스팅에서, 부트스트랩을 이용한 레이아웃 구성을 살펴봤습니다. container, row, column에 대해서 살펴봤습니다. 이번에는 약간 더 나아가서 이를 이용해서 간단한 레이아웃을 구성하는 연습을 해보려고 합니다. 그리고 이후에 Javascrip로 핸들링까지 해보려 합니다. Bootstrap 기초 class 사용 + Javascript 조작하기 연습 초보인 경우 이 포스팅을 진행하기 전에, 이전 내용을 먼저 확인하면 도움이 됩니다. 부트스트랩 Layout의 시작 - BreakPoints, Container, Grid 부트스트랩 Layout의 시작 - BreakPoints, Container, Grid Bootstrap은 그냥 예제 코드를 가져다 복붙해서 사용하는 아주 편리한 방식을 제공합니다... 2022. 12. 26. Javascript 완전 기초 - 자바스크립트는 무엇에 쓰는 물건인고? 우리집 아이들이 언제가 이 포스팅을 보게 되는 경우를 생각해서, 아주 기초적인 내용을 정리해 놓습니다.^^ 너무 기초적인 내용이니, Web에 익숙한 분들은 스킵하셔도 되는 내용들입니다. Javascript는 무얼 위해 만들어진 프로그래밍 언어일까? Javascript는 일단 Java 언어와는 전혀 다른 프로그래밍 언어입니다. 이건 아주 상식적인 내용이죠. 자바스크립트는 "웹 브라우저"를 위해서 만들어진 언어입니다. 초창기의 Web은 정적인(Static) HTML 페이지들로 이루어져 있었는데, 인터넷이 점점 발전하게 되면서 동적인 기능들이 필요해졌기 때문입니다. 그래서 때는 바야흐로 1995년, 브라우저 시장을 꽉 잡고 있던 Netscape 사의 '브랜든 아이크'라는 아저씨가 10일만에 천지창조를 하듯 만.. 2022. 12. 25. 이전 1 ··· 4 5 6 7 8 9 다음 반응형
