본문 바로가기
[Vanilla JS] section 이름 labeling using IntersectionObserver 최근 포트폴리오 웹 사이트를 제작하고 있습니다..ㅎㅅㅎ 사실 지금까지는 항상 프론트엔드 프레임워크를 사용해서만 개발해왔습니다. 하지만 정작 웹 개발의 기본인 "HTML, CSS, JS"와 같이 기본적인 부분들을 놓치고 있는건 아닌가 하는 생각이 들었고 그렇게 웹 포트폴리오 사이트를 개발하게 됐습니다. 오늘 포스팅할 내용은 IntersectionObserver를 이용해서 특정 section에 들어갔을 때 해당 Section에 어울리는 이름으로 Label을 동적으로 지정해주는 그런 기능을 만드는 내용입니다! 그럼 가장 먼저 IntersectionObserver가 뭔지부터 얘기를 해봐야겠죠?! 🦄 IntersectionObserver란? https://developer.mozilla.org/ko/docs/We.. 2022. 3. 30.
Visual Studio Code: CSS 파일에서 HTML Class 자동 완성 플러그인 vscode에서 CSS 파일에 속성들을 넣어줄 때 HTML에서 지정해준 class가 자동으로 안불러와져... 굉장히 비효율적인 경우들이 있다. 사실 자동완성이 안되면 그냥...비효율적이다 ㅠㅜ 내 손구락 그래서 html에 있는 class를 자동으로 불러와주는 플러그인이 있는데 바로! ㄷ구둑두구둑두국구 짜쟌! HTML to CSS autocompletion 헷.. 200번..다운받으세요 진자 너무 좋아융 나의 삶이 더 편리해졌따.. 뿌듯하다. 2022. 1. 20.
Visual Studio Code 에서 HTML 빠르게 작성하기! 💡 해당 post에서는 vscode에서 html 코드를 빠르게 작성하는 방법에 대해서 배워볼 것이다! 기본 HTML 템플릿 ! + enter key ⬇️ Class 지정 .box ⬇️ .box.box1 ⬇️ h2.box.box1 ⬇️ 자식 element 포함해서 만들기 .box>.inner ⬇️ 복수개 만들기 div.box*5 ⬇️ 자동번호 매김 .box$*5 ⬇️ .box>.inner.inner$*5 ⬇️ .box.box$*5>.inner.$ ⬇️ HTML 하나하나 다 작성하기 정말 힘든데.. VSCODE 최고!!! 2022. 1. 19.
스시소라 정자점: 오마카세 🍣 헤... 회사 복지포인트를 써야하는데 복포로 남자친구 해준게 암껏두 없어서 스시집에 데려갔다...💝 예전에 회사 사람들하고 같이 오마카세를 먹었던 곳이 "스시소라 정자점"인데 가격에 퀄리티도 아주 좋아서 다시 한번 가보기로 했다. 스시 오마카세 런치 가격: 50,000원 주차: 2시간 무료 셰프: 서진욱 셰프님 런치 가격은 50,000원이고 셰프님은 서진욱 셰프님이셨다. 허허 딱히 셰프님을 정하고 간건 아니었는데 예전이랑 똑같이 결정돼서 룰루~ 더 편했... 쨋든!~ 룰루랄라 11시반 타임에 가서 주차하고 올라갔다. 주차는 2시간 무료! 🚘 처음에 주시는 계란위,,,명란...! 탱글탱글 한 것이 한 두 스푼 먹다보면 고새 없어져있따.. 후ㅜㅎ.. 이제 시작인가 진짜 양파 절임에 주신... 어떠한 생선인데.. 2021. 12. 20.
옥상캠핑 in 혜화 with 러블리 걸즈😋 벌써...2022가 다가오고있다 두둥 참 더 나이가 들 수록 시간이 빨리 간다는 어른들의 말은 틀린게 하나 없다 2021을 겪으며 감정의 굴곡이 너무 심했지만 난 이제 이겨낼 수 있어졌다. 항상 안되는 줄만 알았는데 사실 내가 안했던거지 하기만 하면 되더라. 결국 날 믿지 않은 마음이 컸던걸까 허허 이젠 날 믿을꺼다아아악 으아아아악 2022를 맞이하며 나의 사랑스러운 아가들을 만나러 갔지롱👀 한바탕 힐링 캠핑을 하고 왔다... 역시 만나면 시끄러운 세명과... 그 안에서 힘들어하는 우리 세욘스... 세연이의 완벽한 계획 덕분에 힘든와중에 모두 행복을 느낄 수 있었다 후후 🥰 아니 솔직히 우리 넷다 너무 추울줄 알고 다들 몇겹씩 껴입고...ㅋㅋㅋㅋㅋㅋㅋㅋ 목티에 목도리에 핫팩에 난리가 났었는데 안에도 너무.. 2021. 12. 7.
💡 Antd + Sider + React-Router-Dom 1. Antd layout의 Sider을 복붙한다! 2. 필요 없는 내용들을 삭제하고 원하는 내용으로 수정한다. 3. react router을 적용한다. 원래는 Switch를 사용해서 Route를 적용했었고, props로 component를 넘겼었는데 아래 링크를 보면 내용이 수정된 것을 알 수 있다... Switch는 Routes로 바뀌고 (동일하게 작동한다고 한다. ) component는 element로 바뀌었다...ㅎㅅㅎ https://reactrouter.com/docs/en/v6/upgrading/v5 React Router | Upgrading from v5 Declarative routing for React apps at any scale reactrouter.com 계속 예전 방식을 쓰다.. 2021. 11. 24.
[프로그래머스] 타겟 넘버 / C++ / level2 ✏️ 문제 링크 https://programmers.co.kr/learn/courses/30/lessons/43165 코딩테스트 연습 - 타겟 넘버 n개의 음이 아닌 정수가 있습니다. 이 수를 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 예를 들어 [1, 1, 1, 1, 1]로 숫자 3을 만들려면 다음 다섯 방법을 쓸 수 있습니다. -1+1+1+1+1 = 3 +1-1+1+1+ programmers.co.kr ✏️ 문제 설명 (더보기 클릭 👆🏻) 더보기 문제 설명 n개의 음이 아닌 정수가 있습니다. 이 수를 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 예를 들어 [1, 1, 1, 1, 1]로 숫자 3을 만들려면 다음 다섯 방법을 쓸 수 있습니다. -1+1+1+1+1 = 3 +1-1+1+1+1.. 2021. 10. 6.
🔮 비트마스크 문제 모음집 [백준] 11723번: 2021.10.04 - [Algorithm 💫/알고리듬(thm) 공부 🌱] - [백준] 11723번: 집합 (🥇골드 2티어) [백준] 3449번: 2021.10.04 - [Algorithm 💫/알고리듬(thm) 공부 🌱] - [백준] 3449번: 해밍 거리 (🥉 브론즈 2티어) [백준] 12813번: 2021.10.05 - [Algorithm 💫/알고리듬(thm) 공부 🌱] - [백준] 3449번: 이진수 연산/ C++ (🥉 브론즈 2티어) [백준] 11811번: 2021.10.05 - [Algorithm 💫/알고리듬(thm) 공부 🌱] - [백준] 11811번: 데스스타 / C++ (🥈 실버 3티어) [백준] 13701번: 2021.10.05 - [Algorithm 💫/알고리듬(.. 2021. 10. 5.
[백준] 13701번: 중복 제거 ✏️ 문제 링크 https://www.acmicpc.net/problem/13701 13701번: 중복 제거 문제: N개의 정수 A1, A2, ..., AN 을 읽고, 이들 중에서 반복되는 수를 제외하고 남은 N'개의 수 B1, B2, ..., BN’ 을 입력된 순서대로 출력하시오. 이때, 0 ≤ Ai < 225 = 33554432, i=1,2,…,N. 입력의 개수 N은 1 www.acmicpc.net ✏️ 문제 설명 (더보기 클릭 👆🏻) 더보기 ✏️ 문제 풀이 배열을 선언하고 input으로 들어오는 숫자를 출력한적이 있는지 확인한다. 만약 출력한적이 있다면 중복되는 것이니 해당 숫자를 다시 출력하지 않고 만약 출력한적이 없다면 해당 숫자를 true로 만들어주고 input을 출력해준다. ✏️ 문제 코드 .. 2021. 10. 5.
반응형

티스토리툴바