coding 259
프론트엔드 개발자를 위한 vs code 단축키 - 아래 빈 줄 생성
프론트엔드 개발자를 위한 vs code 단축키 중 하나입니다. 코드 바로 아래 빈 줄 생성할 때 커서를 맨 끝으로 이동하시나요? 이 포스팅을 끝까지 봐주신다면 아래 빈 줄 생성 시 단축키로 간편하게 만들 수 있을 것입니다. 프론트엔드 개발자를 위한 공부 함께해요! 1. 아래 빈 줄 생성 단축키 커서 아래 빈 줄 생성 ① 커서를 아무 데나 둔다. 커서를 오른쪽 끝으로 두고 엔터를 눌러야 아래쪽에 빈 줄이 생겼었는데, 저희는 이런 수고로움을 줄이고자 단축키를 사용할 것입니다. 그러니 커서를 빈 줄을 생성하고 싶은 바로 윗 줄 아무 곳에나 둡니다. ② Ctrl + Enter 아래 빈 줄 생성 단축키는 Ctrl + Enter입니다. ③ 아래 빈 줄 생성 확인 단축키를 이용해 아래 빈 줄이 생성되었는지 확인합니다..
여러줄 주석 단축키 - vs code
vs code에서 쓰는 여러 줄 주석 단축키를 알아봅시다. 1. 여러 줄 주석 여러 줄 주석 ① 여러 줄 주석 언어마다 주석 처리하는 방식이 조금씩 다르지만 여러 줄 주석이라 하면 위의 사진처럼 위아래로 한 번씩 문단을 묶어서 주석처리하는 방식을 의미합니다. 단축키를 이용하는 이유는 어떤 언어에서도 단축키를 사용하면 자동으로 여러 줄 주석 처리를 해주기 때문입니다. ② 자바스크립트 여러 줄 주석 위의 이미지는 자바스크립트입니다. 자바스크립트에서 여러줄 주석은 /* 여기에 쓰면 주석 처리 */ 이런 형태로 씁니다. 이제 단축키로 주석 처리를 해보겠습니다. 2. 여러줄 주석 단축키 여러 줄 주석 단축키 사용 ① 드래그 먼저 여러 줄 주석 처리하고 싶은 부분을 블록 처리 합니다. ② 여러 줄 주석 단축키 여러..
카카오톡 쿠키 삭제 - og 이미지
카카오톡 쿠키 삭제. og 이미지 쿠키 삭제에 관련된 내용을 소개해드리겠습니다. 이 포스트를 끝까지 읽어주신 분들은 카카오톡 쿠키 삭제를 어떻게 해야 할지 알 수 있을 거예요. 카카오톡 쿠키 삭제의 정보가 필요하시면 전체 다 읽어주세요. 이제 아래에서 설명해드리겠습니다. 1. 카카오톡 쿠키 삭제 이유 카카오톡 공유 이미지 ① 카카오톡 공유 화면 확인 카카오톡으로 자신이 만든 웹사이트를 공유해봅니다. og 태그를 잘 적어주었다면 이미지와 설명글이 잘 나오는 것을 알 수 있어요. 그런데 여기서 수정을 한다면 카카오톡에 바로 적용이 될까요? 아니요. 아마 이전 이미지와 설명글이 그대로 나올 것입니다. 카카오톡 쿠키 삭제를 하지 않으면 이전에 있던 쿠키가 그대로 남아 수정된 모습이 나오지 않을 것입니다. 이유를..
PyScript - html에서 python 실행하기
PyScript가 나왔다는핫한 소식을 듣고공유하기 위해서 포스팅해봅니다. 1. PyScript PyScript 맛보기 PyScript는 html에서 사용할 수 있는 만큼 웹에서 자바스크립트 대신 사용할 수 있다는 놀라운 장점이 있습니다. 이제 PyScript를 사용하기 위해 파이썬을 열심히 공부해야겠네요.. 자세한 설명은 영상이 편하실 것 같아서 같이 첨부합니다! 노마드 코더님의 다른 영상들도 추천해요. - 하지만 PyScript는 아직은 신생 기능인만큼 널리 사용하기에는 조금 어려워요. 많이 테스트를 해보고 복잡한 코드도 써보고 해야 할 것 같습니다. 그렇지만 이제 웹에서도 자바스크립트가 아니라 파이썬을 사용할 수 있으니 다양하고 많은 기능들이 나올 거 같아서 기대가 되네요. 저는 일단 파이썬부터 공부..
CSS box-shadow 그림자로 음각 효과 내기
css box-shadow를 이용해 음각 효과를 내보겠습니다. 1. CSS box-shadow div{ box-shadow:inset 3px 3px 3px #333; } inset box-shadow 속성에서 inset을 설정해주면 그림자가 안쪽에 생기는데 이것이 들어간 모양으로 보입니다. - box-shadow 속성 값 숫자로 된 속성 값은 순서대로 세로, 가로, 흐리게 값입니다. 흐리게 하는 부분은 생략이 가능하지만 세로와 가로 값은 꼭 적어주셔야 합니다. 마지막으로 색상 코드를 적으면 box-shadow를 사용할 수 있습니다. - 2. box-shadow 예제 See the Pen box-shadow by ssimplay (@ssimplay) on CodePen. codepen에서 보기 그림자가 어..
