CSS 이미지 스프라이트란 무엇일까? 2021. 7. 17. 이미지 스프라이트(image sprite) 웹사이트를 구경하다가 마음에 드는 이미지를 발견해서 살펴보면, 하나의 이미지에 여러 개 이미지들이 포함되어 있는 것을 이미지 스프라이트라고 합니다. 하나의 이미지에 여러 개의 이미지를 찾고 CSS로 해당 부분의 이미지만을 사용하는 것이죠. 이런 방식을 사용하는 이유는 웹 사이트의 로딩 시간을 줄이기 위해서입니다. 일반적인 블로그나 개인이 운영하는 블로그는 굳이 이미지 스프라이트를 할 필요는 없지만, 트래픽이 매우 많거나 많은 사람이 이용하는 검색포털과 같은 사이트에서는 이렇게 아이콘 형식의 이미지들은 이미지 스프라이트를 사용하여 서버 요청을 줄이고 웹 페이지의 로딩 시간을 단축시켜줍니다. 이렇게 하면 로딩시간이 작아지면서 사이트의 품질이 높아지는 결과를 가져올 ..

라이트 모드 다크 모드 토글스위치 CSS(Dark Mode toggle switch) 디자인 2021. 7. 17. 1) Switch Button See the Pen Switch Button by Hugo (@kapz) on CodePen. 2) Switch ButtonPure CSS Toggle Buttons | ON-OFF Switches See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by Himalaya Singh (@himalayasingh) on CodePen. 3)CodePen Home Pure CSS toggle buttons See the Pen Pure CSS toggle buttons by Mauricio Allende (@mallendeo) on CodePen. 4) Switch See the Pen Switch by Fabrice Lejeune ..

맥 OS Dock 구성(Mac OS Dock) 2021. 7. 17. 맥 OS Dock 구성(Mac OS Dock) 순수 CSS3와 HTML이 있는 MacOS Dock 메뉴가 가능할까요? 우리는 웹 애플리케이션에서 다양한 종류의 메뉴를 봐왔습니다. 메뉴에는 다양한 스타일, 다양한 애니메이션, 다양한 색상 등이 사용됩니다. MacOS에 익숙하다면 도커 메뉴가 어떤지 잘 알고 있을 것입니다. 도커는 화면 하단에 있는 아이콘 모음입니다. Mac에 있는 일부 Apple 애플리케이션에 쉽게 액세스 할 수 있습니다. 오늘은 CSS3로 Mac 스타일의 Dock Menu를 만드는 방법을 알아보겠습니다. MacOS Docker 메뉴와 비슷하게 생긴 메뉴는 CSS3와 HTML만 사용하는 메뉴입니다. 아시다시피 CSS3 속성은 아이콘에 애니메이션 효과와 반사 효과를 추가하는 데 도움이 될 것..

IE에서 object-fit 속성처럼 적용하는 방법 2021. 7. 17. IE에서 object-fit 속성처럼 적용하는 방법 IE에서는 object-fit 속성을 사용할 수 없다. 박스 내의 여백을 모두 채우면서 동일한 비율로 크기를 꽉 채우기 위해서는 여러 가지 방법을 사용할 수 있는데, 이미지(img) 속성의 경우에는 object-fit: cover;로 쉽게 적용할 수 있다. 하지만, IE에서는 사용할 수 없고 IE11부터는 주석처리가 불가능하기 때문에 웹킷 브라우저 등에서 사용이 가능한 object-fit: cover;와 같은 효과를 아래와 같은 방식으로 구현할 수 있다. -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-tra..

[CSS] overflow 속성 정리(hidden, auto, scroll) 2021. 7. 17. overflow 속성 정리(hidden, auto, scroll) visible : 박스를 넘어가도 보여줍니다. hidden : 박스를 넘어간 부분은 보이지 않습니다. scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다. auto : 박스를 넘어가지 않으면 스크롤바가 나오지 않고, 박스를 넘어갈 때에는 스크롤바가 나옵니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 나의 경우에는 overflow 속성을 사용할 때, hidden, auto, scroll를 주로 사용한다. 이외에는 잘 사용하지 않는다고 보면 되는데, overflow 속성 자체가 어떤 요소가 박스 밖으로 넘어갈 때의 처리방법을 선언하는 속성이다. 보통은 텍스트에 사용하기도 하지..

[CSS] IE(익스플로러)에서 말줄임 또는 -webkit-line-clamp 이슈 2021. 7. 17. white-space: nowrap; overflow: hidden; text-overflow: ellipsis; IE(익스플로러)에서 말줄임 또는 -webkit-line-clamp 이슈 일반적으로 말줄임은 위와 같은 속성을 사용한다. 영어 그대로 white-space(공백)은 공백 처리를 어떻게 처리하면 좋을지 적용해주는 속성이고, overflow는 글이 요소 밖으로 넘칠 경우 가려주는 속성이다. 그리고 text-overflow는 텍스트가 요소 밖으로 넘쳤을 때 ellipsis(생략 부호)로 줄여주는 속성이다. -webkit- 속성은 IE에서 사용하지 못한다. 크롬, 사파리 등에서만 적용이 된다나, 그래서 위의 속성을 IE에서 적용할 수 없다면 다른 방법을 찾아봤다. 바로 IE 주석처리 방법이다. 결과..

CSS SVG/CSS Loader 예제 2021. 7. 17. CSS SVG/CSS Loader SVG로 구현할 수 있는 CSS 로더, 티스토리 에디터에서는 적용한 HTML과 CSS 가 실시간 구현되지는 않지만, 콘텐츠에 적용할 수 있다는 것만으로도 매우 좋은 장점을 가지고 있다. 자주 사용하지는 않겠지만, 필요한 요소에 사이즈 정도를 조절하여 구현하면 굉장히 예쁘게 사용할 수 있을 것 같은 SVG 로더다. 딱히, 단점이라고 할 필요는 없지만 HTML 편집 상태에서 텍스트를 작성해야 하기 때문이, 일반적인 웹 에디터에서 글을 쓸 때와는 확실히 느낌이 다른 것 같다. 해당 로더의 제작자는 Loader SVG/CSS by Bidji (@Bidji)이며(This loader uses the changing colours to give the impression of ro..

[CSS] 이미지 애니메이션 효과 적용하기(Keyframe) 2021. 7. 17. 이미지 키프레임 애니메이션 효과[CSS] - animista.net 짧게 정리하는 유용한 사이트, CSS 키프레임 속성을 통해서 이미지에 애니메이션 효과를 줄 수 있다. 마우스 오버를 할 경우 이미지를 확대하게 하거나 플립(뒤집다) 효과를 줄 수도 있고, 여러 가지 효과들이 많이 있다. 사이트가 무거워지는 것이 싫어서 애니메이션 효과는 가급적 지양하는 편인데, 잘만 사용하면 굉장히 생동감 넘치는 사이트를 만들 수 있다. 정말 유용하며, 다양한 효과를 제공한다. 어디까지나 이미지 뿐만 아니라 텍스트에도 적용이 가능하고 어떻게 구성하느냐에 따라서 다양하게 활용할 수 있을 것이다. 예를 들면, 로고 같은 곳에다가 적용해도 참 예쁘게 적용이 가능할 것이라고 생각된다. 참조 CSS 애니메이션 사용하기 - CSS:..

[CSS] Font-Smoothing 안티앨리어싱 속성 2021. 7. 17. Font-Smoothing 웹폰트를 적용할 때, Font-Smoothing 속성의 안티앨리어싱 속성을 적용하면 폰트가 더욱 부드럽게 보일 수 있다. 하지만, 반대로 이야기하면 선명함은 떨어질 수 있다는 얘기다. 따라서, 폰트를 선명하게 하고 싶다면 안티앨리어싱을 적용하는 것이 오히려 역효과일 수 있다. 힌팅이 떨어지는 폰트거나, 뭉개지는 폰트에 안티앨리어싱 효과를 적용하면 훨씬 부드럽고 포토샵으로 디자인 한 것처럼 적용된 글꼴을 적용할 수 있을 것이다. 다만, Font-Smoothing 속성 자체가 Webkit 기반의 Safari와 Chrome에서만 사용이 가능하기 때문에, 브라우징 호환 문제가 있을 수 있다. 속성 적용 방법은 아래와 같이 선언합니다. -webkit-font-smoothing: anti..