본문 바로가기

WWWEB107

아이들과 다녀온 호크니 전시회 아이들을 데리고 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.
picture 태그와 figure 태그 차이점? 태그는 IE 미지원의 영향으로 그동안 존재도 잘 모를 정도로 잘 사용하지 않고 있었던 태그였으나, 이리저리 외국 사이트들을 둘러보다가 태그를 쓰고 있어서 공부(?)해 봄. 를 쓰려고 보니 가장 헷갈리는게 바로 언제 를 쓰고 언제 를 쓰는가였는데, 도대체 언제 써야하는지 잘 느껴지지가 않음. (나름 마크업에 진심~ ㅎㅎ) picture는 사진이고, figure는 그림인가 의문이 들어 구글 번역으로 돌려보았는데... figure도 그림이고, picture도 그림이었던... ㄷㄷㄷㄷ 어쨌든 이리저리 찾아보니 이미지가 그림이던, 사진이던 의미와 크게 상관없이 설명글과 함께 사용해야 하는 경우.. 즉 이 필요한 경우 를 사용하고, 반응형을 할 때 이미지 형식이나 품질을 여러 벌로 지원하는 경우 를 쓰면 됨. 태그.. 2023. 5. 8.
[css] 모서리 종이 말려지는 효과를 만들어봄. (쏘 이지~) 간단하지만 효과가 좋아보이는 종이 말리는 효과를 줘 보았음. 일단 아래에 결과물을 보면 굉장히 자연스러운 듯. ㅎㅎㅎㅎ 제작방법 ① 일단 이미지를 준비해야 함. 아래와 같이 커져있는 png 이미지 하나를 만듦. ② 만든 이미지를 position으로 띄우고, size를 0으로 줄여야 함. 본인은 transform: scale(0, 0); 으로 줄여놓았음. 이때! 이미지가 왼쪽 위에서 커져야하기 때문에 transform-origin: 0 0; 을 같이 줌. (만약 오른쪽에서 커져야 한다면, transform-origin: 100% 0; 으로 사용하면 되겠죵?) ③ 사이즈를 원래대로! transform: scale(1, 1); 으로 주면 끄읕~ (본인은 animation으로 효과를 만들어 봄) 코드 추천 포스.. 2023. 5. 8.
728x90
반응형

티스토리툴바