'coding' 카테고리의 글 목록 (2 Page)

코딩의 시작 에디터 프로그램 설치 (VS Code)

코딩할 때 주로 사용하는 에디터 프로그램비주얼 스튜디오코드(VS Code)를 설치해보겠습니다. 1. VS Code 설치파일 다운 https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, WindowsVisual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.co..

coding/개발 팁 · 2024. 11. 27. 11:04

[비주얼 스튜디오 코드] 정렬 단축키

비주얼 스튜디오 코드의 정렬 단축키를 알아봅시다. 1. 코드 정렬 단축키 ① 맞지 않는 정렬 일부러 정렬을 좀 망가뜨려놨습니다. 단축키를 이용해 이 정렬을 맞춰볼게요. 보통 코드를 복사해 올 때 많이 정렬이 깨져요. 하나씩 맞추려면 오래걸리니 단축키를 사용하는 것이 좋아요. - ② 전체 선택 단축키 [Ctrl + A]를 눌러 일단 코드 전체 선택을 해줍니다. ③ 코드 정렬 단축키 [Ctrl + K + F]를 누르면 한 번에 정렬됩니다. 중요한 부분은 꼭 순서대로 누르셔야 합니다. Ctrl + F 가 찾기 단축키라 K를 꼭 먼저 눌러주세요. 2. 단축키 모음 https://ssimplay.tistory.com/736 VS code 자주쓰는 단축키 모음 제가 보려고 만든 VS code 단축키 모음입니다. 1..

coding/editor · 2023. 8. 10. 07:30

[CSS] 배경 고정하기

css를 이용해 배경을 고정해 보겠습니다. 1. 구현 화면 확인 ① 구현 화면 배경에 귀여운 멍무리가 고정되어 있고 스크롤이 내려가도 따라오지 않는 모습이 보이시나요? 기업에서도 종종 사용하는 기법인데 이 기능을 구현해 보겠습니다. - 2. background-attachment: fixed; div{ background-attachment: fixed; } ① background-attachment [background-attachment: fixed;]를 적용해 주시면 배경화면이 고정됩니다. 기본값은 scroll이에요. https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment background-attachment - CSS: Ca..

coding/html + css · 2023. 8. 8. 07:30

[CSS] 메뉴 상단에 고정하기 (sticky)

스크롤을 내려도 헤더가 상단에 고정되어 있게 만들어봅시다. 1. 구현 모습 확인 ① 구현 화면 예시 영상을 가져왔습니다. 위의 영상처럼 스크롤을 내려도 헤더가 고정되어 있게 구현할 것입니다. - 2. position: sticky header{ position: sticky; } ① sticky 방법은 간단합니다. 태그에 sticky만 넣어주시면 됩니다. [position:sticky;] 입니다. header{ position:sticky; top:0; } ② top 설정 혹시 sticky를 넣었는데 여전히 헤더가 상단에 있지 않고 올라가나요? 중요한 것이 하나 남았습니다. 바로 위치를 설정해 주는 것입니다. 다른 position 속성과 마찬가지로 top 위치를 설정해 주시면 그 위치에 붙어있습니다. 주..

coding/html + css · 2023. 8. 4. 07:30

[자바스크립트] swiper 라이브러리 적용해보자

자바스크립트 swiper 라이브러리를 적용해 봅시다. 1. Swiper 라이브러리 연결 https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com ① Swiper 사이트 접속 구글에 [swiper]를 검색하시거나 위의 링크로 접속해 주세요. - ② Get Started 메인 페이지에서 [Get Started] 버튼을 클릭합니다. ③ CDN 왼쪽 메뉴에서 [Use Swiper from CDN] 메뉴를 클릭하면 CDN..

coding/JavaScript · 2023. 7. 26. 07:30

coding 265