코드공부방

CSS로 한줄, 여러줄 글 길어지면 말줄임("...") 표시하기 웹사이트 제작시 필수로 사용되는 말줄임표시, 보통 한줄 말줄임표시만 CSS에서 처리하고 그 외 여러줄 말줄임 표시는 개발자에게 맡기거나 하는편이다. 이 포스팅에서 CSS가지고 한줄, 여러줄 말줄임표시(CSS3)를 구현하는 방법과 CSS3속성이 지원되지 않는 하위 브라우저에서는 어떻게 대응해야하는지 알아보려고 한다. 먼저 아래와 같이 HTML과 CSS 코드를 작성한다. 쉽게 볼 수 있는 최신 글 목록 UI이다. 뉴스목록 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil in vero, deleniti fugiat laudantium maiores corrupti, dolor ea..

유튜브(Youtube) 영상 비율에 맞게 (반응형 사이즈)로 가져오기 (YouTube videos in responsive size) 웹페이지 또는 개인 블로그 내에 Youtube영상을 삽입해야하는 경우가 있다. Youtube에서는 자체적으로 동영상을 공유하는 기능을 제공하고 있다. 유튜브에서 제공하는 코드를 내 페이지에 붙여넣으면 iframe을 통해 내 페이지에서 유튜브 영상을 바로 볼 수 있다. 코드에 대해 잘 모르는 사람들에게는 정말 편리한 서비스를 제공한다고 볼 수 있다. 하지만 한가지 아쉬운점이 있다. 바로 iframe으로 태그 자체로 공유기능을 제공하다보니 최적화된 사이즈로 제공이 어렵고 특히 반응형웹에는 취약할 수 밖에 없다. 위 이미지를 보면 우선 작은 사이즈로 갈 경우에 높이가 고정이다보..

쿠키(cookie) 활용하여 오늘 하루 보지 않기 기능 구현하기 웹사이트 작업을 하다보면 항상 들어가는 기능이 있다. 바로 공지사항 등을 레이어팝업이나 페이지 최상단에 노출시키고 매번 노출시키면 사용자가 번거로울 수 있으니 하루동안은 해당 배너가 뜨지 않도록 해주는 "오늘 하루 보지 않기", "오늘 하루동안 안보기"로 불리우는 기능이다. 오늘 하루 보지 않기 기능이 들어간 사이트는 쉽게 찾아볼 수 있다. 이 기능을 구현하는 방법에는 여러가지가 있을 수 있을 것이라 생각된다. 이 글에서는 복잡하지 않고 정말 쉬운방법인 제이쿼리 쿠키(jQuery Cookie)를 가지고 기능을 구현해보려 한다. 사실 마땅한 기능명이 없으니 오늘 하루 보지 않기 기능이라고 하는거지 쿠키(cookie)를 가지고 여러가지 기능을 ..

역동적인 이미지 로드 (현대차 N Brand website) UI Clone 웹서핑을 하다가 현대차 N Brand 사이트를 발견하게 되었다. 메인페이지의 시작부터 꽤 역동적인 영상이 나와 시선을 끌기 충분했다. 한참을 넋 놓아 보다가 정신차리고 스크롤을 내렸다. 그러던 중 눈에 띄던 효과가 있었다. 바로 사진 노출 전 컬러풀한 박스가 이미지 영역을 스캔(?)한 뒤 동시에 이미지가 나타나는 하는 효과였다. 엄청난 효과는 아니지만 뭔가 다이내믹해 보이는게 사이트 컨셉과 딱 맞아떨어졌다. 아래 사이트 링크에서 확인할 수 있다. https://www.hyundai-n.com/ N Brand High Performance Cars | Hyundai N Welcome to Hyundai N's official wo..

무료 온라인 이미지 최적화 서비스 Optimizilla 웹 프로젝트를 진행할때 큰 리소스를 차지하는 것중 하나가 바로 이미지 파일들이다. 때문에 사용자에게 원활한 서비스 제공을 위해서는 많은 이미지 사용을 지양해야겠지만 프로모션 이미지나 배너 이미지 등 모든 비주얼적 요소까지 이미지 사용을 제한하는 것은 한계가 있다. 심미성과 사용성 두마리 토끼를 잡기 위해서는 사용될 이미지를 최적화 하는 방법이 있다. 보통 웹사이트 신규 작업 시 사용되는 이미지들은 디자이너나 퍼블리셔, 또는 프론트엔드 개발자들의 손을 거치면서 이미지 최적화작업을 거치게 되는데, 웹사이트가 운영으로 넘어가면서 이벤트, 배너, 콘텐츠에 들어가는 이미지등은 이미지 최적화 작업이 생략되는 경우가 많다. (사실 몰라서 못하는 경우도 많을 것이..

CSS 로딩UI 만들기 #1. 회전하는 원(Circle) 웹사이트에 자주 사용되는 로딩 UI 중, 무한으로 회전하는 원(Circle)을 사용하는 경우가 있다. 이때 돌아가는 원을 GIF이미지로 만들어 사용하는 경우도 있는데 그 경우에 background 처리가 깔끔하게 되지 않는다. 이때는 웹에서 background가 투명처리된 png이미지를 다운받거나 디자이너로부터 이미지를 받아 CSS로 돌리는 방법도 있지만 따로 디자이너의 손을 빌리지 않고 직접 만들어 쓸 수 있도록 CSS로 몇가지 로딩UI를 만들어보려고 한다. 첫번째는 아주 심플한 원을 무한으로 회전시키는 UI이다. (물론 디자이너 손을 거쳐나온 이미지가 더 이쁘겠지만..) 위와 같이 레이어를 띄워 dim 처리된 배경 가운데에 로딩하는 원을 돌려볼..

lozyload, 미디어 콘텐츠 지연로딩 시키기 (feat. jQuery Lazy) 웹사이트를 제작하게되면 자연스럽게 페이지내 수 많은 이미지 및 동영상등 미디어 콘텐츠를 사용되게 된다. 그러한 미디어 콘텐츠들은 눈으로 보기엔 좋지만 당연히 리소스를 많이 차지하게 되며, 이는 사이트의 성능에도 영향을 끼치고 나아가서는 사용자로 하여금 불편함을 주게된다. 사용자에게 중요하지 않은 (눈에 보이지 않는) 이미지를 먼저 로딩시키느라 사용에게 중요한 (눈에 보이는) 화면을 보여주지 못하고 있을 수 있다는 것이다. 아래 이미지를 보면 임의로 40개의 이미지 목록을 보여주는 페이지를 만들었는데 로드 시 이미지의 순서와 관계없이 뒤죽박죽 모든 이미지를 로드하느라 서버가 바쁜 것을 확인할 수 있다. (브라우저 개발자도구..

Vue.js To Do List 만들기 #4 컴포넌트 구현(3), 문제해결 컴포넌트 생성 및 등록(3) 컴포넌트 구현 > TodoFooter 이제 마지막 TodoFooter 컴포넌트 구현만 남겨두고있다. TodoFooter컴포넌트에서는 전체 목록을 삭제하는 버튼을 넣고 버튼을 클릭하면 clearTodo메소드를 실행한다. 전체삭제 /* /src/components/TodoFooter.vue > */ export default { methods: { clearTodo(){ localStorage.clear(); } } } 전체삭제 버튼을 누르면 localStorage의 모든 목록이 삭제된다. 화면의 할 일 목록은 새로고침을 해야만 삭제가 된다. TodoInput컴포넌트 에서 할 일을 추가했을때와 TodoFo..