WEB/HTML & CSS5 [CSS] 마우스오버할 때 형광펜 효과 주기 (highlight text when hover) 티스토리 메인을 보다 보면 하단에서 이런 걸 볼 수 있다. 문장 하나하나에 마우스를 가져가 보면 각 문장의 굵은 글씨에 마치 형광펜을 칠하는 것처럼 밑줄이 쫙! 만들기 쉬우면서도 깔끔하고, 눈에 잘 띄는 디자인이라 형태는 약간씩 달라도 메뉴나 제목에 hover 할 때 종종 응용해서 사용하곤 했다. See the Pen highlight text when hover by shynaunum (@shynaunum) on CodePen. 티스토리에서는 각 문장에 링크를 달아 클릭하면 다른 페이지로 이동하지만 링크는 딱히 달아줄 게 없으니깐 빼버리고, 귀퉁이의 숫자도 빼고 심플하게 재현해봤다. 각 문장에 마우스를 올려보면 흐릿했던 문장이 진해지면서 굵은 글자 부분에만 밑줄이 샥~ 티스토리에서는 굵은 글자 부분을 .. 2020. 11. 28. [CSS] backdrop-filter로 배경에 효과주기 라이브는 물론 재탕, 삼탕으로 예능이나 드라마를 볼 때 즐겨 이용하는 티빙. 그동안은 별생각 없이 이용하고는 했었는데 어느 날 문득 스크롤을 내리다 상단바가 눈에 띄었다. 상단에 고정된 gnb로 자체에 약간의 투명도가 있고, 스크롤을 살살 내려보면 이 밑으로 깔리는 이미지에 블러 처리가 되는 것을 볼 수 있다. filter: blur는 알고 있지만 그건 나 자신에게 블러 처리를 하는 것이기 때문에 속으로 '오!'를 외치며 F12를 눌러 마우스로 이 부분을 콕 집어보니 이른바 backdrop-filter라는 것! filter와 마찬가지로 blur, contrast, grayscale 등등의 효과를 줄 수 있는데 나 자신이 아닌, 말 그대로 backdrop(배경)에 효과를 줄 수 있는 기능이었다. See t.. 2020. 11. 18. [CSS] 육각형 만들기 (⭐️반응형) 한 페이지에 든, 든 무언가 여러 개를 나열해야 할 때 보통은 왼쪽처럼 가지런하게 나열하는 걸 선호하지만, 가끔은 꾸안꾸 하게 나열하는 일도 필요한 법. 마찬가지로 가지런하면서 색다른 게 없을까 하다가 오른쪽처럼 육각형으로 나열하는 방법을 찾았다. HEX 1 우선 wrapper로 사용할 큰 틀을 하나 만든 후 그 안에 필요한 개수만큼 육각형을 만들어준다. 로 만들어주고 그 안에 inner하나, 그리고 콘텐츠가 실제로 자리할 div를 또 만들어준다. 전체 육각형 개수는 상관없지만 난 홀수 줄에는 4개, 짝수 줄에는 3개씩 육각형이 들어가게끔 만들거라 일단 이런 육각형을 일곱 개 만들어주고 CSS. * { margin: 0; padding: 0; } .wrap { width: 80%; margin: 100p.. 2020. 11. 14. [CSS] safari에서 transition 오류가 날 때 해결 방법 핸드폰은 안드로이드이기에 safari를 전혀 사용하지 않고, 데스크탑은 Mac을 사용하지만 평소에는 크롬을 99.9% 이용하기에 블로그 스킨을 바꾸고서 safari에서 transition 때문에 오류가 나는 걸 모르고 있었다. 문제의 transition 오류는 바로 이 부분. 각 게시글에 마우스를 올리면 해당 썸네일의 이미지가 transform: scale(1.1);이 되는데 이미지를 부드럽게 커지게 하기 위해 transition: all .5s;를 적용했다. 한편 썸네일에는 border-radius: 50px 50px 0 50px;이 적용한 상태였는데 이렇게 마우스를 hover할 때마다 테두리의 border-radius가 잠깐 사라지는 것이다. 보통 이런 문제가 생겼을 때 가장 보편적인 해결 방법으로는.. 2020. 10. 18. HTML5 & CSS3 복습 시작! 이제 허송세월을 보낼 만큼 보냈으니 '생산적'까진 못 되더라도 나름의 의미 있는 시간을 보내기 위해 그간 배웠던 HTML5, CSS3 복습을 시작하며 발만 살짝 담그다 뺀 JavaScript(+jQuery)를 공부하고 최종적으로는 수업이 끝나며 흐지부지 된 포트폴리오를 한번 제대로 완성해보려 한다. 그렇다고 해서 무작정 교재 처음부터 따라가며 복습하려 한다면 마치 학창 시절 집합만 너덜한 수학의 정석처럼 될 것이 뻔하기에ㅋ 날 웹에 관심 가지게 해 준 '생활코딩'에서의 수업처럼 무언가를 만들어가면서 그에 필요한 스킬을 익혀나가는 것을 목표로 삼아 본다 :) 우선 첫번째 목표는 웹 수업을 들으며 1차 프로젝트로 만들었던 사이트 리뉴얼하기. 아직 서로서로 이름도 모르는 상태에서 다짜고짜 시작된 팀 프로젝트라.. 2020. 9. 25. 이전 1 다음
