'분류 전체보기' 카테고리의 글 목록 (2 Page)

[CSS] 이미지를 컨테이너에 맞게 사이즈 통일하는 방법 (object-fit, background ..)

Coding 2023. 7. 12. 19:28

Intro 보여주고 싶은 이미지 사이즈는 정해져 있는데, 올라오는 이미지 사이즈는 제각각인 경우가 많습니다. 사용해 본 이미지 정렬방법을 정리해 봤습니다. 1. background-size 사용 제 기준에서 제일 간단한 방법입니다. 꼭 img 태그를 사용해야 하는 경우가 아니라면, 여러 브라우저 대응에도 문제없이 사용가능한 방법입니다. 이미지는 비율을 유지하고 컨테이너에 맞게 이미지를 꽉채운 후 넘치는 부분은 잘라냅니다. 넘치는 이미지의 상하좌우를 균일하게 잘라내고 이미지의 가운데 부분만 보이게 하고싶다면, background-position: center center; 위 속성을 꼭 넣어야합니다. 2. image에 position: absolute 사용 bootstrap에서 ratio helper와 ..

[CSS, JS] 꽃이 흔들거리는 효과 구현하기

Coding 2023. 5. 19. 11:21

꽃이 바람에 흔들거리는 애니메이션을 CSS 버전과 JS 버전으로 각각 구현해 비교해보려고 합니다. 먼저 꽃 이미지를 불러옵니다. - CSS Ver. img.flower { transform-origin: center bottom; // rotate 기준을 bottom 으로 } transform-origin은 transform 속성을 사용할 때 사용한다. 초기값은 center로 transform-origin: 50% 50%;이다. transform을 사용할 요소의 기준점을 정한다. 꽃이 흔들거리는 걸 표현하려면 X는 center(50%) Y는 bottom (100%) 이어야 원하는 모양으로 나온다. | 참고 자료 | transform-origin - CSS: Cascading..

[CSS] Hover 하는 형제들(siblings) 스타일 적용

Coding 2023. 5. 12. 17:36

마우스 오버 하는 대상 형제들한테 스타일주기 일반적으로 형제 엘리먼트에 스타일을 주려면 Javascript가 필요합니다. 하지만, Javascript없이 CSS를 사용하는 방법이 있습니다. 부모 엘리먼트의 :hover를 기준으로 아래 마우스 오버하는 자식을 제외한 형제 엘리먼트들에 스타일을 주는 방식입니다. 마우스 오버하고 있는 대상을 강조하고 싶을 때 사용합니다. .parent:hover .child:not(:hover) { /* this style affects all the children except the one you're hovering over */ } + 예제 코드 HTML 삽입 미리보기할 수 없는 소스

[Javascript] 카운트다운 만들기

Coding 2023. 2. 15. 17:48

이벤트 페이지를 만들경우, 어떤 날짜를 기준으로 카운트다운 하는 UI를 사용할때가 많다. flip으로 넘어가는것도 아니고 단순하게 카운트 숫자만 바뀌는건데 제이쿼리 플러그인이나 라이브러리를 불러오는것도 불필요해보여서 간단하게 사용할 수 있도록 코드를 남겨본다. var countDateGetTime = new Date(2023, 4, 9, 24, 0, 0).getTime(); // 년, 월-1, 일, 시, 분, 초 var countEl = document.querySelector(".countdown-text"); var countInterval = setInterval(function() { var now = new Date().getTime(); var distance = countDateGetTime..

[CSS] 동영상 반응형 사이트에 추가하기

Coding 2022. 11. 10. 16:22

사이트에 동영상을 넣을 때 width값을 넣지 않으면 동영상 사이즈에 맞춰 노출되기 때문에 보통 width 값을 기본으로 넣어주게 됩니다. 하지만 width값을 고정으로 넣어주게 되면 반응형 웹의 경우 모바일이나 태블릿에서 동영상이 옆으로 넘쳐버리는 현상이 나타납니다. 그래서 반응형 웹은 동영상의 넓이와 높이값을 비율대로 늘어나도록 수정해야 합니다. 간단하게 html과 css로 수정할 수 있습니다. Your browser does not support the video tag. padding-bottom: 56.25%; 이 부분을 수정하면 비디오 비율 수정이 가능합니다. 56.25% 는 16:9 비율입니다. HTML 삽입 미리보기할 수 없는 소스 video 태그에 video라는 클래스를 추가해줬기 때문에..

[JS] Swiper.js 이미지 슬라이드 스크립트 사용법 (+반응형)

Coding 2022. 11. 4. 16:58

1. Get Started! Swiper.js 프로젝트에 다운로드하기 swiper.js를 프로젝트에 받는 방법은 여러 가지가 있습니다. 각자 프로젝트 언어나 방식에 맞게 받아주면 됩니다. NPM으로 받는 방법 $ npm install swiper 인스톨은 간단합니다. // import Swiper JS import Swiper from 'swiper'; // import Swiper styles import 'swiper/css'; 인스톨 후 기본 import 코드입니다. 프로젝트에 필요한 컴포넌트들만 골라서 import 해올 수도 있습니다. 저는 전체를 받아서 쓰는 게 마음이 편해서 따로 받진 않습니다. 필요하신 분들은 Swiper.js Get Started 페이지에서 확인할 수 있습니다. CDN 주소..

[HTML] 이미지맵 쉽게 만들기 (+JS+모바일에 적용하기)

Coding 2022. 11. 1. 17:48

이미지맵을 왜 쓰지?웹사이트에서 글을 쓰거나 이벤트성 페이지를 만들 때, 이미지 전체에 링크를 걸어도 되지만 이미지 안에 특정 영역에 여러 개의 링크를 걸고 싶을 때가 있습니다.그럼 이미지를 잘라서 따로 링크를 걸어야 할지 이미지를 다시 만들어야 할지 고민이 많아집니다. 이럴 때 사용하기 좋은 html 태그가 map 태그입니다. <p data-ke-size="size16..

안드로이드 웹뷰에서 엘리먼트 스크롤바가 보이지 않는 현상

Coding 2022. 4. 14. 09:47

Android Webview app scrollbar is not showing in div element 웹 화면 그대로 앱으로 만든 프로젝트 중에 레이어 팝업(모달) 같은 창을 띄웠을 때 스크롤은 잘 됐지만 스크롤바가 보이지 않는 이슈가 있었습니다. 이유는 알 수 없지만 다른 웹뷰 앱들도 마찬가지였습니다. 구글 검색 결과 아래 css로 웹킷 스크롤바 디자인을 바꾸면서 적용됐습니다. ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { // 없어도됨 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); -webkit-border-radius: 10px; border-radius: 10px; } ::-web..

ABOUT ME

Genie of the Lamp 😶‍🌫️ Genie of the Lamp 😶‍🌫️

티스토리툴바