분류 전체보기 14 썸네일형 리스트형 구현 2023.06.13 게시물 Table Of Contents 자동 목차 만들기 개요현재 블로그 게시글 페이지처럼 글 구조를 보여주는 목차를 페이지 한편에 띄우려 한다.이름하야 Table of Contents, 목차다. 보통 한 쪽에 글의 소제목을 나열하고, 현재 읽고 있는 부분이 어디인지 알려주거나 클릭했을 때 해당 파트로 이동할 수 있는 기능을 말한다.페이지 상의 글 구조를 분석 후 리스트를 만들어 원하는 위치에 꽂아주려 한다. 구현 사항글의 구조를 분석하고 리스트로 만든다해당 제목을 클릭했을 때 해당 위치로 이동한다 구현 방법페이지에서 DOM을 분석하여 글의 리스트를 추출하고, 이것을 조합하여 중첩된 ol엘리먼트로 만든다만든 엘리먼트를 원하는 위치에 꽂아준다페이지에 알맞게 스타일링을 해준다이번 글에서는 페이지에서 리스트 추출해서 화면에 붙이는 것까지만 작성할 예정이다. 사실 작.. 구현 2023.05.25 리액트 커스텀 셀렉트 박스 만들기 개요리액트에서 기본 셀렉트 태그가 아닌 자유롭게 스타일링할 수 있는 커스텀 셀렉트 박스를 만들어보자!브라우저에서 기본 제공하는 셀렉트 박스에 대해 알아보고 원하는 스타일을 입힐 수 있도록 커스텀 셀렉트 박스를 만들어보기로 한다. 미리 보기PC모바일 셀렉트 박스 알아보기 셀렉트박스는 다양한 옵션 중에서 사용자가 하나를 선택할 수 있는 UI로 드롭다운 메뉴, 콤보박스 등 다양한 이름으로 불린다. 기본적으로 HTML의 태그와 태그를 이용하여 만들 수 있다. 기본 셀렉트 태그먼저 기본 셀렉트 태그를 살펴보자.샘플 이미지의 소스는 mdn의 예제 소스이다. 링크PC크롬엣지파이어폭스 모바일크롬카카오톡 브라우저삼성 인터넷 브라우저 자체의 스타일이 있으며 CSS로 제어할 수 있는 부분이 적기 때문에 스타일 커스텀하.. 기타 2023.02.28 정보처리기사 & 독학사 취득 후기 작년에는 공부를 좀 해보려고 했던 한 해였다. 봄에 정보처리기사 응시하여 필기, 실기 나란히 동차 합격했고 겨울에는 독학사에 응시하여 컴퓨터공학 학사 학위를 취득했다. 시일이 조금 지나긴 했지만, 작년 나름 열심히 한 게 아까워서 공부한 기록을 정리해 본다. 정보처리기사 동차 합격 하기모두가 다 한 번씩 응시하는 정처기. 1회 차 시험도 마침 3월 초라서 새해 목표로 잡기 딱 좋았다. 운 좋게 필기와 실기 둘 다 1회에 바로 붙었다.기본 정보기본 지식 : 비전공 현업 종사자공부 기간 : 약 2개월문제집 : 수제비 2022공부 비중 : 하루에 2~3시간 정도 할애C 기본과 파이썬도 기본은 다 다룰 줄 알아서 프로그래밍 파트는 크게 걱정하지 않았으나, 데이터베이스, 네트워크와 운영체제 같은 나머지 부분은 처.. 구현 2022.11.04 S3에 파일을 업로드하는 세 가지 방법 AWS SDK for Javascript v3을 이용해 next.js에서 S3에 파일 업로드를 하는 다양한 방법을 알아보자! 개요 기본 참고 자료 링크 AWS 가이드(S3 Upload) AWS 가이드(Presigned URL) 유튜브(Sam Meech-Ward) 링크로 소개한 영상에서는 express를 이용했는데, 더보기란에 첨부한 예제에 nextjs 소스도 있다. aws 설정 및 세팅 부분은 위 영상 참고하는 게 더 자세하다. 조건 DB 없음, 업로드 소스만 따로 떼어서 작성 추가 패키지 최소 사용 AWS 및 nextjs 기본 사용법 숙지한 상태라 가정 백엔드 api 통신을 많이 해 본 편이 아니라 개념이나 사용하는 패키지 등이 익숙하지가 않아 이리저리 시험해본 결과를 정리하였다. 원리에 대한 깊은 이.. 구현 2022.07.26 오늘 하루 보지 않기 팝업 만들기 오늘 하루는 보지 않기 팝업을 구현합니다.쿠키와 로컬 스토리지가 어떤 것인지 간단하게 알아보고두가지 방법으로 구현하는 방법을 함께 알아봐요! 구현 사항 및 방법 정리어떤 걸 구현해야 할까?사용자가 그냥 닫기를 눌렀는지, 오늘 하루 보지 않기 버튼을 눌렀는지 확인팝업이 다시 보이는 시각 계산하여 저장저장한 값을 읽고 눌렀다면 보이게, 보이지 않게 스타일 변경버튼에 이벤트 거는 설명은 생략. 오늘 중요한 건 사용자가 오늘하루 보지 않기 버튼을 눌렀는지, 안 눌렀는지 확인하는 것이다.적당한 저장 장소 찾기HTTP, 보통 볼 수 있는 웹 페이지는 상태를 저장하지 않는 stateless 프로토콜이다. 주소를 입력해 페이지를 접속하면 서버는 언제나 동일하게 똑같은 html 정보를 브라우저로 보내 준다.다시 말하자면.. 최적화 2022.04.04 서브셋팅을 이용해 웹폰트 경량화 하기 서브셋 폰트란? 웹폰트를 경량화할 때 보통 원하는 문자 글리프만 남기고 나머지 데이터는 삭제하는 방법을 이용한다. 이걸 서브셋폰트, 폰트 서브셋팅이라고 부른다. 필요한 글자만 남기고 나머지는 다 삭제하기 때문에 만약 페이지에서 이 삭제된 글자를 출력하려 하면 제대로 출력할 수 없다. 보통 인터넷 상에서 변환된 웹폰트 파일을 다운로드 하여 바로 사용하는 경우 가끔 특수문자나 몇몇개의 글자가 보이지 않는 경우가 가끔 있다. 이럴 때에는 원본 폰트에서 서브셋 폰트를 직접 만들어 해결하면 된다. 서브셋팅으로 웹폰트 경량화 하기 변환 전 확인 사항 1. 이용자가 서비스에서 직접 입력하는 것인지 확인해본다. 이용자가 직접 입력하는 서비스라면 글자를 작성하면서 자주 쓰이지 않는 글자를 입력하게 된다. 특히 종성이 ㄱ.. 구현 2022.02.11 카카오 링크 API로 카카오톡 공유하기 현재 웹 페이지의 내용을 카카오톡으로 공유할 수 있는 카카오 링크 API 사용법에 대해 알아봅시다. 개요 웬만한 홈페이지에는 다 들어가있는 공유기능. API 이용이 익숙하지 않으면 무슨 소리인지 모르겠고 헤매기 십상이다. 혹시나 도움이 될까 해서 작성해본다. 관련 문서 링크 모음 카카오 링크 api sdk 다운로드 페이지 네임스페이스 안내 페이지 데모 페이지 카카오 API에서 제공하는 기능이 너무 많아 헷갈릴 수 있는데, 오늘 다룰 부분은 어플 등이 아니라 일반 홈페이지에서 사용할 것으로 Kakao SDK for JavaScript에서 제공하는 기능 중 카카오 메시지 > 카카오링크(JavaScript)를 이용할 것이다. 요렇게 진행해보려 한다. 카카오 개발자 사이트에서 카카오 링크를 위해 애플리케이션을 .. 구현 2021.12.17 swiperjs 슬라이더 기본 사용법 알아보기 swiperjs 웹사이트에 기본적으로 들어가는 슬라이더. 흔하게 쓰이는 기능인만큼 슬라이더 플러그인도 엄청나게 많다. 오늘은 그 중에서 swiperjs를 소개 하려 한다. 실제로 사용하면서 초보 시절에 헷갈렸던 부분이나 최근 새로 알게 된 팁들까지 최대한 자세하게 작성했다. swiperjs 장점 많고 많은 슬라이더 중에서 swiper를 사용하게 된 이유는 아래와 같다. 많은 예시 및 자세한 api 안내글 → 혼자서 배우기 좋음 사용하는 사람 많음 → 자료 찾기 쉬움 다양한 기능 지원 → 커스텀하여 사용하기 편리함 vue, reactjs 프레임워크용 슬라이더 지원 → 한 번 배워두면 여기저기 사용하기 좋음 자, 이렇게 장점이 많은 슬라이더, 어떻게 쓰는 건지 한번 알아나 봅시다. 01. GET STARTE.. 구현 2021.12.06 자바스크립트로 달력 만들기 오늘의 만들어볼까요? 자바스크립트의 date객체를 이용해 달력을 만들어보자. 만들기 조건 table이 아니라 flex 레이아웃을 이용 클래스를 활용해 css로 스타일 지정 달력은 월요일부터 시작 이전달의 월요일부터 마지막 날까지 표기 다음 달의 1일부터 일요일까지 표기 선택자 등등은 JQuery 이용 1. 날짜 가져오기 날짜 정보를 가져오기 위해서 자바스크립트의 date 객체를 이용할 예정이다. date 객체는 세계표준시(UTC) 1970년 1월 1일 00시 00분 00초를 기준으로 현재와 얼마나 시간 차가 얼마나 되는지 밀리초 단위로 나타낸다. 이 시간 차이를 조정하여 원하는 날짜를 표기할 수 있다. 기본적으로 아래와 같이 사용한다. console.log(new Date()); // 현재 날짜(로컬 기.. 구현 2021.11.25 자바스크립트로 문자메시지 보내기 문자보내기 기능 구현하기. 여기에 URI Scheme과 URI 이스케이프를 곁들인... 오늘의 주제? 문자로 공유하기 기능 개발하려고 한다. 링크를 누르면 원하는 사람을 선택하여 정해둔 메시지를 보낼 수 있게 하는 기능이다. 결론부터 말하자면 a 태그에 href 속성에 일반적인 링크 주소인 http://가 아니라 문자 메시지를 의미하는 sms:를 이용하여 간단하게 구현할 수 있다. 안드로이드 문자보내기 iOS8 이상 문자보내기 iOS8 미만 문자보내기 여기서 : 앞에 오는 문자, sms 는 URI 스킴이라고 부른다. 이게 과연 무엇을 뜻하는 걸까? 한번 정리해보려고 한다. URI 스킴(URI Scheme)이란? Uniform Resource Identifier (URI) Schemes URI : 통합 자.. 문제 해결 2021.07.06 css 애니메이션 jank 해결하기 2편 : 여백 상쇄 이전 포스팅에서 다뤄봤던 Jank 현상은 앞서 말했던 방법으로 해결 가능하다. 그러나 더 간단한 방법이 있었으니... jank 현상이 일어났던 진짜 원인은 다른 데 있었다. 결론 결론 먼저 말하자면 여백 상쇄 현상을 제거하니 기존 코드에서도 jank가 발생하지 않았다. ...그런데 여백상쇄가 무엇일까? 이번에도 어렵게 돌아가기 스타트 margin collapse (마진 상쇄, 여백상쇄) margin collapse(이하 여백 상쇄)란, 수직으로 맞닿은 블록의 마진은 가장 큰 값으로 수렴한다는 뜻이다. 말이 더 어려운 것 같은데, 그림으로 살펴보면 다음과 같다. 위의 예시는 형제끼리 맞닿아 있을 때를 나타낸 것이고, 부모 자식 간에도 여백 상쇄가 일어난다. 부모와 자식이 맞닿아 있을 때에는 조금 특이한 현.. 문제 해결 2021.06.24 css 애니메이션 버벅거림(jank)해결하기 1편 오늘의 문제 내가 한땀한땀 예쁘게 만든 애니메이션... 코드는 문제 없는데, 실제 화면에서는 왜 덜덜덜거릴까? See the Pen jank-animation-before by ylem76 (@ylem76) on CodePen. 후후... 임베드한 코드펜에서는 왜 멀쩡해보일까? ^^... 이런 걸 뭐라고 하나요? css를 이용해 애니메이션을 구현하다보면 예상치 못하게 덜덜덜 거리는 걸 볼 수 있다. 이런 문제를 두고 쟁크(jank)라고 하고, 브라우저 렌더링 단계 중 리플로우(레이아웃)와 관계가 있기 때문에 리플로우라고 검색해도 관련 내용을 찾을 수 있다. 원인 화면 주사율 스크린 기기는 1초에 화면을 60번씩 그린다. (화면주사율이 60Hz이라는 뜻은 이걸 말한다.) 스크린 기기는 1초에 60번을 그리.. 이전 1 2 다음