Lpla 개발 블로그

HTML&CSS

[CSS] IE에서 position: sticky 사용하기

1. position: sticky 소개 position: sticky는 평소에 static 속성을 유지하다가 스크롤이 부모 요소에 다다르면 fixed 속성으로 바뀌고, 부모 요소를 벗어나면 다시 static 속성으로 바뀌는 재미있는 CSS 속성이다. body { height: 400vh; } #parent { height: 100vh; position: relative; top: 100vh; border: 5px solid #EB514C; box-sizing: border-box; } #sticky { position: sticky; height: 200px; top: 0; background-color: #FFF4ED; } 2. 주의사항 단 sticky를 사용할 때 알아둬야 할 사항이 몇 가지 있다...

HTML&CSS

[CSS] Grid를 사용할 때 장점 하나

1. Grid를 사용하지 않을 때 어려운 레이아웃 웹퍼블리셔라면 grid를 사용할 줄 몰라도 한 번쯤 들어는 봤을 것이다. grid가 좋다고는 하는데 과연 어디에 좋은 것일까? grid를 왜 배워야하는지 의문이 드는 사람들을 위해 짧게 글을 쓴다. 디자이너의 시안에 따라 퍼블리싱을 할 때 다음과 같은 레이아웃이 있다고 하자. 시안 A 만약 이것을 코딩한다면 몇 가지 방법이 있겠지만 그중 아래처럼 코딩할 수 있다. See the Pen Gird Layout 없이 by lpla (@lpla) on CodePen. A, B, C, D는 모두 같은 box 클래스를 가지지만 우측에 있는 B, C, D는 wrapper 클래스로 한 번 더 감쌌다. A와 wrapper를 수평 정렬하기 위해서다. 따라서 부모 conta..

HTML&CSS

[CSS]마우스 오버시 글자 반전 효과

See the Pen Invert Text by lpla (@lpla) on CodePen. css의 mix-blend-mode 를 사용하여 반전 효과를 줄 수 있다. 익스플로러에서는 지원하지 않는다. 크로스 브라우징에 관한 자세한 내용은 여기서 확인할 수 있다. "mix-blend-mode" | Can I use... Support tables for HTML5, CSS3, etc Blending of HTML/SVG elements Allows blending between arbitrary SVG and HTML elements caniuse.com

HTML&CSS

[CSS] 16가지 버튼 애니메이션 효과

See the Pen Candy Color Button Animation by Yuhomyan (@yuhomyan) on CodePen. 웹사이트를 퍼블리싱할 경우 기획을 바탕으로 디자인한 시안을 그대로 따라서 제작하게 된다. 하지만 기획이나 시안 단계에서는 주로 레이아웃과 컨텐츠 배치에 신경 쓰고, 마우스오버시 어떻게 나타나달라, 클릭시 이런 효과가 있으면 좋겠다라는 요구는 잘 없다. (아예 없진 않다.) 그래서 퍼블리셔의 재량에 따라 버튼 같은 요소에 효과를 추가할 수 있는데 나는 가급적이면 사이트를 새로 제작할 때마다 조금씩 새로운 기능이나 효과를 사용하려고 노력한다. 다음에는 이 codepen에 있는 버튼을 사용해 볼 생각이다.

HTML&CSS

[CSS] 버튼 애니메이션 효과 (텍스트가 자연스럽게 나타나는 효과)

dfsdfdsSee the Pen Button Hover Effects by Aaron Iker (@aaroniker) on CodePen. 괜찮은 버튼효과를 찾았다. SCSS를 사용하면 텍스트 애니메이션을 쉽게 만들어 낼 수 있지만 컴파일하면 CSS에서도 사용하는데 무리 없다. 나는 배경색은 투명하게 하고, 테두리 색상이 변하도록 애니메이션 효과를 주고 싶어서 아래처럼 커스텀했다. See the Pen 버튼 오버 애니메이션(테두리, 텍스트) by lpla (@lpla) on CodePen.

HTML&CSS

[CSS] 크롬에서 이미지가 흐릴 때

크롬은 고질적인 이미지 랜더링 문제가 있다. 웹에 게시된 이미지 해상도가 원본 해상도와 일치한다면 문제없지만, 원본 해상도보다 확대 또는 축소되는 경우에 이미지가 눈에 띄게 흐려진다. 이것은 크롬 뿐만 아니라 다른 브라우저에서도 일어나는 현상이지만 유독 크롬에서 심하게 나타난다. 이 문제를 해결하기 위해 오랜 시간 찾아봤지만 아주 마음에 드는 해결책은 찾을 수 없었고 적정선에서 타협할만한 수준은 몇 가지 알 수 있었다. 1. image-rendering 이미지 랜더링 방식을 바꾼다. image-rendering: -webkit-optimize-contrast; 을 하게 되면 크롬, 사파리 등 브라우저에서 대비를 최적화하여 이미지 랜더링을 하는데 흐린 문제를 많이 해소해준다. 2. translateZ tr..

HTML&CSS

[SCSS] Live Sass Compiler 설정

vscode의 Live Sass Compiler를 사용하다보면 느끼는 두 가지 불편사항이 있다. 첫째는 불필요한 map 파일이 생성되고 css 파일 하단에 map 주석이 생성되는 점이다. 두번째는 컴파일된 css파일이 강제로 expanded 스타일로 생성되는 점이다. 다행히 설정에서 이 문제들을 해결할 수 있다. 먼저 vscode의 설정(ctrl + ,)에 들어간다. 그리고 Live Sass Compile를 검색하고 Settings: Generate Map을 settings.json에서 편집한다. 그러면 "liveSassCompile.settings.generateMap" 이 나타나는데 이 값을 false로 저장한다. 처음부터 false로 되어 있다면 그 상태 그대로 다시 저장한다. 그리고 map 파일을..

HTML&CSS

[CSS] 물결 버튼 효과

See the Pen 물결 버튼 by lpla (@lpla) on CodePen.

HTML&CSS

[CSS] 공전하는 애니메이션 효과 (transform: rotate)

기본세팅 HTML 1 2 3 4 5 SCSS .outer { width: 20rem; height: 20rem; position: relative; border: 2px solid #426190; border-radius: 50%; margin: 25% auto; } .satellite_wrap { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .satellite_box { position: absolute; top: -25%; left: -25%; width: 150%; height: 150%; animation: forwardRotate 8s linear infinite; text-align: center; line-height:..

HTML&CSS

[SCSS] @extend, @each, @mixin, @include

1. @extend 특정 선택자의 css 요소를 그대로 다른 선택자에 상속한다. 하지만 아래 컴파일된 css에서 확인할 수 있듯이 기존 요소에 더하여 만들어진다. css가 단순하다면 문제 없지만 복잡하고 depth가 많아질수록 어디에 생성될지 예상하기 어렵고 오류가 발생할 수 있어 사용을 자제하는 것이 좋다. SCSS .green_box { color: #fff; background-color: green; border: 4px solid #000; width: 300px; height: 300px; margin: 20px auto; } .box { @extend .green_box; background-color: blue; } Compile to CSS .green_box, .box { color: ..