hello skin 사이드바 크기가 이상할때
사건배경 hello skin 을 적용한지 두달 정도 되었습니다. 최근에 블로그를 아주 조금 바꾸기도 해서 UI부분이 잘 되는지 테스트를 해보고 있었어요. 그런데 사이드바 크기가 조금 이상했습니다. 딱 보기에도 비율이 맞지 않았어요. 문제해결 정말 해결해보려고 스킨 초기화하고 css , html 바뀐거 다 체크했는데도. 못고쳤었습니다. 근데 딱 갑자기 생각이 나더라구요. 크롬 브라우저가 100%가 아니였어요. 머리 한대 쎄게 때렸습니다.
인스타그램 like animation
인스타처럼 좋아요 표시를 좀더 인터랙티브하게 만들어주고 싶었다. 출처: https://velog.io/@dosilv/Instagram-Clone-Coding-Westagram-2 우선 해당 유튜브 자료를 참고해서 다음과 같은 기능을 만들 수 있었다. 근데 내가 원한 것이 아니였다. 그래서 다음 자료를 보고 공부를 해서 조금 수정했다. 참고자료 https://www.youtube.com/watch?v=BxTSljdJnHQ&t=12s https://www.youtube.com/watch?v=YszONjKpgg4
유용한 엑스 특수문자, 문자 사이트
❌✖️✘ ✖✕ https://techbot-youtube.tistory.com/entry/%EC%97%91%EC%8A%A4-%ED%8A%B9%EC%88%98%EB%AC%B8%EC%9E%90-%EC%9D%B4%EB%AA%A8%ED%8B%B0%EC%BD%98-%E2%9D%8C%E2%9C%96%EF%B8%8F%E2%9C%98-%E2%9C%96%E2%9C%95-%ED%85%8D%EC%8A%A4%ED%8A%B8%EB%8C%80%EC%B9%98%EB%AA%A8%EC%9D%8C 엑스 특수문자 이모티콘 ❌✖️✘ ✖✕ - 텍스트대치모음 ‘엑스 특수문자모음’ ❌✖️✘ ✖✕ 안녕하세요 테크봇입니다. 이번 포스팅에서는 엑스 특수문자 모음을 공유합니다. 엑스 특수문자는 클릭만 해도 간편하게 복사할 수 있습니다 techbot-y..
제이쿼리 모달 / 버튼 파란색 깜빡임
제이쿼리 모달 오픈소스 구해서 쓱 바꿨다. https://jquerymodal.com/ jQuery Modal This example demonstrates how visually customizable the modal is. This example shows how modals are centered automatically. It also demonstrates how a vertical scrollbar appears whenever the modal content overflows. More! Lorem ipsum dolor sit amet, consec jquerymodal.com https://min-ji07.tistory.com/entry/webkit-tap-highlight-color [..
flex layout
위와 같은 단순한 layout인데 생각보다 시간이 오래 걸렸다. flex-start로 주고 각 요일마다 min-width를 23%로 주어서 해결했다.
placeholder
resize : none 기본 style 제거 font 다시 설정해줘야하고, placeholder 부분에도 따로 font 설정을 해주어야한다. placeholder 줄바꿈 줄바꿈 위치에 [ ] 을 넣어주세요. 출처: https://hsol.tistory.com/901 [한솔닷컴] 제이쿼리 append 해당 태그 제일 뒤에 추가 근데 왜 모바일에서는 placeholder 줄바꿈이 안될까 진짜 후.. label for를 주면 텍스트를 클릭해도 radio button을 눌른 효과가 생긴다.
트랜지션
https://www.daleseo.com/css-transitions/ CSS 트랜지션(transition) Engineering Blog by Dale Seo www.daleseo.com transition ease ease-in ease-out ease-in-out https://chinsun9.github.io/2021/06/18/transition-timing-function/ transition ease ease-in ease-out ease-in-out 무슨 차이일까 style.css123.box { transition: all 0.2s ease;} 자연스러운 변화를 주기 위해서 사용하곤 했다 ease는 여러 가지가 있는데 어떤 차이일까? transition-timing-function 영상..
display 속성: inline, block, inline-block
https://www.daleseo.com/css-display-inline-block/ [CSS] display 속성: inline, block, inline-block Engineering Blog by Dale Seo www.daleseo.com
코드 리팩토링 , hierarchical selector vs combined selector
현재 메인 헤더에 h1을 직접 꾸미고 있는 상태이다. 하지만 h1 태그는 다른 곳에서도 사용이 되므로. 이것을 직접 꾸미는 것은 좋지못하다 그래서 big-heading class를 주어서 저 tag만 꾸밀 수 있도록 했다. 그리고 공통으로 보이는 부분은 이렇게 여러번 쓰지말고 하나로 바꿔주자. 이런식으로 말이다. hierarchical selector vs combined selector 이러한 html 구조가 있는데 이제 css를 보고 html이 어떠한 형태를 가질지를 맞춰보는 퀴즈 형태의 문제를 내보겠다.