본문 바로가기

WWWEB109

[vscode] css파일에 나오는 단위 힌트 레이어 끄는 방법 vscode에서 css파일을 수정을 하는데, 은근히 저 숫자들을 바꾸는데 자꾸 힌트 레이어가 떠서 뭔가 불편함. 저건 하드코딩으로 바꾸는게 빠른데.... 그래서 저 기능을 꺼보려고 찾아봄~~ 봄~~ 봄~~ 혹시 익스텐션때문인가 싶어 이것저것 disabled 시켜보고, 설정에서 hint를 찾아보기도 했으나 실패 @ ㅁ @a;; (여... 영어가 짧다 ㅠㅠ) 결론은 ① 설정에서 suggest키워드를 검색. ② Suggest: Show Units 에 체크박스를 해제. 끝~ 2023. 6. 13.
[css] 텍스트 안에 그라데이션 배경 움직여보기 기획자에게 축하 메시지가 들어가는 이벤트 기획서가 도착함. 뭔가 경품도 주고 하는 이벤트인데, 그냥 글자만 "축하함"이라고 넣기가 허전해보여서, 뭐가 없을까 하다가... CSS에 background-clip: text; 속성을 이용해 텍스트 안에 그라데이션 애니를 주기로 함~ 일단 결과물은... 열심히 해보고나니 나름 느낌이 괜춘 괜춘~~ (레드써...ㄴ ) 아래 css를 하나씩 살펴보자~ CSS @keyframes moveGradientBg{ to{background-position: 300% 0;} } .item-text{ display: inline-block; position: relative; background: linear-gradient(90deg, #ff0 0%, #f86 20%, #ff.. 2023. 6. 8.
아이들과 다녀온 호크니 전시회 아이들을 데리고 DDP에서 하고 있는 데이비드 호크니 전시회를 다녀왔음. 데이비드 호크니는 앨런 존스와 함께 20세기를 대표하는 영국 출신의 팝아트 화가라고 함~ 데이비드 호크니 - 나무위키 이 저작물은 CC BY-NC-SA 2.0 KR에 따라 이용할 수 있습니다. (단, 라이선스가 명시된 일부 문서 및 삽화 제외) 기여하신 문서의 저작권은 각 기여자에게 있으며, 각 기여자는 기여하신 부분의 저작권 namu.wiki ChatGPT에도 물어봄. "데이비드 호크니에 대해 알려줘♡" 데이비드 호크니(David Hockney)는 영국의 화가, 사진작가, 그래픽 디자이너, 스테인드글라스 작가로 유명한 인물입니다. 그는 현대 예술의 중요한 인물 중 하나로 꼽히며, 다양한 장르와 매체에서 활동하였습니다. 호크니는 1.. 2023. 5. 26.
최근 네이버 CSS 초기화 코드 (mo/pc) 모바일 이벤트 페이지 작업을 하는데, 웹폰트를 좀 써보려고 하는데 기존에 사용하고 있는 font-family를 보니 모바일인데 맑은 고딕도 있고, 돋움도 있고... 넣어 놓은 것들이 마음에 들지 않음. 문득 네이버느님의 모바일 버전에 font는 어떻게 쓰일까 궁금해서 찾아봄~ 🧐 네이버 CSS초기화 코드 (mobile) body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul { margin: 0; padding: 0 } body,button,h1,h2,h3,h4,h5,input,select,table,textarea { font-family: -apple-system,Bli.. 2023. 5. 25.
네이버도 실수를 한다 언젠가부터 네이버앱ㅇ 추천/구독 메뉴 배경 컬러를 blue로 바뀌어있음. 앱 업데이트를 안해놓고 있어서 그런걸까... 눈이 아픔 ㅜㅜㅜ 앱 업데이트를 해야하나 고민하던 오늘, 쏙 고쳐짐~ ㅎㅎ;;; 업데이트도 해버렸! ㅋ 2023. 5. 23.
카뱅 모임 아지트 애니메이션 핸폰에 카카오뱅크 광고 알람이 떠서, 왜 알람이 켜져있지 하고 들어가봤다가 이쁜 컬러의 도형들이 막 변하는 애니메이션이 좀 괜찮아보여서 캡쳐캡쳐~ 저기 다각형의 꼭짓점이 모임통장에 모여있는 사람을 뜻한다라고 의도한 느낌...(뇌피셜 +▽ +ㅋㅋ) 두 명인 경우 하트로 표현한 것이 재밌게 느껴짐~ 카카오뱅크 모임통장 팝업 친구, 연인, 가족, 동호인을 초대합니다! event.kakaobank.com 근데, 당연히 SVG 애니겠거니 하고 보니 video였.. (안 봐도 비디오였어야 했는데...) 그래서 코드펜에서 비슷한 것을 찾아봄~~ 나중에 비슷하게 따라해봐야겠음. Square-Triangle-Circle--svg only animation The first three are just references .. 2023. 5. 23.
많이 커진 네이버가 어색할 때 예고한대로 네이버 PC 디자인이 1280 사이즈로 커졌음~ 두둥~ 화면이 커진만큼 폰트도 커지고, 구성 요소들도 커져서 시원해보이는 측면도 있지만, 한편으로 눈이 기존 사이즈에 적응되어 있어서 그런지 아니면 다른 메뉴들이 아직 개편 전이라 그런지 아직은 화면이 어색해보이고, 한 눈에 들어오지 않는 단점이 보이는 것 같음. 집에 있는 4K 모니터로 보면 좋은데, 아직 22인치 사무실 모니터에서는 너무 커보이고, 맥북에선 화면이 잘려서 스크롤이 생기는 불편함이.... ㅠ 이럴 때 쓰는 꿀팁이 있으니 그것은 CTRL+마우스휠로 화면을 줄여서 보는 것! =￣ω￣= 예쓰~예쓰~예쓰~ CTRL을 누른 상태에서 마우스휠은 내리거나, 또는 CTRL을 누른 상태에서 -키(마이너스키)를 누르면 보기 편안한 상태가 됨~ ㅎ.. 2023. 5. 18.
max-height를 이용한 부드럽게 열리는 더보기 유의사항이나 영역을 심플하게 보이기 위해 더보기 기능을 많이 사용하는데 그동안 애니메이션을 주지 않았거나, 혹은 애니메이션을 주려고 jquery의 animate기능을 사용하고 있었다면, 간단하게 css만으로 애니메이션 기능을 줄 수 있었으니~~ 그 비밀은 바로 css를 좀 만져본 사람은 누구나 아는... max-height (뭔가 약 파는 느낌... =_=a ) 근데 간단하긴 한데 코드는 좀 길어졌음 ㅋㅋ;; 코드 더보기 여기는 더보기 영역 리스트 1 여기는 더보기 영역 리스트 2 여기는 더보기 영역 리스트 3 여기는 더보기 영역 리스트 4 여기는 더보기 영역 리스트 5 2023. 5. 10.
새로운 네이버의 NEXT 메인 국내 웹 디자인 시장을 선도(...아마도?)하는 네이버 메인 디자인이 나왔다~ 어떤 부분이 변경되었나 살펴보니.... 1. 모바일과 연속된 사용자 경험 강화. (뉴스, 관심사, 쇼핑 등) 2. 작은창 위젯으로 열어 쓸 수 있는 '위젯 보드' 추가 (캘린더, 메모, 파파고, 영어사전, NOW 등) 3. '바로가기' 및 '알림/혜택' PC 메인 우측 상단 위치 4. 날씨, 증시 개별 보드로 한 눈에 확인 5. '글자 크기' 설정 기능 제공 6. 라이트/다크 모드 기기 설정값과 연동 7. 해상도가 2560 이상인 경우 3단 레이아웃 등 반응형디자인 제공 즉, 화면만 이쁘게 바뀐 것이 아니라 UX에 대해서도 신경을 많이 쓴 흔적이 보이는 것 같다. 새로운 모습의 네이버 PC 메인을 만나보세요. 3년 만에 개편되.. 2023. 5. 10.
728x90
반응형

티스토리툴바