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

[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

[CSS] 형광펜 효과

1. 가상 요소 선택자 (:before, :after) 가상 요소 선택자를 사용하여 형광펜 효과 내기 p {font-size: 26px; position: relative; display: inline-block;} span {position: relative; display: inline-block;} span:before {content:""; display:inline-block; width: 100%; height: 10px; display: inline-block; background: #FFD84B; position: absolute; bottom: 0; left: 0; z-index: -1;} 2. box-shadow p {font-size: 26px; position: relative; d..

etc

VSCode CSS, SCSS 코드 한줄로 정렬하는 플러그인

비주얼 스튜디오 코드(Visual Studio Code)는 사용자의 취향에 따라 다양한 플러그인을 설치할 수 있다. 오늘은 그 중에 CSS와 SCSS에서 사용할 수 있는 Formatter를 추천하려고 한다. Formatter란 코드를 더 깔끔하고 가시성과 가독성이 좋게 자동정렬해주는 기능으로 대표적으로 Beautify와 Prettier 등이 있다. 나도 두 플러그인을 모두 사용해봤지만 Prettier는 내 취향과는 다른 형태로 강제 적용되다 보니 Beautify를 선호한다. Beautify를 한동안 쓰면서 큰 불편함은 없었지만 몇 달전부터 내 코드 정렬 방식에 변화가 생기면서 문제가 생겼다. .main_news_section .main_news_container { max-width: 1280px; ma..

HTML&CSS

[CSS] 3D 카드 효과(transform, perspective)

사이트를 제작하면서 한 가지 난관에 부딪혔다. 첫번째 움짤과 같이 트랜스폼(Transform)으로 3D 카드 효과를 만들려고 했다. 하지만 두번째 움짤처럼 3D 효과가 적용되지 않고 평면적으로 카드가 넘어가버렸다. 여기에 적용된 코드는 아래와 같다. FAKER FAKER SANGHYEOK LEE - 미드MAY 7, 1996 - SOUTH KOREA 자기소개 FAKER IS ONE OF JUST TWO PLAYERS, ALONG WITH HIS FORMER TEAMMATE BENGI, TO HAVE WON THE LEAGUE OF LEGENDS WORLD CHAMPIONSHIP THREE TIMES. body { background-color: #000; margin-top: 100px; } .team_p..