분류 전체보기 (222) 썸네일형 리스트형 반응형 이미지 비율 유지하기 html css .image-wrapper { position: relative; width: 100%; height: 0; padding-bottom: 56.26%; overflow: hidden; } .image-wrapper .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 여기서 . image-wrapper의 padding-bottom의 값을 변경하여 원하는 비율로 맞추면 된다 2:1 : padding-top: 50% 1:2 : padding-top: 200% 4:3 : padding-top: 75% 16:9 : padding-top: 56.25% 어디선가 보고 적어놨었는데 출처를 모르겠다 ㅠㅠ 모바일에서 클릭시 연한 파란색 bg 없애기 https://gahyun-web-diary.tistory.com/77 [CSS]모바일에서 영역 클릭시 생시는 파란 박스 없애기 -- 모바일이나 웹에서 테두리가 생긴다면... 아웃라인만 없애주면 된다. input:focus{ outline:none; } 그런데 모바일에서는 하이라이트생기는 경우가 있다. IOS(아이폰,,아이패드 등..), Android 등의 웹킷 gahyun-web-diary.tistory.com swiper 옵션 정리 잘된 글 https://velog.io/@leejpsd/Swiper-%EC%98%B5%EC%85%98-%EC%A0%95%EB%A6%AC Swiper 옵션 정리 그동안 늘 캐러셀을 구현하기 위해 swiperjs 라이브러리를 사용했었다.다행히도 입사한 회사에서도 swiperjs를 쓰고 있기에 어렵지 않게 적용하였다.이참에 옵션들을 정리 해보려 한다.초기화 설정 velog.io 파워포인트 저장할 수 없는 글꼴 오류 (글꼴 한번에 바꾸기) 오류 내용 1. 다른사람이 작성한 ppt에 추가 작업을 할 때, 저장시 저장옵션에서 '파일의 글꼴 포함' 체크하고 저장할때 '프레젠테이션에 저장할 수 없는 글꼴이 있습니다' 라는 오류가 종종 뜬다. 2. ppt에 기본 내장되어 있는 '글꼴 바꾸기' 기능으로는 '더블바이트 글꼴을 싱글바이트 글꼴로 바꿀수 없다~' 의 오류가 뜬다. 해결방안 1. 작업한 파일을 다른이름으로 저장 해서 .xml 파일로 저장 2,. 메모장으로 .xml파일 열기 3. 메모장에서 ctrl + H (편집) 으로 글꼴 바꾸기 (바꿀내용 기재 후 모두바꾸기 클릭, 저장) - ex. 찾을내용 : Noto Sans KR (오류난 글꼴) / 바꿀 내용 : Pretendard (오류 안나는 글꼴) 4. 저장된 .xml파일을 파워포인트에서 열고 .. 스크롤바 위치 상하 반전시키기 change scroll bar position 이번에 처음으로 브라우저 기본 scrollbar 의 위치를 바꿔달라는 요청이 왔다. ( overflow-x:auto; 되어 있는 div 내에 큰 table이 있어서 스크롤바가 생기는 scroll table 형식이었는데, 스크롤바를 테이블 하단이 아니라 위에 나타나게 해달라고 함) 찾아보니 생각보다 스크롤바 위치 반전은 간단. css rotateX를 이용하면 된다. html I'm in Content and I'm very long css .Container { width: 200px; overflow-y: auto; } .Content { width: 300px; } .Flipped, .Flipped .Content { transform:rotateX(180deg); -ms-transform:rotate.. 나주 족발무한리필 / 보쌈무한리필 / 나주맛집 / 매일삶는족발국밥 매일삶는족발국밥 - 나주 농수산식품유통공사(at) 본사 바로 건너편. 주차장은 따로 없는듯. 도원주차빌딩에 주차 후 걸어가거나 뒤쪽 골목에 주차 (난이도 상...자리가 항상없음) 해야함 - 2024년 1월(아마도?) 에 오픈한 신상 식당 - 매일 11:00 ~ 22:00 영업. 브레이크타임, 휴무일 없음 - 족발+보쌈 무한리필 인당 12,900원. 가격대가 괜찮음 - 매장 넓음, 자리마다 t오더 태블릿이 있어서 주문하기 매우 편함. 리필도 메뉴에 있어서 눈치 안보고 리필 ㅎ - 지나가다가 1층에 화환이 쫙~~~~ 있는 곳이 있어서 눈길을 끌었었는데, 알고보니 그게 이 식당꺼였다. 사장님이 인싸? ㅎ - 족발은 시장족발 같은 느낌. 나는 시장족발 짱 좋아하는 편이라 좋았음. 약간 식은채로 나왔는데 껍질 부.. 나주 국밥맛집 / 나주소머리국밥 / 울아비소머리국밥 울아비소머리국밥 - 나주 우미린 아파트 근처. - 한국전력공사, 전력거래소와 가까움. 점심시간에 회사원들로 빼곡함. 조금 늦게가면 자리가 없을수도. - 일~월 09:00 - 20:00 영업(휴무일 없음), 14:30 - 16:30 브레이크타임, 예약 가능 (전화), 내부 넓음 - 몇년동안 뭔가 끌리지 않아 지나치기만 하다가 작년 말쯤 처음 갔는데 맛있었음! 요샌 한달에 2~3번은 가는듯. 광주에서 온 친구와 함께 간적 있는데 나주 맛집이라고 함. + 회사 동료들은 하얀집 나주곰탕보다 더 맛있다고 함. - 오래된 맛집 같은 느낌은 아니지만, 김치가 매우 맛있고 (특히 배추김치가 완전 묵은지. 베리굿) 국물도 뽀얗고 진하다. 맑은 국물 느낌의 나주 곰탕과는 차이가 확실히 있다. 고기도 매우 부드러운편! - .. CSS 방법론 BEM https://velog.io/@solmii/CSS방법론1-BEM-a.k.a작명소 CSS방법론1 - BEM (a.k.a작명소) Portfolio 사이트를 작업하는 동안 BEM을 지키면서 class명을 짓기로 했다! 그래서 정리하게 된 CSS 방법론 중 하나인 BEM! velog.io 퍼블리셔의 숙명인 classname 작명에 대한 규칙. 많이 들어는 봤지만 우리 회사에서 실제로 도입하진 않았다. 우린 형태_의미_순서_상태로 현재 네이밍 중이다. 외국 사이트 보면서 언더바가 두개 붙어있는게 무슨 의미지? 왜 저렇게쓰지 ? 왜 하이픈과 언더하이픈을 같이 혼용하지? 싶었는데, 이 글을 보니 어떤 의미인지 100% 이해 가능. gsap 공부 관련 링크 모음 안쓰는 곳이 없는 그 플러그인, gsap. 4~5년 전에 다니던 회사에서 홈페이지를 만들때 애니메이션 효과를 위해 gsap의 tweenmax를 써본적이 있다. 그런데 그 이후로 한번도 사용할 일이 없다보니 사용방법을 자연스럽게 까먹어버림. 몇년 사이에 사용 방법도 좀 달라진것 같고. gsap와 함께 사용되는 플러그인들도 되게 다양한데, 기본적인 gsap 사용방법과 가장 자주 쓰이는 스크롤트리거 관련된 공부를 해봐야겠다. gsap 라이센스 (무료) https://gsap.com/community/standard-license/ Standard License Plain English Summary: You may use the code at no charge in commercial or non-commer.. javascript 공부 관련 링크 모음 https://ko.javascript.info/javascript-specials 기본 문법 요약 ko.javascript.info 2016년도에 처음 js를 배울때 jquery로 배웠고, 때문에 아직까지도 습관적으로 모든 동적 이벤트는 jquery를 통해 처리중이다. 하지만 슬슬 javascript 자체를 잘 다뤄야 한다는 생각이 들어서... 지금까지 짜본 jquery 소스를 모두 vanila javascript로 바꿔보려고한다. 일단 문법 기본부터 다지기 위해서 찾은 간략한 요약본. https://velog.io/@kjwboa/%EC%9E%90%EC%A3%BC-%EC%93%B0%EB%8A%94-jQuery-javascript%EB%A1%9C-%EB%B0%94%EA%BE%B8%EA%B8%B0 자주 쓰.. 2024 UI/UX 웹디자인 트렌드 정리글 모음 '트렌드란 무엇이다' 에 대해서는 모두 의견이 다르겠지만, 어쨌든 각자의 의견이 정리된 몇가지 글을 읽어보았다. 디자인기법이나 유행 말고 퍼블리셔가 눈여겨 봐야할 부분 위주로. 1. 다가오는 2024년, 주목해야 하는 UI/UX 트렌드 https://udemy.wjtb.co.kr/newsletter/id/10000399 다가오는 2024년, 주목해야 하는 UI/UX 트렌드 빠르게 변화하는 UIUX 트렌드가 궁금하다면? UI UX 뜻과 차이, 최근 디자인 트렌드 그리고 디자이너를 위한 추천 강의까지 모두 소개해 드립니다. udemy.wjtb.co.kr - 다크/라이트모드 전환 옵션 - 마이크로 카피 - 챗봇 : 대화형 인터페이스를 통해 사용자와 상호작용 하는 인공지능 기반 서비스. 단순한 FAQ와는 다름... 2023 GDWEB Design Award 수상작을 보며 너무 많은 분야로 나눠 몇개씩 수상작을 뽑기 때문에 전부 살펴보진 못했지만, 현재 웹 동적 모션 트렌드는 확실히 알겠다. 1. 스크롤효과 2. 스크롤효과 3. 스크롤효과 기승전 스크롤 효과^^; 사용자의 흥미를 끌 수 있는, 지루하지 않은 홈페이지를 만들기 위해서 다양한 패럴렉스 효과가 적용되고 있다. 세로로 컨텐츠가 내려갔다가 가로로 움직였다가~ fadein이 되었다가 고정되었다가~ 물론 시스템 홈페이지나 금융권이라던지, 포털이라던지 이런 쪽에는 현실적으로 적용하기가 어렵지만 브랜딩 홈페이지나 랜딩 페이지 비스무리한 사이트들은 전~~~부 들어가 있다고 해도 과언이 아닐정도. 자사 홈페이지 만들면서 약간 해보긴 했는데... 프로젝트가 대부분 SI다 보니 언제 또 사용하게 될진 모르겠다. 하지만 그 언젠가.. 폰트가 로딩되기 전 화면을 숨기는 가장 간단한 방법 css body { visibility: hidden; } js document.fonts.ready.then(function () { // 폰트가 로드된 후 실행할 코드 document.body.style.visibility = 'visible'; }); 개발단에서 폰트 캐싱 처리 되도록 하는게 가장 좋지만 그게 안된다고 하면 (사실 안될리가 없다 모르는것일뿐) 이렇게 처리할 수도 있다. 모바일 기기 해상도 구하기 물리적 해상도와 화면 크기(인치)만 나와있을때, 논리적 해상도 구하는 방법 ( https://blog.naver.com/eirene100999/221652853751 참고) https://foodchain.tistory.com/153 여기 정확한! 정보 있음 1. ppi 구하기 PPI = \sqrt{{가로 픽셀 수^2 + 세로 픽셀 수^2}} / \text{화면 크기 (인치)}} (모르겠으면 챗gpt한테 물어보기. ex.'10.1인치 디바이스 해상도가 1920 x 1200 일때 ppi 구해줘' ) 2. 모바일 디바이스 Pixel ratio 공식에 따라 계산 devicePixelRatio = 해당 디바이스 PPI / 150 PPI (소수점자리가 길땐 반올림) 3. 물리적 픽셀에서 Device Pixel R.. jquery ui datepicker에 position 이슈가 있을때 datepicker가 modal popup안에 있고, 팝업 내에 스크롤이 있는 경우 datepicker 캘린더 위치가 이상해지는 이슈가 있었음. 검색해서 찾은 해결방법! https://aries.me/2020/08/03/jquery-ui-1-12-datepicker-wrong-position-issue-and-fix/ 1. 위치고정 함수 function setDatepickerPos(input, inst) { var rect = input.getBoundingClientRect(); // use 'setTimeout' to prevent effect overridden by other scripts setTimeout(function () { var scrollTop = $("body").scrollTo.. window가 아닌 div의 스크롤 끝 감지 이벤트 $(document).ready(function() { $('.content').scroll( function() { var elem = $('.content'); if ( elem[0].scrollHeight - elem.scrollTop() inputmode 모바일 가상키보드 레이아웃 설정 input이나 textarea에 지정하는 inputmode는 pc버전에서는 focus했을때 아무 차이가 없지만, 모바일에서 가상 키보드가 나올때 키보드의 기본 레이아웃을 지정해준다. https://umings.github.io/file/input_test.html Document umings.github.io 위 링크 모바일에서 접속해서 확인해보면 어떻게 다른지 한눈에 확인가능. 삼성키보드 기준 화면은 아래 이미지 참고 참고 : https://mong-blog.tistory.com/entry/html-더-나은-사용자-입력을-위한-inputmode-속성 html파일 include 해서 사용하기 수십페이지짜리 프로젝트를 할때, 공통된 영역 (ex. header, footer)을 html 파일마다 코드를 써두면 나중에 혹시라도 공통영역에서 수정사항이 나왔을 때 그 수십 페이지를 다 들어가서 일일히 수정을 해야 하는 불상사가 일어날 때가 있다. 그래서 로컬에서 퍼블리셔가 작업할 때 include 용으로 header, footer는 따로 빼두고 자바스크립트로 include 해서 사용하면 편리하다. php나 java의 include처럼 html파일에서도 다른 파일 include가 가능하다! 다만, 서버통신을 거쳐야 하기 때문에 로컬환경 (ex. .html파일을 열어서 바로 볼때)에서는 안되고, 웹서버 환경 (ex. vscode liver server로 파일 열었을 때)에서만 작동하는 소스다. 그래서 개.. hover 영역만 스포트라이트(?)같은 효과 Magical Hover Effect (w/ Tutorial) https://codepen.io/Hyperplexed/pen/MWQeYLW See the Pen Magical Hover Effect (w/ Tutorial) by Hyperplexed (@Hyperplexed) on CodePen. GSAP ScrollTrigger - Demo 회사 홈페이지 만들때 쓰긴 썼지만 어려운 ㅠㅠ scrolltrigger https://codepen.io/noeldelgado/pen/BaogqYy See the Pen GSAP ScrollTrigger - Demo by Noel Delgado (@noeldelgado) on CodePen. 이전 1 2 3 4 ··· 12 다음
