티스토리

류쥬니 블로그
검색하기

블로그 홈

류쥬니 블로그

coding-designer.tistory.com/m

나의 이야기로 나를 채우는 중입니다. 반가워요 제 공간에 오신걸

구독자
10
방명록 방문하기
공지 게시글이 이상하네요.. 모두보기

주요 글 목록

  • 시작부터 위기..![Open API를 찾아서..] 프로젝트의 이름을 지었다. 바로 "냉장고 비우기" 주된 서비스는 냉장고 속 재료를 입력하면 그 재료만 들어가는 레시피를 제공하는 것이다. 만약 양파와 감자만 입력한다면 다른 재료없이 단 양파와 감자만을 이용한 레시피가 나와야 한다. (소스류 등은 제외) 좋아! 이제 이러한 레시피를 제공하는 Open API 를 검색해보자..! 검색해보자... 죄다..주부 백단 재료 만땅 레시피를 제공하는 Open API 밖에 존재하지 않았다.. 벌써부터 프로젝트의 위기를 맞이하는 것 같았다.. 직접 레시피를 구성해서 API 를 생성하는 건 정말 말도 안되는 일이었다... 그렇게 한참을 고민하고 검색해보다가 나와 비슷한 주제의 프로젝트를 하는 분의 블로그를 발견하였고 "만개의 레시피" 사이트를 크롤링하여 API 사용하고 계.. 공감수 0 댓글수 0 2023. 2. 14.
  • 개인 프로젝트를 시작하다...! [프로젝트의 발단] 웹 퍼블리셔에서 프론트엔드로 전향하기 위해 앨리스 부트캠프에 참여하였고 무사히 수료하였다. 부트캠프에서 진행한 3번의 프로젝트 동안 본의아니게 프론트엔드와 백엔드 둘 다 경험하게 되었고 "혼자서 풀스택 프로젝트를 해볼까....?" 하는 이상한 자신감을 얻게 되었다. 당장 취업도 쉽게 되는 것 같지 않았기에 취업이 되기 전까지 프로젝트를 진행하면 기획부터 제작에서 운영까지 경험할 수 있고 포트폴리오로도 사용할 수 있을 것 같아 여러모로 유용할 것 같았다. 그렇다면 어떤 프로젝트를 할까? 사실 옛날부터 만들고 싶었던 서비스가 있었다. 나는 요리를 좋아하기 때문에 가끔 feel 받으면 음식 재료들을 와랄라 사와서 맛난 음식을 해먹곤 한다. 하지만 꾸준히 성실하게 요리를 하는 편은 아니라서 이벤트성 요리가 끝나.. 공감수 1 댓글수 0 2023. 2. 14.
  • useRef 가 DOM 선택하는 것 외에 또 다른 용도 [Today I Learned - React] 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리할 수 있음 useRef 로 관리하는 변수는 값이 바뀐다고 컴포넌트가 리렌더링 되지 않음 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회할 수 있는 반면, useRef 로 관리하고 있는 변수는 설정 후 바로 조회할 수 있음. useRef 로 만든 변수로 관리할 수 있는 것 1. setTimeout, setInterval을 통해 만들어진 id 2. 외부 라이브러리를 사용하여 생성된 인스턴스 3. scroll 위치....!! 요기서 잠깐! 그냥 일반 변수를 안만들고 왜 굳이 useRef 로 변수를 만드느냐? 컴포넌트는 그 컴포넌트의 state나 props가 변경될 때마다 호출되는데(re-ren.. 공감수 0 댓글수 2 2023. 1. 13.
  • map 을 사용할 때 왜 key 설정을 해야하나? [Today I Learned - React] 설정해줘야하는 이유 각 고유 원소에 key 가 있어야만 배열이 업데이트 될 때 효율적으로 렌더링 될 수 있음 만약 설정해주지 않으면 map 을 설정한 초기 배열에서 요소를 하나 더 추가하게되면 배열의 요소가 추가되지 않고 배열의 요소들이 교체되듯이 동작한다. 즉, [a,b,c,d]라는 배열에서 [a,b,z,c,d]로 업데이트하면 DOM 에서는 c 가 z로 바뀌고, d 는 c 로 바뀌고, 맨 마지막에 d 가 새로 삽입되는 형태가 되어버림 ==> 문제는 없지만 아주 비효율적으로 동작하는 것! key 설정을 해준다면? 수정되지 않는 기존의 값은 그대로 두고, 원하는 곳에 내용을 삽입하거나 삭제함! 즉, 배열을 렌더링 할 때 key 값은 매우 중요함. 공감수 0 댓글수 0 2023. 1. 13.
  • useState 객체로 사용하기(input 예시) [Today I Learned - React] input의 개수가 여러개가 되었을 때, 단순히 useState 를 여러번 사용하고 onChange 도 여러개 만들어서 구현할 수 있지만 => 좋은 방법이 아님! 여기 더 좋은 방법 설명 시작! 01 일단, 위와 같이 input 태그에 name 속성을 설정하고 이벤트가 발생되었을 때 이 값을 참조하도록 설정. 02 const [inputs, setInputs] = useState({ name: '', nickname: '' }); useState 에는 문자열이 아니라 객체 형태의 상태를 관리해주기 03 const onChange = (e) => { const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출 setInputs({ ...inp.. 공감수 1 댓글수 0 2023. 1. 13.
  • 정규식에 익숙해지자..[코딩테스트 연습] 코딩테스트 연습을 시작하게 되었습니다. 프로그래머스의 레벨 0단계 부터 시작을 하였는데..... 아니??? 나 이정도로 빡대가리였던건가???.... 무슨 문제인지 파악하는 데만 10분정도 쓴 것같아요..... 대략 문제의 내용은 이러하였습니다. ["data", "object", "array"] 라는 배열이 있는데 내가 함수에다가 ["datata", "dataobject", "arrayarr", "data"] 처럼 이상하게 집어넣어 볼테니까 너가 "data", "object", "array" 만 걸러서 옳은 문자가 몇개인지 개수를 좀 알려줘봐 아 근데, dataobject 와 같이 옮은 문자가 나열된것도 개수에 포함시켜야함 ㅇㅋ? 처음에는 아니 뭐...배열이랑 파라미터로 들어온 배열이랑 비교하도록 filt.. 공감수 0 댓글수 0 2023. 1. 13.
  • 브라우저는 어떻게 동작하는가? [Today I Learned - 배경지식] 브라우저에서 URL을 입력하게되면 이러한 순서로 진행이 됩니다. 먼저 브라우저가 서버에게 HTML 파일을 요청합니다. (request) 파일을 서버에게 받아서 로딩을 합니다. (loading) 파일을 한줄씩 읽어 DOM 요소로 변환하는 과정을 scripting 이라고 합니다. (scripting) DOM 요소로 변환하고, CSS 요소를 CSSOM으로 변환합니다. (scripting) 변환한 것을 window에 표기하기 위해 Rendering Tree를 만듭니다. (rendering) Render Tree의 각 요소들이 어떤 위치에 어떤 크기로 표기되는지 계산을 합니다 (layout) 화면에 요소들을 그립니다. (painting) 출처 블로그 : https://velog.io/@moonshadow/ IP .. 공감수 0 댓글수 0 2023. 1. 12.
  • 변수는 무엇이고, 왜 필요할까? [Today I Learned - JS] 여러 날에 걸쳐 공부한 걸 한번에 정리해서 글이 많이 길다... 변수 예시 var a = 10; 변수를 알아보기에 앞서, 컴퓨터는 어떻게 메모리에 값을 저장하고 계산하는가? 예를 들어 10 + 20 = 30 이라는 식을 계산하고 저장하려면? 👉컴퓨터는 CPU 를 사용해 연산하고, 메모리(memory)를 사용해 데이터를 기억한다. 01. 메모리(Memory)란? => 데이터를 저장할 수 있는 메모리 셀의 집합체 1. 메모리 셀 1개는 1바이트 각 셀은 고유의 메모리 주소를 갖는다. 메모리 주소 : 메모리 공간의 위치를 의미 2. 컴퓨터는 즉, 1바이트 단위로 데이터를 저장하거나 읽어들인다. 3. 컴퓨터는 모든 데이터를 2진수로 처리 메모리에 저장되는 데이터는 데이터의 종류(숫자, 텍스트, 이미지, 동영상).. 공감수 0 댓글수 0 2023. 1. 12.
  • 리액트를 사용하는 이유 [Today I Learned - React] 리액트를 사용하는 이유?! 리액트를 사용하면 좋은 이유 01. 웹을 APP 처럼 사용할 수 있음 모바일 앱으로 발행이 쉬움 02. 이벤트 업데이트 관리가 쉬움 JS 이벤트 업데이트 방식 JS 로 DOM 에 접근하여 이벤트를 하나하나 핸들링 하려면, 프로젝트 사이즈에 따라 관리하기가 어려워 질 수 있음 이벤트가 많아지면, DOM 이 다양해지고, 업데이트 규칙도 복잡하게 됨 React 이벤트 업데이트 방식 어떠한 상태가 바뀌었을 때 그 상태에 따라 아예 리랜더링 되도록 설계가 되어있음 아예 리랜더링 하면 속도가 느려지지 않나? => Virtual DOM 으로 해결!! 어떻게 업데이트를 할 지에 대한 고민이 필요 없음 Virtual DOM : 가상의 DOM 메모리에 가상을 존재하는 DOM == JS 객체와 같.. 공감수 0 댓글수 0 2023. 1. 11.
  • [코딩 공부일지] 전역변수 간략 정리 전역변수란? 모든 곳에서 쓸 수 있는 변수! var 나이 = 20; //전역변수 : 제일 바깥에 만들어놓음 window.나이 = 20; //window 로 전역변수 만들기도 가능! (:: 전역변수) //즉, window{} 안에 '나이'라는 키값을 만든 것 function 함수(){ console.log(나이); //20 var 이름 = 'kim' //지역변수 } 함수(); 오늘은 여기까지..!! 현재 코딩 공부일지는 코딩애플 강의를 들으며 공부하는 내용을 작성한 것입니다! 코딩애플 흥해랏 공감수 0 댓글수 0 2022. 5. 11.
  • [코딩 공부일지] 변수, 함수 호이스팅 간단 정리 자바스크립트 언어를 사용하면서 "호이스팅"이라는 단어 많이 들어보셨을 거에요 자바스크립트를 이해하는데 있어서 참 중요한 호이스팅!!! 오늘 한번 정리해볼게요!! 그럼 Let's Start!! 호이스팅이란? 변수나 함수를 생성할 때 자동적으로 선언한 부분을 페이지 맨 위로 올려버리는 현상을 말함 01. 변수의 호이스팅 console.log(나이) //undefined (= 변수 선언만하고 할당을 안했을때 발생) var 나이 = 30; console.log(나이) //30 var 나이 = 30; 이라고 선언을 했을 때, 자바스크립트는 자동적으로 "var 나이", 즉 변수 선언한 부분을 무조건 페이지 맨 위로 올려버림 그리고 나이 = 30; 은 변수를 선언한 위치에 그대로 존재함 이런식으로 자바스크립트는 변수.. 공감수 0 댓글수 0 2022. 5. 11.
  • [코딩 공부일지] 변수 var / let / const 차이점 간단 정리 휴.. 요즘 체력을 키우려 헬스를 빡시게 했더니 거의 2주간 앓아 누웠다가 다시 공부시작합니당 오늘은 변수 공부한 것 정리하려 해요! 각 변수들의 특징 01. var var : 재선언 가능 var 이름 = 'kim'; console.log(이름) //kim var 이름 = 'park'; console.log(이름) //park var : 재할당 가능 var 이름 = 'kim'; console.log(이름) //kim 이름 = 'park'; console.log(이름) //park var : 존재 범위는 function function 함수(){ var 이름 = 'kim' console.log(이름) //kim } console.log(이름) //undefined 출력 02. let let : 재선언 불가.. 공감수 0 댓글수 0 2022. 5. 11.
  • [코딩 공부일지] 시작해봅니다 - this 그날 그날 공부했던 것들을 조금 더 오래 기억하기 위해 코딩공부 일지라는 것을 한번 끄적여 볼까 합니다. 뭐..정성스레 기록할 생각은 없구요..(귀찮) 😒 그냥 이 날 이거 공부했었지 정도로 저 만을 위한 그런...어떠한...일지랄까? 그래서 오늘은.....!! 두구두구 자바스크립트에서 그렇게 자주 사용한다는 " this " 두둥 this 라는 가까우면서 먼듯한...이 아리까리한 녀석이 어디서 사용하느냐에 따라 가리키는 대상이 다르더라구요 1. 그냥 console.log(this) 나 그냥 함수 안에 사용하면 window{}, 즉 윈도우 오브젝트를 가리킵니다. * 윈도우 오브젝트 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체를 의미 document.getElementById(), alert(.. 공감수 0 댓글수 0 2022. 4. 21.
  • [vue3] v-for 를 정복해버렸다...!!!!! 뷰 새내기 윤쮼입니다!!!! 뷰의 기초 중의 기초 v-for 시간도 없는데 오늘 정복해버릴까합니다. 그래서 예시를 들고왔어요!!! 첫번째 예시!! 데이터이름 : 과일들 데이터 내용 : 사과, 딸기, 바나나 과일들 : [사과, 딸기, 바나나] 이거를 v-for 로 뿌려줄 거에요! {{과일}} 자 위에 코드에서 "과일들"(즉 데이터이름) 에서 각각의 "과일"(데이터내용 - 네이밍은 마음대로 가능)을 빼내온다고 생각하면 되요. :key="과일"은 안쓰면 오류나니까 써야합니다. (공식페이지에서 하래요....) "과일 in 과일들" 에서의 과일과 :key="과일" 에서 과일은 같은 값을 가리킵니다. 출력하면 사과, 딸기, 바나나 이렇게 같죠. 두번째 예시!! 데이터이름 : 음식들 데이터 내용 : 짜파게티, 유부초.. 공감수 0 댓글수 0 2022. 3. 16.
  • Vue 프로젝트를 시작하자! [시작부터 오류발생...... 해결방법은!!!?] 계획만 해서는 안된다! 일단 시작을 하자! 작업 운영체제는 윈도우 (Window) npm 설치 시 맥에 비해서 오류가 많이 난다고 하는데.. 조금 걱정이 된다! 그래도 도--전!!!!!!! Vue3 프로젝트 시작 순서! 1. 프로젝트 폴더 아무 곳에나 생성 2. Vscode 에서 오픈 폴더 => 생성한 폴더 불러오기 3. 터미널에 npm install -g @vue/cli 입력!!! 후후....아니나 다를까 바ㅡ로 오류 발생!!!! ("허가되지 않은 스크립트 어쩌구 저쩌구") ㅡ.ㅡ 해결 방법 ???? 윈도우 검색메뉴(돋보기) 에서 Powershell을 검색하면 "Windows Powershell" 이 뜨는데 여기 우클릭을 해서 관리자 권한으로 실행!! 그리고 Set-ExecutionPolicy Unre.. 공감수 1 댓글수 0 2022. 3. 15.
  • [Vue3] 버튼 클릭 시 입력한 값 : data 값에 등록 만들고 싶은 것 값을 입력하고 클릭하면 출력되게 만들기 1. 인풋에 입력한 값 저장하기 2. 클릭하면 저장한 인풋 값을 데이터에 등록 3. 등록된 데이터 값 보여주기 Html type your list click {{text}} 1. @change="input" : input값이 변경되면 data에 업데이트 되도록 해야함 2. @click="click" : 버튼을 누르면 업데이트된 data값이 {{ text }} 에 출력되도록 만들기 Javascript const app = Vue.createApp({ data(){ return { text : '', //출력될 값 inputText : '' //input값 } }, methods:{ input(e){ return this.inputText = e.tar.. 공감수 1 댓글수 0 2022. 1. 5.
  • [Vue3 + TS] Event Target 에러 1. (event)에 타입 Event 설정해주기 2. event.target.textContent 하면 Property 'textContent' does not exist on type 'EventTarget' 에러 뜸 (event.target as HTMLLIElement).textContent 로 작성해주기 const dpText = ref('Dropdown Text'); const menuClik = (event: Event) => { const eText = (event.target as HTMLLIElement).textContent; dpText.value = eText; }; {{ item.menu }} 공감수 0 댓글수 0 2021. 10. 25.
  • [JS] 두 배열 비교하여 중복되는 값 찾기 [1,2,3,4,5] 와 [2,4,5,7,8] 비교하여 중복값 찾아내기 예상 답 : 2,4,5 공감❤과 구독하기✔를 눌러주시면 블로거는 힘이나요😊 공감수 1 댓글수 3 2021. 3. 25.
  • :after 과 ::after 의 차이점은 바로 이것입니다. :after은 CSS2에서 , ::after은 CSS3에서 사용하는 것입니다. 즉, 가상요소(Pseudo-elements)는 CSS2에서는 : 가 하나만 표기되고 CSS3에서는 :가 두개 표기됩니다. CSS3에서 ::after로 표기되는 이유는 가상클래스와 가상요소의 차이를 분명하게 하기 위함이라고 합니다. (둘 다 앞에 : 가 붙어서 헷갈릴까봐 차이를 주기위함인 것같음) 가상클래스 :hover, :active, :checked, :last-child ...등등 가상요소 ::after, ::before, ::first-letter, ::placeholder ...등등 하지만 호환성을 위해 :after, :before 도 허용됩니다. 결론. 가상클래스와 가상요소가 헷갈리지 않는 다면 그냥 :after, :.. 공감수 0 댓글수 0 2021. 3. 23.
  • [개발메모_01] 1. ftp에 첫 업로드 후, 그 다음부터의 css와 js의 업데이트가 사이트에 적용되지 않는경우에는 경로.css?ver=0.1 또는 경로.js?ver=0.1 와 같은 형식으로 버전 업데이트를 해줘야함 2. 카카오 지도 적용은 서버와 함께 적용해야 하므로 로컬에서 작업시, 적용이 안됨. (서버가 구축된 조건하에) ftp에 등록하여 해당 웹 경로에서 봐야 카카오 지도가 적용된 것을 볼 수 있음. 3. css 파일을 해상도별로 저장하여 따로 적용하는 방법. 예) pc.css / mobile.css 등등 지정해주기 공감수 0 댓글수 0 2021. 3. 22.
  • [모던자바스크립트 - JS 예제 마스터] 오늘 날짜 구하기 오늘 예제는 당일 날짜를 보여주는 것이므로 에디터 결과물을 가져왔습니다. javascript 코드 var now = new Date(); var month = now.getMonth()+1; var day = now.getDate(); document.write("오늘은"+month +"월" + day +"일 입니다. "); 사실 날짜구하는건 제가 이미 할줄 아는 부분이고 쉬워서.. 하나만 설명하고 마칠게요! 왜 getMonth()에 1을 더해야하나요? getMonth()의 반환값이 0~11 이기 때문입니다. (그냥 그렇대요...w3school이 그랬어요..) 즉 1월은 0, 2월은 1 이렇게 나옵니다. 그래서 +1을 해줘야하는 거랍니당 :) 공감❤과 구독하기✔를 눌러주시면 블로거는 힘이나요😊 공감수 0 댓글수 0 2021. 2. 28.
  • [모던자바스크립트 - JS 예제 마스터] 체질량 구하기 HTML 코드 키 : cm 몸무게 : kg 당신의 체질량지수는 ?입니다. Javascript 코드 window.onload = function(){ document.getElementById("button").onclick = function(){ var h = parseFloat(document.getElementById("height").value); var w = parseFloat(document.getElementById("weight").value); var bmi = document.getElementById("bmi"); bmi.innerHTML = (w/((h*h)/10000)).toFixed(1); } } 이번 예제는 크게 어려운 부분은 없었던 것 같아요. 하지만 또 새로운 메서드가 등.. 공감수 0 댓글수 2 2021. 2. 27.
  • [모던자바스크립트 - JS 예제 마스터] 스탑워치 만들기 모던자바스크립트 - 스탑워치 만들기 HTML 코드 0.00 태그에 초시계를 넣어주고 각 start, stop 버튼을 input으로 만들어 줍니다. Javascript 코드 window.onload = function(){ var startButton = document.getElementById("start"); var stopButton = document.getElementById("stop"); var display = document.getElementById("display"); var startTime, timer; startButton.onclick = start; function start(){ startButton.onclick = null; stopButton.onclick = stop.. 공감수 0 댓글수 0 2021. 2. 26.
  • 웹접근성이 무엇이지 파헤쳐보다 웹 접근성을 쉽게 이해하기 위해서는 접근성이라는 단어부터 한번 보는게 좋을 것 같습니다. 1. 일상생활 속의 접근성 우리가 어떤 장소를 갈 때에 그 곳은 접근성이 좋다. 라고 하죠. 즉, 도달하기 쉽다 라는 뜻과 같습니다. 아마 접근성이 좋은 장소는 교통이 편리하다고도 볼 수도 있을 것 같습니다. 2. 사전적 의미의 접근성 사전적 의미로 접근성이 높다는 것은 어떠한 것을 이용하는 데 있어서 편리하다는 뜻도 있습니다. 3. 웹 접근성 그렇다면, 웹접근성은 무엇이며, 왜 필요한 것일까요? 웹을 통한 정보 전달이 점점 활발해지면서 웹을 사용하는 사람들도 점점 많아지고 있습니다. 또한 그러한 웹들을 전달해줄 전자기기, 운영체제, 웹브라우저들도 다양해지고 있죠. 그런데 만일 웹을 사용하지 못하는 경우가 생긴다면 .. 공감수 1 댓글수 2 2021. 2. 25.
  • Number.parseInt vs Number vs parseInt Number.parseInt() vs Number() vs parseInt() 이 세가지 메서드는 참 비슷해요. 그래서 오늘은 이 세가지 메서드의 차이점을 알아볼까합니다. Number() 이 메서드는 무조건 숫자로 이루어진 것만 숫자로 리턴해줍니다. ex) "2014" --> 2014 (숫자리턴완료) "2014년도" --> NaN (Not a Number 리턴) 그리고 숫자에 강하므로 소수점도 인식합니다. ex) "10.124" --> 10.124 parseInt() 숫자와 문자 중 숫자만 인식하여 숫자로 리턴해 줍니다. ex) "2014년도" --> 2014년도(숫자리턴완료) 하지만 문자가 앞에 있는 경우는 불가능합니다. ex) "제2014년도" --> NaN(Not a Number 리턴) 그리고 10.. 공감수 0 댓글수 2 2020. 6. 11.
  • AddEventListener 오류 해결방법 (업데이트) 이전 글은 정말 JS의 J자도 모른채로 글을 써버렸네요 ㅠㅠ 다시 수정하여 올립니다. 1. 기본적으로 script는 body태그의 가장 아래에 작성해야합니다. script를 body의 상단에 작성하게 되면, 간혹 html이 로드 되기 전에 script를 먼저 불러와버리는 경우가 생깁니다. 그렇게되면 addEventListener을 부여할 DOM을 찾지 못하게 되는 현상이 발생하는 것이죠. 1. script 태그에 defer 을 삽입해 줍니다. (defer 스트립트) 브라우저는 defer 속성이 있는 스크립트를 백그라운드에서 다운로드 합니다. defer 스트립트를 다운로드 하는 도중에도 HTML 피싱이 멈추지 않습니다. 그리고 defer 스크립트 실행은 페이지 구성이 끝날 때까지 지연됩니다. 참고 링크 :.. 공감수 3 댓글수 2 2020. 5. 31.
  • Math.random/Math.floor 사용하여 랜덤운세 만들기 See the Pen xxwveGK by jiyunryu (@whatIDavailable) on CodePen. 1. 배열에 운세 내용을 넣기 2. Math.random()*배열.length 로 소수점 달린 length 값 랜덤으로 뽑기 3. 2를 Math.floor()에 담아 정수로 만들어주기 4. 배열[] 안에 3을 넣고 출력하면, 운세가 랜덤으로 출력이 된다. 공감수 0 댓글수 0 2020. 5. 31.
  • CSS 초보 팁 : z-index 값을 아무리 올려도 작동이 안돼요 제가 겪은 z-index가 작동하지 않는 한가지 케이스를 보여드릴게요. 부모와 자식 모두 position:absolute; 가 적용되어 있는 경우에는 자식의 z-index 값을 아무리 올려도 부모를 벗어나서 적용될 순 없습니다. 예를 들어, 만일 코드 구조가 이렇게 부모와 자식이 있는 상태에서, .parent{position:absolute; z-index:0;} .child{position:absolute; z-index:100;} CSS가 이렇게 적용이 되어있다면, child는 부모 속에 있는 요소이기 때문에 부모 밖으로 나갈 수 없는 것입니다. 음..지금와서 보면 참..이런 실수 왜했나 싶은데 1년전엔 .child에 z-index 값이 적용이 안되어서 99999까지 올리기도 했었죠..ㅋㅋ 책상 정리.. 공감수 1 댓글수 0 2020. 5. 28.
  • 팝업 안의 slick slider 가 뜨지 않을 때? slick slider 를 레이어 팝업에 넣었는데, 레이어 팝업을 열었을 때 slick slider 가 뜨지 않고 slick slider 의 arrow 만 뜨는 현상 발생. arrow를 몇번 클릭 하면 slick slider 가 뜨긴 함... 여기서, 보통 $(슬라이드).slick(); 기능을 HTML 최하단에 덩그러니 설정하는게 일반적인데 팝업에 slick slider 를 넣는 경우 팝업을 띄운 후 slick(); 이 작동되어야 함. $(팝업 키는 버튼).click(function(){ $(팝업).show(); $(슬라이드).slick(); }); 이런 형태로 만들어 줘야 합니다. stack overflow 에서 아무리 찾아도 안나와서 진짜 답답했는데.. 겨우 어떤 분이 해결하신 거 블로그에 올려놓으셔.. 공감수 1 댓글수 2 2020. 4. 22.
  • input checkbox CSS 설정 방법 저는 지금껏 input checkbox 체크 설정을 jQuery로 설정을 해왔는데 이번에 사수분이 input checkbox 는 CSS로 설정하는게 낫다고 해주셔서 한번 정리해봤습니다. (너무 기초적인 부분을 모르고 코딩했다는 사실이 부끄럽네요 ㅠㅠ ) 체크 박스의 체크 이미지는 폰트어썸의 아이콘을 사용하여 폰트어썸 CDN 을 첨부해줬어요. HTML에서 태그를 짤 때, input의 ID 이름과 label의 for 이름을 똑같이 연동 시켜줘야 기능이 작동하니 잊지마세요. input 태그는 안보이게 숨기고 label:before 가상객체로 CSS를 꾸며주는 방식이에요 input:checked + label:before 를 사용하면 CSS에서도 체크박스가 클릭된 설정이 가능합니다. 이렇게 input check.. 공감수 3 댓글수 0 2020. 4. 22.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.