본문 바로가기

분류 전체보기

 (224)
자주 쓰는 차트 전역 옵션 내가 자주 사용하는 차트 전역 옵션 (https://umings.github.io/file/highchart_common.js) Highcharts.setOptions({ lang: { thousandsSep: ',' }, chart: { backgroundColor: 'transparent', // 차트 background 컬러 style: { fontFamily: 'pretendard' // 차트 전체 font family 적용 } }, navigation: false, // 차트 메뉴 버튼 유/무 (필수) credits: { enabled: false }, // 하단 하이차트 주소 숨김 (필수) title: null, // 대제목, 없을 경우 -> title: undefined or null sub..
seriese의 특정 data만 색상 다르게 넣기 highchart series one data color differnt See the Pen highchart series one data color differnt by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) Highcharts.chart('chart', { xAxis: { categories: ["'22.09", "'22.10", "'22.11", "'22.12", "'23.01", "'23.02", "'23.03", "'23.04", "'23.05", "'23.06", "'23.07", "'23.08"], labels: { y: 20, }, }, series: [{ name: '시리즈', type: 'col..
css 가상요소에 content로 텍스트 넣을때 br 처리 선택자::after{ content: "첫번째줄\A두번째줄"; white-space:pre; }
스크롤 끝까지 내렸을때 이벤트 적용하기 아주 간단한 소스 See the Pen Untitled by publisher.kim (@publisherkim) on CodePen. html 컨텐츠 css .container{border:1px solid #ddd; height:300px; overflow-y:auto; box-sizing:border-box; padding:20px;} .content{height:500px; background:#777; color:#fff;} js *jquery필요 $(document).ready(function () { $(".container").scroll(function(){ var containerSctop = $(".container").scrollTop(); var containerHeight = $..
버튼 클릭시 input 값이 증감되는 소스 See the Pen plus minus input by publisher.kim (@publisherkim) on CodePen. html - + - + css .count_area{overflow:hidden;} .count_area *{box-sizing:border-box;} .count_area input[type=number]{height:30px; border:1px solid #ddd;float:left; border-left:0; border-right:0; width:30px; text-align:center;} .count_area input[type=number]::-webkit-inner-spin-button {appearance: none;-moz-appearance: none;..
나주맛집 / 나주무한리필 / 명륜진사갈비 명륜진사갈비 전남나주점 - 3월말 오픈한 아직 쌔삥가게. 오픈당일날에 친구랑 가고, 그 이후로 맛있어서 벌써 10번은 감. 이번주도 두번감 - 프렌치렉, 양념갈비, 껍데기 가 내 원픽!!! 삼겹살과 닭갈비도 있는데 상대적으로 원픽들보다는 쪼금 별로. 특히 프렌치렉👍🏻👍🏻👍🏻👍🏻 - 음료무한리필, 쌈채소, 콘샐러드, 양파, 파채, 밥 등 모두 무한리필. 술이랑 후식냉면 같은거만 별도. - 음식종류로는 잡채,떡볶이,청포묵,감자튀김 밖에 없긴 하지만 충분함. 고기먹어야지 다른거 많이 먹으면 안됨. - 사장님 짱친절, 직원들도 괜춘 - 초반에는 저녁에 무조건 웨이팅있었는데 요샌 거의 없는듯 - 휴무 없음, 오전11시~오후2시 점심장사, 오후 4시~8:50(라스트오더) 저녁장사. 가격은 점심저녁 동일 성인 17,..
나주 감자탕맛집 / 나주감자탕 / 삼국시대 삼국시대감자탕나주혁신점 - 나주 빛가람동 한가운데 위치. 다이소 건물 근처 - 점심시간엔 회사원들이 뼈해장국 먹으러 많이감. 나도 사무실이 근처일땐 뼈해장국 자주 먹으러왔고, 저녁에도 가끔 옴 - 깔끔한 반찬, 깔끔한 분위기. - 감자탕 시키면 라면사리, 수제비사리 무한리필 (주방쪽 앞에 셀프코너에 둘다 있음. 근데 반찬은 셀프코너에 없음^^;) - 우거지 감자탕 소 짜리 시키면 고기는 크게 네덩이라 2인분인데 당면이랑 우거지가 엄~~~~~~청 많음. 2명이 다 못먹을정도! - 감자탕, 뼈해장국 먹으러 재방문 계속하는곳 - 매주 토요일 휴무 - 주차는 건물주차장은 없는거같고, 주위 골목길에 주차선 그려진 자리에 주차하면 됨. https://naver.me/GttYTNDZ 삼국시대감자탕나주혁신점 : 네이버..
swiper slider with background scale animation 배경화면이 scale 되는 swiper slider See the Pen swiper slide with background and text animation by publisher.kim (@publisherkim) on CodePen. html 이전 다음 1슬라이드 타이틀 텍스트 슬라이드 서브 텍스트 버튼 2슬라이드 타이틀 텍스트 슬라이드 서브 텍스트 버튼 3슬라이드 타이틀 텍스트 슬라이드 서브 텍스트 버튼 css .slider_wrap{width:800px; height:500px; margin:0 auto; position: relative;} .swiper-container{ overflow:hidden; height:500px;} .swiper-slide{width:800px; height:5..
비전공자 정보처리기사 필기시험 6일공부 후 합격 후기 비전공자 웹 퍼블리셔의 6일 (점심시간 30분 + 퇴근후 2~3시간 4일 , 하루 6~7시간 2일) 준비 후 2023년도 3회차 정보처리기사 필기 시험 합격 후기. 재작년에 정보처리 산업기사를 따긴 했었지만, 사실 당시 필기시험때 외운건 모두 새하얗게 잊어버려서 처음부터 하는거랑 다름 없었다. 심지어 필기는 어떤 방법으로 공부했었는지는 기억도 안났다. 실기는 기사퍼스트에서 강의 들으면서 공부했던거 같긴 한데... 여튼. 이론부터 보기에는 시간이 없었기 때문에 네이버에 단기간에 합격할수 있는 방법을 검색해보니 이런 팁 글이 나왔다. https://m.blog.naver.com/moonsso3/223072174771 비전공자 직장인 정보처리기사 필기 2023년 1회차 단기간 합격후기 (거의 일주일..)202..
랜덤으로 순서가 바뀌는 slider (+with video), 플러그인 x 새로고침 할때마다 랜덤으로 순서가 바뀌는 slider. 현재 작동하는 slide의 video가 끝나면 다음 슬라이드로 넘어가는 방식. pagination 있음, slider plugin 사용 안함! See the Pen random slide with video by publisher.kim (@publisherkim) on CodePen. html 비디오1번_타이틀 비디오1번_텍스트 비디오2번_타이틀 비디오2번_텍스트 비디오3번_타이틀 비디오3번_텍스트 비디오4번_타이틀 비디오4번_텍스트 01. 비디오1_페이지네이션 02. 비디오2_페이지네이션 03. 비디오3_페이지네이션 04. 비디오4_페이지네이션 css /** mainSlide **/ #mainSlide, #mainSlide .videoslide,..
tree menu with checkbox 플러그인을 쓰지 않고 구현하는 tree menu See the Pen tree menu with custom checkbox by publisher.kim (@publisherkim) on CodePen. html 전체 메뉴1 메뉴1_1 메뉴1_1_1 메뉴1_1_1_1 메뉴1_1_1_2 메뉴1_2 메뉴1_2_1 메뉴1_2_1_1 메뉴1_2_1_2 메뉴1_2_2 메뉴1_2_2_1 메뉴1_2_2_2 메뉴2 메뉴2_1 메뉴2_2 메뉴2_3 전국 서울 종로구 강남구 2022년 2021년 css /* treebox */ .treebox{border:1px solid #ddd; padding:20px; margin-left:20px; margin-top: 20px; max-width: 400px; box-sizin..
fullpage.js 기본 소스 https://codepen.io/pohtani/pen/OXMwKb Fullpage.js - Custom Menu ... codepen.io $(document).ready(function() { $('#fullpage').fullpage({ anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'], navigation: true, navigationTooltips: ['11', '22', '33','44', '55'], showActiveTooltip: true, scrollingSpeed: 1000 }); }); 위 소스 커스텀해서 사용.
DOM 변경 감지해서 이벤트 발생 jquery와 javascript 함께사용. ajax 등을 통해 페이지 이동 없이 dom이 변경될때, ajax 소스 건드리지 않고 이벤트 추가 적용할때 자주 사용. $(document).ready(function() { var target = $('셀렉터')[0]; // 뒤에 배열도 꼭 써줘야함 var observer = new MutationObserver((mutations) => { console.log("dom 변경됨!") }) var config = { attributes: true, childList: true, characterData: true }; observer.observe(target, config); }); 아래 스크립트도 작동. const observer = new Mutatio..
vscode OpenAI api 확장 프로그램 사용 (AICodeHelper) 요즘 Open AI가 개발한 대화 전문 인공지능 챗봇 chat gpt 가 핫하다. AICodeHelper는 이 Open AI에서 제공하는 Open AI api를 이용해 간단하게 html 코드 등을 생성하는 vscode 확장 프로그램이다. 챗gpt 를 vscode에서 코더로 활용한다고 생각하면 이해하기 쉽다. 정확히 맞는 표현인지는 모르겠지만. 1. OpenAI 회원가입 https://platform.openai.com/ OpenAI APIAn API for accessing new AI models developed by OpenAIplatform.openai.com나는 간단하게 구글 계정으로 했고, 휴대폰으로 인증코드도 받아야한다. 2. overview 페이지에서 오른쪽 상단의 Personal 클릭, ..
head fixed table with custom scrollbar jquery.mCustomScrollbar.js 를 사용해 커스텀 스크롤바를 넣은 head fixed table See the Pen head fixed table with mCustomscrollbar by publisher.kim (@publisherkim) on CodePen. html 제목1 제목2 제목3 제목4 제목5 내용1 내용2 내용3 내용4 내용5 제목1 제목2 제목3 제목4 제목5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 내용1 내용2 내용3 내용4 내용5 css /* table */ .tbl_wrap{width:60..
fixed header + gnb (header에 hover시 gnb 열리면서 on효과, 스크롤시 on효과) See the Pen 풀사이즈 header + gnb by publisher.kim (@publisherkim) on CodePen. html 대메뉴1 서브1 서브2 서브3 서브4 대메뉴2 서브1 서브2 서브3 서브4 대메뉴3 서브1 서브2 서브3 서브4 대메뉴4 서브1 서브2 서브3 서브4 css /* header */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); * {font-family: 'pretendard';} body{background: url(https://umings.github.io/images/bg_dark.jpg) no-repeat center / cov..
아주 간단한 text hover효과 https://codepen.io/argyleink/pen/poEjvpd See the Pen CSS mouse-out transition effect by Adam Argyle (@argyleink) on CodePen.
1초 단위로 데이터가 들어가는 highchart See the Pen 1초 단위로 데이터가 들어가는 highchart by publisher.kim (@publisherkim) on CodePen. html css body{ background: #282d3a; } .chart1{ width: 300px; height: 300px; border: 1px solid; box-sizing: border-box; padding: 10px; } .chart2{ width: 900px; height: 600px; border: 1px solid; box-sizing: border-box; padding: 10px; } .MAT20{ margin-top: 20px; } .highcharts-tooltip-box { fill: black; fill-opacity:..
swiper slider text fadein 효과 See the Pen swiper text fadein by publisher.kim (@publisherkim) on CodePen. html 이전 다음 1슬라이드 타이틀 텍스트 슬라이드 서브 텍스트 버튼 2슬라이드 타이틀 텍스트 슬라이드 서브 텍스트 버튼 3슬라이드 타이틀 텍스트 슬라이드 서브 텍스트 버튼 css @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); .slider_wrap{width:600px; height:300px; margin:0 auto; position: relative;} .swiper-container{ overflow:hidden; height:300..
slick slider progress bar and page fraction example 프로그래스 바 + 페이징 fraction 들어간 slick slider See the Pen slick slider progress bar and page fraction example by publisher.kim (@publisherkim) on CodePen. html 첫번째 슬라이드 두번째 슬라이드 이전 멈춤 다음 css @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); .slide_wrap{width:600px; height:300px; margin: 0 auto;} .slide_wrap .item{width:100%; height:300px; box-sizing:bord..
맨위로
Total : Today :
728x90

티스토리툴바