본문 바로가기
반응형

전체 글137

css 화살표 효과 / arrow effect 1. 화살표 위아래로 움직이면서 하얀색으로 깜박이는 효과 scroll down See the Pen arrow by wao816 (@hy16) on CodePen. 2021. 1. 10.
css 글씨 효과 / 텍스트 효과 1. css 글씨 물결치는 효과 span태그에 delay 시간을 각각 조절한다 See the Pen NWRMMMy by wao816 (@hy16) on CodePen. animation 시간 조절로 작동되는 시간 조절할 수 있다 See the Pen vYXjrYZ by wao816 (@hy16) on CodePen. 2021. 1. 8.
vs code, visual studio 설치 및 확장기능 에디터 프로그램도 유행이 있는지 요즘 자주 보이는 프로그램이 visual studio code, 줄여서 vs code 라고 하는데 나도 한번 써봐야 할것 같아서 몇번 사용후에 간단한 후기처럼 남겨본다. 주로 사용하던 프로그램은 브라켓인데 생각보다 용량차지를 많이해서 에디터플러스하고 왔다갔다하면서 사용하다가 요즘은 vs code에 꽂혀서 자주쓰는데 javascript 코드를 보기엔 vs코드가 더 편한것 같다. 설치는 브라켓과 마찬가지고 엄청 간단. visual studio code 사이트에 들어가서 다운로드하고 설치해주면 끝. 설치를 마쳤으면 사용하기 편하게 해야할 확장프로그램 설치 작업. 제일 왼쪽 밑에있는 블록 모양아이콘 클릭하면 옆에 검색할수 있게 화면이 나온다. 여기서 필요한 기능 검색해서 설치하면.. 2021. 1. 7.
티스토리 codepen 올리는 방법 여태까지 color script, 티스토리 기본 에디터중에 html 두가지를 써봤는데 둘다 스크립트나 마우스오버 같은 효과는 실시간으로 어떻게 동작되는지 알수가 없어서 gif 파일로 올렸었는데 파일용량이 크면 제대로 올라가질 않아서 짤려있는 글들이 굉장히 많았었다. 그래서 찾고 찾다가 소스와 결과를 한번에 볼수있는 코드펜에서 소스를 가져와서 티스토리에 올릴수 있는 방법을 찾고 한번 해봤는데 다른 방법들보다 훠어얼씬 좋아서 앞으로도 종종 이렇게 올릴 것 같다. 조금 번거롭긴 한데... 그래도 한눈에 보기좋게 정리해둬야 나중에 내가 봐도 편할것 같기에 ㅠㅠ 먼저 codepen 사이트로 이동해줍니다. (크롬에서 들어가야합니다. 익스플로러는 코드펜안들어가져요) 1. codepen 사이트에서 sign up for.. 2020. 8. 1.
[slick] slick 슬라이드 배경 scale 효과 See the Pen WNrYbqv by wao816 (@hy16) on CodePen. codepen 0.25사이즈로 결과값 확인해주세요! gnb 메뉴는 글씨를 영문/한글 둘다 써서 높이값을 이용하여 마우스 hover했을 때 transformtransform:translateY(-85px); 가 작동하며 아래에 있던 한글 gnb 메뉴 글씨가 보이게 한다. slick 슬라이드는 처음 background-size를 100% 으로 주고 .active 됐을 때 100% 로 설정하면 점점 줄어드는 효과가 생긴다. (html에서 script는 마지막 태그 하단에 작성하였습니다.) 2020. 7. 30.
[slick] slick 슬라이드 (+progress bar) slick 슬라이드에서 slide-progress bar는 다음슬라이드로 넘어가기전까지 width:100%을 향해 간다. (위 움짤에서는 하단에 노란색으로 progress가 있는데 색조합을 잘못해서 잘안보인다ㅠ) var 변수로 sliderTimer 를 빼줘야하고, autoplaySpeed: sliderTimer 옵션을 따로 추가해야한다. 아침 식사 대응으로 구입했습니다. 아침에 식사 대용으로 구입하였습니다. 아침 식사 대응으로 구입했습니다. 아침에 식사 대용으로 구입하였습니다. 아침 식사 대응으로 구입했습니다. 아침에 식사 대용으로 구입하였습니다. 아침 식사 대응으로 구입했습니다. 아침에 식사 대용으로 구입하였습니다. 아침 식사 대응으로 구입했습니다. 아침에 식사 대용으로 구입하였습니다. 아침 식사 대응.. 2020. 7. 28.
[slick] slick 슬라이드 (div border + border) 분명 bxslide에서는 잘됐던거 같은데 왜 slick으로 하려니까 안됐던건지 ㅠㅠ 이미지가 아닌 div에 border가 들어가고 하단에 버튼같은 역할을 하는 div에도 border가 들어가는데 이렇게 되니까 가운에 선이 큰 div와도 겹치고 하단 파란 버튼div와도 겹쳐서 해결방법을 엄청 고민했었다.. slick 옵션 autoplay -> 자동 슬라이드 (speed: 300 -> 슬라이드 돼는 빠르기를 지정하려면 추가하는 옵션) $(document).ready(function(){ $('.multiple-items').slick({ infinite: true, slidesToShow: 4, slidesToScroll: 1, arrows: false, autoplay: true }); }); 123 12.. 2020. 7. 26.
MSI 노트북 RAM 8G 셀프추가 얼마전에 바꾼 노트북 msi 프레스티지 15 !! 벌써 6개월이 되어가는데 살때부터 16g로 업그레이드 해야지 생각해놓고 이제서야 램추가를 시도했다 내가 구매한 램은 삼성 DDR4 8GB PC4-21300 노트북용!!! 처음에 노트북용이 아닌걸로 잘못 주문했는데 노트북 뒤에 까보고 나서야 크기차이 나는거 보고 노트북용으로 교환했다. 거의 2배 차이나던 길이.. 새로산 노트북~! 아직 6개월 밖에 안돼서 새거같이 깨끗하다!! 내가 빨간색을 좋아하긴 하는데 전자기기에 빨간색은 좀 불호여서 MSI 메인컬러인 빨간색만 생각하고 있었는데 프레스티지15 모델보고 빨간색도 없고 디자인도 깔끔하고 스펙도 좋아서 구매하게됐다. 무게는 그램처럼 가벼운걸 생각하진 않았지만 그래도 생각보다 무거웠다. 우선 작은 드라이버로 뒷.. 2020. 7. 24.
회식으로 갔던 몽중헌 딤섬맛집 팀회식으로 갔던 몽중헌. 예전에 딘타이펑 명동점이 생기고 얼마 안됐을때 기대를 많이 하고 가서 그런지 엄청 실망했던 기억때문에 기대를 안하고 갔는데 생각보다 맛있었다. 나는 여기가 처음이였는데 다른분들은 몽중헌 , 크리스탈제이드중에 고르라고 하면 크리스탈제이드가 더 맛있었다고하니 다음엔 크리스탈제이드도 가봐야겠다. 샤오롱빠오, 마라샤오롱빠오, 쇼마이2개, 부추새우 이렇게 5판으로 시작~! ㅋㅋㅋ 요즘 진짜 마라가 유행이긴 한가보다 마라샤오롱빠오라니. 근데 생각보다 마라맛은 많이 안났다. 여기서 제일 맛있었던건 부추새우!! 마지막에 한판 더 시켜먹었었다. 샤오롱빠오는 입안에서 육즙터지면 혀 데니까 숟가락에 올려서 먼저 터트리고 먹는데 우동먹을때 국물떠먹는 숟가락은 안줘서 조금 불편했다. 가지튀김요리. 가지.. 2020. 7. 23.
반응형