본문 바로가기
반응형

IT102

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.
[slick] slick 슬라이드 row html 구조 순서대로 이미지1 -> 이미지2 -> 이미지3 ->이미지4 > 이미지A -> 운동시설B -> 이미지C ->이미지D 입니다. 이미지로 넣었으면 중간에 구간 식별이 더 쉬었을텐데 이미지대신 배경 핑크색을 넣어서 중간 구별이 안가는것 같아 글씨를 추가했습니다. slick slide 옵션 rows : 2 -> 세로로 2줄 slidePerRow:3 -> slidesToScroll 과 같은 옵션인것 같다. ( slidesToShow: 3, -> 보여지는 슬라이드 갯수 slidesToScroll: 3 -> 스크롤 넘겼을때 넘어가는 슬라이드 갯수 ) arrows -> 이전/다음버튼 추가 dots -> 페이징 버튼 infinite -> 슬라이드 갯수에 상관없이 무한반복 $(document).ready(fu.. 2020. 7. 17.
[slick] slick 슬라이드 - 기본(+이전,다음버튼) 이전다음 버튼은 slick 슬라이드에서 prevArrow , nextArroow 옵션을 추가하면 된다. $(document).ready(function(){ $('.responsive').slick({ dots: true, prevArrow: $('.prev'), nextArrow: $('.next'), infinite: false, speed: 300, slidesToShow: 3, slidesToScroll: 1 }); }); 맛집사진 갤러리 맛집 & 핫플이 필요하신 경우 연락주세요. 언제든지 환영합니다. slick 슬라이드 왼쪽은 파란색 배경 before 오른쪽을 슬라이드 입니다. 이전 다음 #container{width:1500px; margin:50px auto 0; } #container h2.. 2020. 7. 16.
[반응형] 반응형 컨텐츠 div 사이간격 #tab li 사이간격 , .tabcontent li 사이의 간격을 각각 padding:5px; , padding:15px; 로 주고 전체를 감싸고 있는 태그에 margin:0 -5px; margin:0 -15px; 를 하게되면 양끝 padding이 빠지고 가운데에 겹쳐지는 요소에 간격만 벌어지고 전체적인 width값은 동일하게 된다. 반응형. 전체 날씨 천둥 번개 햇빛 바람 폭우 우박 쨍쨍 기상청 2020년 7월 날씨 안내 - 기상청 날씨 예측 슈퍼컴퓨터 소나기를 동반한 천둥번개, 태풍상륙예정, 외출시 우산 필수입니다. 기상청 2020년 7월 날씨 안내 - 기상청 날씨 예측 슈퍼컴퓨터 소나기를 동반한 천둥번개, 태풍상륙예정, 외출시 우산 필수입니다. 기상청 2020년 7월 날씨 안내 - 기상청 날씨 예.. 2020. 7. 14.
반응형

티스토리툴바