WEB10 border-radius를 자유자재로 조절해보자! Fancy Border Radius Generator 지금은 한풀 꺾였지만... 티스토리를 막 시작해 메인에서 이것저것 바꾸기 재미 들렸을 때, 네모 반듯한 썸네일을 바꿔보려 이리저리 궁리하다가 한 사이트를 알게 되었다. Fancy Border Radius Generator Generator to build organic shapes with CSS3 border-radius 9elements.github.io 바로 Fancy Border Radius Generator! 이름 그대로 border-radius를 아주 fancy 하게 만들어주는 곳이다. 보통 border-radius를 줄 땐 /*원형*/ border-radius: 50%; /*네 모서리 모두 같게*/ border-radius: 30px; /*오른쪽 아래 하나만*/ border-radius: 0.. 2020. 12. 7. [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. [jQuery] placeholder에 오늘 날짜, 현재 시각 넣기 학원에 다니면서 HTML과 CSS를 배운지 약 한 달이 됐을 무렵, 첫번째 과제로 다른 친구와 둘이 사이트를 만든 적이 있었다. 주제를 선정하다가 콘텐츠가 풍부한 여행 예약 사이트(예를 들면 트립닷컴이나 마이 리얼 트립 같은)를 주제로 정해 구현했었는데 요즘 공부한 내용 복습 겸 그걸 조금 더 개선해서 다시 만들어보고 있다. 여행 사이트의 핵심이라 하면 아무래도 메인 상단에 있는 이 검색창이라 할 수 있는데 지난번에 검색해서 찾은 jQuery를 사용한 탭메뉴 덕분에 탭 안에 탭을 넣는 부분까지는 쉽게 구현할 수 있었다. [jQuery] 한 페이지에 탭메뉴 여러개 넣기 처음 만들었던 사이트를 포트폴리오에 사용하기 위해 다시 만들고 있는데 메인 페이지에서 사용하는 3개의 탭 메뉴를 CSS에서 jQuery로 .. 2020. 10. 19. [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. [jQuery] 한 페이지에 탭메뉴 여러개 넣기 처음 만들었던 사이트를 포트폴리오에 사용하기 위해 다시 만들고 있는데 메인 페이지에서 사용하는 3개의 탭 메뉴를 CSS에서 jQuery로 바꾸면서 스스로의 숙제가 생겨났다. CSS로 구현할 수 있는 것은 CSS로 구현하는 것이 좋다고 들었기에 모달로 띄우는 로그인, 회원가입의 경우 그대로 CSS를 이용했지만 탭 메뉴도 이전처럼 CSS로 쓰기에는 코드가 너무 장황해진다! 당시 이 사이트를 만들 땐 아직 jQuery를 배우기 전이라 인접 형제 선택자를 사용해서 display: none;, display: block;을 했지만 각각 메뉴가 5개, 8개, 8개인 탭 메뉴를 이제 와서 CSS로 하기엔 CSS가 너무 더럽... 그래서 검색하다가 처음 사용했던 제이쿼리 탭 메뉴 코드는 바로 이것! 38 한 메뉴를 클.. 2020. 10. 4. 색 이름을 알려주는 컬러 사이트 - Colblindor, Html Css Color, ColorHexa 사이트를 만들면서 브랜딩을 같이 하다보니 작업 시작 단계에서 꼭 해야하는 일 중 하나는 바로 컬러 선정. 어떤 컬러를 메인으로 해서 서브는 뭘 넣고, 포인트는 이걸로 하고 글씨는 또 저걸로 하고... 이렇게 고심해서 고른 컬러에 대해 설명할 때 색상명이 그럴싸하면 내가 왜 이 콘셉트에 굳이 이 컬러를 골랐는지 종종 설명이 되기도 하고, 남들이 이 색상을 보지 않고 이름만 들었을 때에도 어떤 색인지 대충 유추할 수 있게 된다. 한복을 할 때에는 때때로 담황색이나 북청색 등의 고풍스런 느낌 팍팍 나는 단어를 사용하곤 했는데 웹사이트를 만들고 마지막에 ppt작업을 하다보니 좀 더 글로벌한 단어의 필요성을 느꼈다. 그래서 찾은 색상명을 알려주는 사이트 세 곳~ 먼저 왼쪽 색상표에서 마우스로 클릭하거나, 오른쪽에.. 2020. 9. 26. HTML5 & CSS3 복습 시작! 이제 허송세월을 보낼 만큼 보냈으니 '생산적'까진 못 되더라도 나름의 의미 있는 시간을 보내기 위해 그간 배웠던 HTML5, CSS3 복습을 시작하며 발만 살짝 담그다 뺀 JavaScript(+jQuery)를 공부하고 최종적으로는 수업이 끝나며 흐지부지 된 포트폴리오를 한번 제대로 완성해보려 한다. 그렇다고 해서 무작정 교재 처음부터 따라가며 복습하려 한다면 마치 학창 시절 집합만 너덜한 수학의 정석처럼 될 것이 뻔하기에ㅋ 날 웹에 관심 가지게 해 준 '생활코딩'에서의 수업처럼 무언가를 만들어가면서 그에 필요한 스킬을 익혀나가는 것을 목표로 삼아 본다 :) 우선 첫번째 목표는 웹 수업을 들으며 1차 프로젝트로 만들었던 사이트 리뉴얼하기. 아직 서로서로 이름도 모르는 상태에서 다짜고짜 시작된 팀 프로젝트라.. 2020. 9. 25. 이전 1 2 다음
