반응형 반응형4 [실무꿀팁] 반응형으로 백그라운드 이미지 넣기 1초컷 - Part 2 [실무꿀팁] 반응형으로 백그라운드 이미지 넣기 1초컷 - Part 2 초보시절 반응형 작업을 할 때, 글자들은 알아서 잘 흘러주기 때문에 비교적 다루기가 용이하지만, 이미지의 경우에는 떡하니 자리를 크게 차지하면서도 좀처럼 줄어들지 않아서 당황스러운 기억들이 납니다. 한달 전 즈음에, 웹문서에 이미지를 반응형으로 넣기 1초 컷이라는 주제로 포스팅을 했었습니다. 태그를 사용하면서 반응형으로 동작하도록 하는 아주 간단한 방법입니다. [실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷 [실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷 아주 간단하게 이미지 반응형으로 넣기 매년 연말 연시가 되면, 고객분들로부터 신년인사 팝업 게재 요청이 들어옵니다. 매년 반복되는 시즈널한 루틴업무죠. 인사말.. 2023. 2. 4. 반응형 이미지 교체 기능, <img>를 <picture>로 감싸보자 얼마 전 포스팅에서, HTML 문서에 삽입한 이미지를 반응형으로 만드는 아주 간단한 팁을 살펴보았습니다. [실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷 [실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷 아주 간단하게 이미지 반응형으로 넣기 매년 연말 연시가 되면, 고객분들로부터 신년인사 팝업 게재 요청이 들어옵니다. 매년 반복되는 시즈널한 루틴업무죠. 인사말씀 분량이 많은 경우 팝업 kincoding.com 그런데 이처럼 1개의 이미지를 반응형으로 동작하게 하는 것이 아니라, 가로세로 비율이 다른 여러 개의 이미지를 그때 그때 반응형으로 맞처서 아예 교체를 해주려면 어떻게 해야 할까요? 이번 포스팅에서는 바로 이 점을 살펴보도록 해보겠습니다. 반응형 이미지를 교체하려면 태그를 사.. 2023. 1. 2. 부트스트랩 Layout의 시작 - BreakPoints, Container, Grid Bootstrap은 그냥 예제 코드를 가져다 복붙해서 사용하는 아주 편리한 방식을 제공합니다. 그래서 보통은 Button과 같은 엘리먼트를 먼저 사용해보면서 작동방식을 익혀나가게 되는데요, 웹사이트를 만들면서 정말 정말 중요한 것은 바로 Layout을 잡아나가는 과정이 될 것입니다. 레이아웃을 잡지 않은 상태로 버튼만 가져다가 사용하거나 하진 않을테니까요. 그래서 이번에는 부트스트랩을 사용할 때 마다 매번 반복되는, 초기 세팅방식과 레이아웃에 대한 이해를 해두기로 합니다. 부트스트랩 Layout의 시작 부트스트랩의 표어는 Build fast, responsive sites. 즉 반응형 사이트들을 빠르게 만들수 있다! 라는 것입니다. 사실 부트스트랩이 얼마나 큰 편리함을 제공하는가에 대해서는, 이미 HTM.. 2022. 12. 24. 반응형으로 Youtube 영상 삽입하기(Responsible youtube Embed) youtube 영상을 웹 페이지 내에 '퍼가기'를 해보면 정작 사이즈가 정해져 있어서 모바일 반응형으로 동작하지 않습니다. Mobile이 대세인데, 뭔가 조금 불편하죠. 그래서 이번에는 유튜브 영상을 모바일 반응형으로 퍼가는 방법을 한번 정리해보겠습니다. 저도 까먹을 때 마다 참고하면서 HTML + CSS 코드를 작성하거든요. 유튜브에서 아무 영상을 하나 골라봤습니다. 조만간 개봉한다는 트레일러 영상입니다. (Imax로 보고 싶어요!!) 보통 블로그나, 카톡 등에서 공유할 때는 영상 하단의 [공유] 버튼을 누르고 팝업되는 창에서 [복사] 버튼을 누릅니다. 그러나, 잘 아시다시피 웹 페이지에 삽입(Embed)하기 위해서는 소스 코드를 복사해가야 합니다. 공유 창에서, 소스코드 아이콘을 표시되는 '퍼가기' .. 2022. 12. 5. 이전 1 다음 반응형
