VS code 단축키 명령어 팔레트(Command Palette)

VS code 단축키 중 알아두면 유용한 명령어 팔레트 단축키를 알려드립니다. 1. 명령어 팔레트 Command Palette VS code에서 명령어 팔레트(Command Palette)의 단축키는 Ctrl + Shift + P 입니다. 그 외에도 F1 키를 눌러도 명령어 팔레트를 열 수 있습니다. 명령어 팔레트는 위의 이미지처럼 명령어를 검색해서 사용할 수 있습니다. - 키워드 입력 명령어 팔레트에 찾고자 하는 키워드를 입력하면 키워드가 포함된 작업이 쭉 뜨는데 여기서 원하는 작업을 클릭하거나 선택된 상태에서 엔터를 누르면 명령어가 실행됩니다. 특정 명령어의 단축키를 모르거나 찾기 힘들어도 검색해서 찾을 수 있다는 편리함이 있습니다. 2. 명령어 팔레트 사용하기 파일 저장 VS code에서 명령어 팔..

coding/editor · 2022. 1. 28. 09:30

[css] 그림자를 넣어보자 box-shadow

안녕하세요. 개자이너 씸플레이입니다. box-shadow를 이용해 그림자를 살짝 넣어보겠습니다. 1. 그림자를 넣을 컨텐츠 준비 개인 프로젝트로 진행 중인 사이트입니다. 여기에 그림자를 살짝 넣어보겠습니다. 2. box-shadow li{ box-shadow: 5px 5px 5px rgba(0,0,0,0.55); } box-shadow를 이용해서 그림자를 넣어주시면 됩니다. 값은 순서대로 x-position y-position blur color 입니다. 여기서 x-position이란 x좌표. 즉, 가로 위치를 말합니다. 수학 시간에 좌표를 찍어보신 기억 다들 있으시죠? x는 가로 y는 세로 위치를 의미하고, px단위로 위치를 조정할 수 있습니다. 기준은 그림자를 넣는 컨텐츠가 기준입니다. color에 ..

coding/html + css · 2020. 11. 29. 08:30

[꿀정보] 게시판에서 지도 가운데 정렬 하기

가끔 게시판에 지도를 불러오면 지도만 가운데 정렬이 안될 때가 있죠? 이럴 때 간단하게 소스로 가운데 정렬을 해줄게요. 코드를 조금 다룰줄 아시는 분들은 바로 4번을 봐주세요. 1. 왼쪽정렬 된 지도 게시판 수정에 들어가서 아무리 가운데 정렬을 눌러도 이렇게 지도로 가져온것에는 가운데 정렬이 안 먹을 때가 있어요. 그렇다면 게시판에서 제공하는 에디터 말고 소스로 수정을 해줍시다. 괜찮아요 어렵지 않아요. 2. 소스보기 대부분의 게시판 작성 모드에서는 HTML 소스보기를 제공해줍니다. 티스토리도 제공해주는 것 아시죠? 보통은 맨 왼쪽 끝이나 맨 오른쪽 끝에 있어요. 지금 사용하는 게시판은 맨 왼쪽에 있네요. 저 HTML 소스 버튼을 눌러줍니다. 으악 영어다!!! 자, 진정하시고 여러분은 이 모든 글을 다 ..

tip/유용한 팁 · 2020. 10. 17. 07:30

[html] html을 대충 이해해보자

안녕하세요. 플입니다. 오늘은 html에 대해서 이해해보도록 해요 1. html html은 "Hyper Text Mark-up Language"의 약자입니다. 하지만 이렇게 말하면 너무 어렵고 무슨 소리인지 모르겠죠. html은 웹페이지를 만들 때 쓰는 언어예요. 웹페이지의 뼈대를 만드는 언어죠. 티스토리를 하다 보면 종종 만날 기회가 있죠. 완벽한 비유는 아니지만 그림으로 표현하자면 이런 느낌이랄까요. html은 스케치 css는 색칠이라고 생각하면 좀 더 이해하기 쉬우실 거예요. 약속한 구조를 지키는 규칙이 있기도 한데 이거는 우선은 넘어가도록 해요. 2. 열기 닫기 아무말 html에는 열기랑 닫기가 있어요. 위의 코드를 보면 아시겠나요? 가 여는 부분이고 가 닫는 부분이에요. 조금 더 자세히 볼까요?..

coding/html + css · 2020. 9. 29. 07:30

[brackets] 브라켓 html 자동완성

안녕하세요. 플입니다. 오늘은 브라킷에서 템플릿을 불러와볼게요. 1. 템플릿 일단 템플릿 기본 형태는 위의 사진과 같아요. 아주 간단하게 구조를 잡아주고 필요한 부분은 넣어주면 될 것 같아요. 필요하다면 언어도 한국어로 바꿔주시면 된답니다. 은근히 쓰기 귀찮은 코드인데 간편하게 쓸 수 있다는 점이 에디터 프로그램의 장점 같아요. 2. !(느낌표) 자 그럼 이제 템플릿이 뭔지 알았으니 불러와봅시다. !(느낌표)를 입력하고 탭키를 눌러주세요. 간단하죠? 이렇게 간편하게 불러올 수 있답니다. 이제 저 표시된 빈 공간에 html 코드를 짜주시면 된답니다. 그럼 이만. 총총.

coding/editor · 2020. 8. 14. 07:30