본문 바로가기
728x90
반응형

coding/etc38

[vs code] 비주얼 스튜디오 코드 html 자동완성 해보자 안녕하세요. 개자이너 씸플레이입니다. html 기본 구조를 자동완성으로 불러와보겠습니다. 1. 새 index.html 파일 여기 아무것도 안 쓴 index.html 파일이 있습니다. 이제 본격적으로 코딩을 시작해 볼까 하는데 초보자라면 아직은 어색한 기본 구조가 갑자기 잘 떠오르지 않을 것이고, 경험자라면 사실 매번 같은 코드를 적는 것도 귀찮습니다. 이럴 때 에디터 프로그램의 유용함이 빛을 발휘합니다. html 자동완성을 이용해 봅시다. 2. ! + Tab !(느낌표)를 누르면 아래로 뭔가 잔뜩 뜨는데 신경 쓰지 마시고 Tab키를 눌러줍니다. html5 기본 구조가 자동완성으로 입력되는 것을 볼 수 있습니다. 얼마나 편한지 감동이 다 몰려옵니다. 반응형 작업에 필요한 뷰포트(viewport)도 잊지 않.. 2020. 11. 21.
[vs code] 비주얼 스튜디오 코드 wrap! 래핑! 감싸기를 해보자 안녕하세요. 개자이너 씸플레이입니다. 랩은 음식을 먹고 위에 씌우는 그 랩과 같은 단어입니다. 래핑 역시 같은 의미로 음식을 랩으로 포장해준다는 뜻이죠. 코딩에서의 래핑도 같은 의미입니다. 그러니 래핑이라고 하면 어떤 코드를 포장해준다고 생각하시면 됩니다. vs code에서 단축키를 이용해 래핑을 해보겠습니다. 1. 모든 명령어 보기 래핑 할 코드를 블럭지정 해줍니다. 그냥 주르륵 드래그로 잡아주시면 됩니다. Ctrl + Shift + P 단축키를 누르면 모든 명령어 보기라는 창이 뜹니다. 여기서 검색해주시면 됩니다. 최근에 사용한 적이 있어서 이미 뜨기는 하는데 같이 검색해보겠습니다. 2. wrap wrap이라고 검색하면 Emmet: 약어로 래핑이라는 명령어가 나올 겁니다. 최근에 사용한 항목이라 맨 .. 2020. 11. 19.
[vs code] 비주얼 스튜디오 코드 화면 분할을 해보자 안녕하세요. 개자이너 씸플레이입니다. 비주얼 스튜디오 코드에서 화면 분할을 해보겠습니다. 1. 분할하기 가장 간편한 방법입니다. 현재 코드를 작성하는 파일의 탭에서 오른쪽 클릭을 한 뒤 분할하고 싶은 영역을 클릭해줍니다. 위 아래 왼쪽 오른쪽이 있는데 오른쪽을 선택해보겠습니다. 오른쪽에 분할을 눌렀던 창이 하나 더 생기는 것을 볼 수 있습니다. 어느 위치에 분할하는지 정해진 것은 없습니다. 그냥 자신이 편한 분할 화면을 사용하시면 됩니다. 파일 이름 옆에 X 버튼을 누르면 분할된 화면을 닫을 수 있습니다. 2. 단축키 사용 단축키가 있다면 단축키를 사용하는 것이 인지상정! 화면 분할의 단축키는 Ctrl + \(역슬래시)입니다. 좌우로 분할하는 단축키입니다. 수직 분할은 아래 표를 참고 바랍니다. 이름 단.. 2020. 11. 18.
[vs code] 비주얼 스튜디오 코드 단축키를 검색해보자 안녕하세요. 개자이너 씸플레이입니다. 비주얼 스튜디오 코드에서 단축키를 검색해보겠습니다. 1. 바로 가기 키 vs code를 열어서 파일 > 기본 설정 > 바로 가기 키를 선택해줍니다. 단축키는 Ctrl + K Ctrl + S 입니다. 이 단축키가 조금 생소하실 텐데 어떻게 사용하는지 바로 보여드리겠습니다. 먼저 Ctrl + K 를 누르고 기다립니다. 아래에 메세지가 뜨는데 둘째 키를 잠시 기다렸다가 누르라고 알려줍니다. 키보드에서 잠시 손을 떼었다가 둘째 키인 Ctrl + S 를 마저 눌러줍니다. 두 개의 단축키를 이용해 바로가기 키를 실행시킨 모습입니다. 아래 메세지를 잘 보고 해 주시면 간편하게 열 수 있습니다. 이렇게 바로가기 키를 열어 비주얼 스튜디오 코드의 단축키를 확인해 볼 수 있습니다. 2.. 2020. 11. 16.
[Python] 파이썬 여러줄 주석을 만들어보자 안녕하세요. 개자이너 씸플레이입니다. 파이썬에서 여러 줄 주석을 만들어보겠습니다. [한 줄 주석] [coding/etc] - [Python] 파이썬 주석 처리 하기 1. 여러줄 주석 바로 여러줄 주석 화면을 살펴보겠습니다. 여러줄 주석을 처리하는 방법은 2가지가 있습니다. 1번째 방법은 작은따옴표입니다. '''(작은따옴표 3개)만 있다면 여러 줄 주석처리를 할 수 있습니다. ''' 여기는 주석 처리 ''' 이렇게 따옴표 안쪽의 글은 주석처리가 됩니다. 2번째 방법은 큰따옴표입니다. """(큰따옴표 3개)를 이용해서 동일한 방법으로 주석처리를 할 수 있습니다. """ 여기도 주석 처리 """ 작은따옴표랑 마찬가지로 따옴표 안쪽은 주석 처리가 됩니다. 2. 실행 주석 처리가 잘 되었는지 Run을 통해 확인해.. 2020. 11. 9.
[Python] 파이썬 주석 처리 하기 안녕하세요. 개자이너 씸플레이입니다. 파이썬에서 한 줄 주석 처리를 해보겠습니다. 주석은 사전적 정의로 낱말이나 문장의 뜻을 쉽게 풀이함. 또는 그런 글을 말합니다. 코딩에 익숙하신 분들은 주석이 왜 필요한지 알 수 있지만 처음 접하시면 갑자기 왜 주석이 필요하지? 하는 의문이 드실 겁니다. 코드 중간에 넣는 주석은 메모로도 활용이 가능합니다. 주석 처리를 하면 실제 실행되는 화면에서는 나오지 않으니 한글로 적어도 오류가 발생하지 않고 말입니다. 메모로도 활용 가능하지만, 여러 사람들과 협업일 경우 주석을 이용해 내가 짠 코드를 설명하는 용도로도 쓰입니다. 코드는 한눈에 파악하기 힘들지만 그 코드 주변에 주석으로 이건 이러이러한 코드입니다!라고 적혀있으면 자신이 짠 코드가 아니어도 알아보기 쉽겠죠. 1... 2020. 11. 8.
[Python] 파이참 설치 해보자 안녕하세요. 개자이너 씸플레이입니다. 파이썬 통합개발환경인 파이참을 설치해보겠습니다. 통합개발환경이란 코딩, 디버그, 컴파일, 배포 등을 한 번에 처리할 수 있는 프로그램을 말합니다. 하지만 이렇게 말하면 무슨 말이지 하고 감이 오지 않으실 겁니다. 지금은 너무 이해하려고 애쓰지 말고 그냥 이것저것 가능한 종합세트 정도로 이해해주셔도 괜찮습니다. 통합개발환경이기 때문에 에디터의 기능, 즉 코딩을 할 수 있으니 익숙한 에디터의 기능부터 사용하며 점차 다른 것들도 사용해주시면 됩니다. [먼저 보면 좋은 포스팅] [coding/etc] - [Python] 파이썬 설치하기 1. 파이참 실행파일 다운 https://www.jetbrains.com/ko-kr/pycharm/ PyCharm: JetBrains가 만든.. 2020. 11. 6.
[Python] 파이썬 설치하기 안녕하세요. 개자이너 씸플레이입니다. 두근두근 파이썬의 첫걸음 Python interpreter을 설치해보겠습니다. 1. Python interpreter 파이썬은 비단뱀이라는 뜻으로 아이콘이 뱀 두 마리처럼 생겼습니다. 유래가 뱀이랑 관련이 있는 것은 아니고 파이썬 제작자인 귀도 반 로섬이 좋아하는 코미디 〈Monty Python's Flying Circus〉 에서 따온 이름입니다. 코미디는 찾아보지 않았지만 뱀이 두 마리 나오나 봅니다. Python interpreter는 사람이 적은 파이썬 코드를 컴퓨터 언어로 바꿔주는 번역기랍니다. interpreter가 통역사라는 뜻이니 굉장히 직관적인 이름이랍니다. 영어라서 그렇지ㅜ 컴퓨터 언어는 영화에서도 가끔 나오는 00101000011 같은 이진법으로 이.. 2020. 11. 4.
[vs code] 비주얼 스튜디오 코드 한글 패치 하기 안녕하세요. 개자이너 씸플레이입니다. 비주얼 스튜디오 코드가 영문판이라 편하게 한글 패치를 해보려고 합니다. [비주얼 스튜디오 코드 다운로드 받기] [coding/etc] - [vs code] 비주얼 스튜디오 코드 설치하기 (무료 에디터 프로그램) 1. 확장팩 다운받아둔 비주얼 스튜디오 코드를 열어줍니다. 무료 에디터 프로그램은 확장팩이 있는 경우가 많은데요, 사용자에게 편의를 제공하는 기능을 다운받아 사용할 수 있습니다. 지금 다운받으려는 한글 패치처럼 좀 더 편리한 기능들이 모여있는 것을 확장팩이라고 부릅니다. 그럼 본격적으로 확장팩을 이용해보겠습니다. 왼쪽 메뉴 중 가장 아래 있는 Extensions (확장) 아이콘을 클릭합니다. 아이콘을 클릭하면 검색할 수 있는 창이 하나 뜹니다. 아래로 다양한 .. 2020. 11. 2.
반응형