CREATIVE

'Web Development/CSS' 카테고리의 글 목록

이매지네이션 라이브러리 CSS 이미지 스프라이트란 무엇일까? 이미지 스프라이트(image sprite) 웹사이트를 구경하다가 마음에 드는 이미지를 발견해서 살펴보면, 하나의 이미지에 여러개 이미지들이 포함되어 있는 것을 이미지 스프라이트라고 합니다. 하나의 이미지에 여러개의 이미지를 찾고 CSS로 해당 부분의 이미지만을 사용하는 것이죠. 이런 방식을 사용하는 이유는 웹 사이트의 로딩 시간을 줄이기 위해서입니다. 일반적인 블로그나 개인이 운영하는 블로그는 굳이 이미지 스프라이트를 할 필요는 없지만, 트래픽이 매우 많거나 많은 사람이 이용하는 검색포털과 같은 사이트에서는 이렇게 아이콘 형식의 이미지들은 이미지 스프라이트를 사용하여 서버요청을 줄이고 웹 페이지의 로딩 시간을 단축시켜줍니다. 이렇게 하면 로딩시간이 작아지면서 사이트의 품질이 높아지는 결과를 가져올 수 있..
이매지네이션 라이브러리 라이트모드 다크모드 토글 스위치 CSS(Dark Mode toggle switch) 디자인 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 ..
이매지네이션 라이브러리 Mac OS Dock CSS3 Mac OS Dock Menu with pure css3 and HTML? Possible? We have seen different types of menu in web applications. Different styles, different animations, different colors etc are used for menus. If you are familiar with Mac os, you must be knowing how the docker menu is. The Docker is the bar of icons that sits at the bottom of your screen. It provides easy access to some of the Apple applications o..
이매지네이션 라이브러리 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-transform: translateX(-50%) transl..
이매지네이션 라이브러리 [CSS] overflow 속성정리(hidden, auto, scroll) visible : 박스를 넘어가도 보여줍니다. hidden : 박스를 넘어간 부분은 보이지 않습니다. scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다. auto : 박스를 넘어가지 않으면 스크롤바가 나오지 않고, 박스를 넘어갈 때에는 스크롤바가 나옵니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 나의 경우에는 overflow 속성을 사용할 때, hidden, auto, scroll 를 주로 사용한다. 이외에는 잘 사용하지 않는다고 보면 되는데, overflow 속성 자체가 어떤 요소가 박스 밖으로 넘어갈 때의 처리방법을 선언하는 속성이다. 보통은 텍스트에 사용하기도 하지만, 종종 이미지나 다른 요소에도 적용해서 사용하는 경우가 있다...
이매지네이션 라이브러리 [CSS]IE(익스플로러)에서 말줄임 또는 -webkit-line-clamp 이슈 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 일반적으로 말줄임은 위와 같은 속성을 사용한다. 영어 그대로 white-space(공백)은 공백처리를 어떻게 처리하면 좋을지 적용해주는 속성이고, overflow는 글이 요소 밖으로 넘칠 경우 가려주는 속성이다. 그리고 text-overflow는 텍스트가 요소 밖으로 넘쳤을 때 ellipsis(생략 부호)로 줄여주는 속성이다. -webkit- 속성은 IE에서 사용하지 못한다. 크롬, 사파리 등에서만 적용이 된다나, 그래서 위의 속성을 IE에서 적용할 수 없다면 다른 방법을 찾아봤다. 바로 IE 주석처리 방법이다. 결과적으로 말하면, 생략 부호는 적용할 수 없었고 텍스트 부분의 높이값만 적용하..
이매지네이션 라이브러리 CSS SVG/CSS Loader 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) 이미지 키프레임 애니메이션 효과[CSS] - animista.net 짧게 정리하는 유용한 사이트, CSS 키프레임 속성을 통해서 이미지에 애니메이션 효과를 줄 수 있다. 마우스 오버를 할 경우 이미지를 확대하게 하거나 플립(뒤짚다)효과를 줄 수도 있고, 여러가지 효과들이 많이 있다. 사이트가 무거워지는 것이 싫어서 애니메이션 효과는 가급적 지양하는 편인데, 잘만 사용하면 굉장히 생동감 넘치는 사이트를 만들 수 있다. 정말 유용하며, 다양한 효과를 제공한다. 어디까지나 이미지 뿐만 아니라 텍스트에도 적용이 가능하고 어떻게 구성하느냐에 따라서 다양하게 활용할 수 있을 것이다. 예를 들면, 로고 같은 곳에다가 적용해도 참 예쁘게 적용이 가능할 것이라고 생각된다. 참조 CSS 애니메이션 사용하기 - CSS: C..
이매지네이션 라이브러리 [CSS] Font-Smoothing 안티앨리어싱 속성 Font-Smoothing 웹폰트를 적용할 때, Font-Smoothing 속성의 안티앨리어싱 속성을 적용하면 폰트가 더욱 부드럽게 보일 수 있다. 하지만, 반대로 이야기하면 선명함은 떨어질 수 있다는 얘기다. 따라서, 폰트를 선명하게 하고 싶다면 안티앨리어싱을 적용하는 것이 오히려 역효과일 수 있다. 힌팅이 떨어지는 폰트거나, 뭉개지는 폰트에 안티앨리어싱 효과를 적용하면 훨씬 부드럽고 포토샵으로 디자인 한 것처럼 적용된 글꼴을 적용할 수 있을 것이다. 다만, Font-Smoothing 속성 자체가 Webkit 기반의 Safari와 Chrome에서만 사용이 가능하기 때문에, 브라우징 호환 문제가 있을 수 있다. 속성 적용 방법은 아래와 같이 선언합니다. -webkit-font-smoothing: anti..
이매지네이션 라이브러리 CSS 선택자 :nth-child() 사용법 :nth-child( an+b ) :nth-child() 속성은 정말 유용하다. 웹사이트나 스킨을 디자인 할 때, 내가 원하는 요소에만 CSS를 편하게 적용할 수 있게 해준다. 여러가지 적용방법이 있지만, 그 중에서 가장 유용한 속성 중에 하나를 설명하고자 한다. :nth-child()와 :nth-last-child()는 특정 순서에 있는 요소를 선택할 때 사용하는 선택자 :nth-child()는 앞에서부터 세고, :nth-last-child()는 뒤에서부터 셀 수 있다. 이 중에서 :nth-child()로도 선택자로 충분히 자유롭게 활용할 수 있다. first나 last 사용법도 있지만, 여기서는 홀수와 배수 또는 특정요소를 의도하여 선택하고자 한다. :nth-child( 2n+1 ) 여기서 2는 n의..
이매지네이션 라이브러리 Border CSS 테두리 속성 반복 적용하는 방법 똑같은 텍스쳐를 border값에 부여하고 싶다면 어떻게 하면 될까, 배경이 아닌 두꺼운 선에 적용하면서 작은 이미지 텍스쳐가 반복해서 나오길 바란다면 border-image-repeat 태그를 적용하면 된다. 자세한 사용방법은 이곳에서 확인할 수 있다. 가장 간단한 사용방법으로는 정사각형을 기준으로 할 때, 모든 타일을 일정한 간격으로 채우는 속성값은 아래와 같다. border-image-repeat: round; 하지만, border의 가로와 세로값이 다를 경우에는 별도의 숫자를 지정해줘서 각각 가로와 세로에 적용될 타일의 갯수를 지정해줘야한다. 이 경우에는 round [n, n]값으로 속성을 지정할 수 있다. 만약 텍스쳐를 외부 이미지 소스로 불러와서 적용할 경우에는 border: url( ) n n..
이매지네이션 라이브러리 유튜브 모바일 반응형 CSS 적용방법 및 과정(Object) 이미지보다는 글로 설명해도 충분할 것 같고 각 사이트마다 적용방법이나 코드가 조금씩 다를 수 있으므로, 수시로 개발자도구를 활용해서 점차 수정해나갈 것을 권장합니다. 유튜브 웹소스를 가져와서 적용시키거나 HTML편집기를 통해서 유튜브 영상을 노출시키고자 할 때, PC버전에서는 정상적으로 작동하지만 모바일에서는 레이아웃이 깨지는 경우가 많습니다. 이를 통해서 컨테이너 또는 블럭(DIV)을 만들고 그 공간에 아래와 같은 소스를 적용시켜서 모바일 사이즈를 조절할 수 있었습니다. .video-container { text-align: center; position: relative; padding-bottom: 56.25%; padding-top: 300px; height: 0; overflow: hidden;..
이매지네이션 라이브러리 [CSS] 유령처럼 서서히 나타나는 텍스트 See the Pen Haunted Text by Fabrice Lejeune (@fabricelejeune) on CodePen. 유령처럼 나타나는 CSS, 한번 적용을 해보려다가 생각보다 대작업이 될 것 같아서 이렇게 페이지에만 적용을 시켜서 사용하는 것이 낫겠다. 주로 메인화면에 적용하면 좋을 것 같고 쉬운 코드로 분위기를 나타낼 수 있을 것 같다. 생각보다 사용방법은 단순해보이는데, 위의 assets에서 조금 복잡하게 적용이 되어 있어서 나의 사이트에서 적용을 하려면 코드를 약간 수정해서 사용해야겠다. 자바스크립트는 별도의 파일로 임폴트해서 적용을 시키는 것이 나을 것 같고, CSS의 경우 각 웹사이트별로 커스텀마이징을 해야할 것만 같다.
이매지네이션 라이브러리 [CSS] 밑줄 표시 이펙트 Underline hover effect See the Pen PooerOj by CreativeStudio (@creativestudiocss) on CodePen. background-image: linear-gradient(transparent calc(100% - 3px), #000 3px) background-repeat: no-repeat background-size: 0% 100% transition: background-size 0.8s color: #000 &.yellow background-image: linear-gradient(transparent 60%, #F8CD07 40%) &:hover background-size: 100% 100% 위와 같은 방식 또는 코드펜 방식으로 매우 쉽게 적용할 수 있는 밑줄 CSS 호버 ..
이매지네이션 라이브러리 [CSS] 배경이미지 위에 점 패턴 이미지 배경이미지 위에 점 패턴 이미지 제작방법 정리 배경이미지를 훨씬 세련되게 만들어주는 배경이미지 위에 점 패턴 이미지 커버를 씌우는 방법이다. 워드프레스를 할 때는 커버이미지에 기본적인 기능이 있어서 매우 쉽게 구현을 했는데, 티스토리내에서도 다른 배경이미지를 멋있게 표현하고 싶었는데, 관련 기능이 없었다. 있는게 오히려 이상하겠다 싶었다. 예전에 점 패턴과 더불어 다양한 패턴이미지를 저장하고 있었으나, 최근 컴퓨터를 포맷하면서 패턴이미지가 삭제되어 버렸다. 그래서 인터넷에서 관련 점 패턴을 찾아보았으나 찾지 못하고 직접 포토샵으로 픽셀작업을 했다. 점 패턴의 경우, 일부로 Opacity를 별도로 지정해주지 않으면 굉장히 이미지가 이상할 수 있으므로 픽셀 패턴이미지를 만들면서 함께 Opacity를 50% ..