나의 코딩 기록

코딩을 기록하는 공간

코딩 기록/Sass [SCSS]

Sass[SCSS] 기초 6 - 다중 변수 선언, 내장 함수(multiple variable, map-get) 를 알아보도록 할게요. 변수를 선언할때도 한가지 값이 아닌 배열이나 객체와 같이 여러개의 값을 하나의 변수에 지정해줄 수 있습니다. 사용방법은 아래와 같은데 어렵지 않습니다. /* 다중 변수 선언 */ $color: ( red: rgb(241, 72, 72), blue: rgb(49, 102, 247), skin: antiquewhite ); /* map-get(변수명, 변수키값) */ .sub-title { background-color: map-get($color, skin); color: map-get($color, red); } .description { background-color: ..

2023. 2. 12.

코딩 기록/자바스크립트

See the Pen 객체 데이터를 이용한 HTML 태그 추가 by kimyangsun (@kimyangsun) on CodePen. [자바스크립트] 객체 데이터를 이용한 HTML 엘리먼트 추가 코드펜 예제입니다. // 운행팀에 강제로 해당 직원들이 추가되어야함 let members = [ // 보통 실무에서 이러한 데이터들은 json이나 xml로 분기되거나 백엔드에서 API로 가져옴 {name: "김팀장", position: "팀장", number: "043-740-3266", work: "차량운행, 차량관리"}, {name: "정부팀", position: "부팀장", number: "043-740-3266", work: "관용차량운행"}, {name: "김직원", position: "직원", numb..

2023. 1. 28.

카테고리 없음

See the Pen slick slide 재생 정지 게이지바 + 다중 슬라이드 연결 예제 (커스텀) by kimyangsun (@kimyangsun) on CodePen. slick slide 재생, 정지 게이지바 + 다중 슬라이드 연결 코드펜 커스텀 예제입니다. 홍성 메인을 작업하면서 들어간 슬라이드인데 소스를 저장해두면 도움이 될거같아서 코드펜에 저장해둔 코드입니다. 재생 정지에 게이지바(프로그레스바) 가 존재하는 슬라이드입니다. // 메인 문화관광 콘텐츠 슬라이드 $(function () { var bgSlide = $('.tour-wrap .tour-bg-slide'); var tourSlide = $('.tour-wrap .tour-slide'); var time = 2; var bar = $..

2023. 1. 25.

카테고리 없음

See the Pen Slick arrow 커스텀 (내부 텍스트 변경) by kimyangsun (@kimyangsun) on CodePen. Slick arrow 버튼 텍스트 커스텀 (이동버튼 내부 텍스트 변경) 코드펜 커스텀 예제입니다. html 에서 data-slide-name 요소를 각각 넣어주고 자바스크립트에서 on init 과 on afterChange 에서 데이터들을 이용해 넣어주는 방식을 사용합니다. 아래는 스크립트 코드입니다. :) $('.slide__items').on('init afterChange', function(e, slick){ let currentSlick = $('.slick-current.slick-active', slick.$slideTrack); let prevNam..

2023. 1. 25.

코딩 기록/코딩 소스 [HTML & CSS & JS]

See the Pen slick 슬라이드 / centerMode 예제 v2 by kimyangsun (@kimyangsun) on CodePen. 예전에 ovio 사이트를 만들어보면서 slick slide centerMode 관련해서 남겨둔 코드를 발견해서 올립니다 ㅎㅎ

2023. 1. 25.

코딩 기록/코딩 소스 [HTML & CSS & JS]

See the Pen Slick 슬라이드 페이지 버튼을 해당 이미지 사진으로 (slick customPaging images) by kimyangsun (@kimyangsun) on CodePen. Slick 슬라이드 페이지 버튼을 해당 이미지 사진으로 적용한 코드펜 예제입니다. (slick customPaging images) customPaging 을 통해 커스텀 하였습니다. 아래는 js 코드입니다 :) $('.slider').slick({ dots:true, prevArrow: '', nextArrow: '', customPaging: function(slick, index) { var targetImage = slick.$slides.eq(index).find('img').attr('src'); ..

2023. 1. 25.

코딩 기록/코딩 소스 [HTML & CSS & JS]

See the Pen slisk 슬라이드 세로 네비게이션 (Slick Slider Vertical asNavFor) by kimyangsun (@kimyangsun) on CodePen. slisk 슬라이드 세로 네비게이션 (Slick Slider Vertical asNavFor) 코드펜 예제 코드입니다. 아래는 js 코드입니다. $('.slider-main').slick({ slidesToShow: 1, arrows: false, asNavFor: '.slider-nav', vertical: true, autoplay: true, verticalSwiping: true, centerMode: true }); $('.slider-nav').slick({ slidesToShow: 4, asNavFor: '..

2023. 1. 25.

코딩 기록/코딩 소스 [HTML & CSS & JS]

See the Pen Slick Slide 슬라이드 페이지 표시 by kimyangsun (@kimyangsun) on CodePen. Slick Slide 슬라이드 페이지가 표시되는 기능커스텀 코드펜 코드입니다.아래는 js 코드입니다. :)/* 슬라이드가 넘어간 후에 페이지 카운팅 */// $(function(){// // 슬라이드// let slide = $('.slide');// let currentSlide;// let slidesCount;// let currentCount = $('.slide-count .current');// let totalCount = $('.slide-count .total');// let updateSlideCoun..

2023. 1. 25.

코딩 기록/코딩 소스 [HTML & CSS & JS]

See the Pen slick 예제2 - slick slider go to slide example by kimyangsun (@kimyangsun) on CodePen. slick 슬라이드 예제 (asNavFor & slickGoTo) 코드펜 커스텀 코드입니다. 슬라이드를 연결하는 asNavFor, 해당 슬라이드로 이동하는 slickGoTo 를 연결해놓은 소스입니다. 코드펜을 눌러 상세하게 볼 수 있습니다. :)

2023. 1. 25.