2021. 10. 14. 22:01ㆍ나만의 웹사이트 만들기/VScode
비전공자로서 혹은 디자이너로서 코딩을 해내기란 쉽지 않을 것이라 예상할 것입니다. 처음 "Hello world"를 썼을 때만 기억이 나는 사람들이 많을거라 생각합니다. 코딩을 제대로 공부하지 않아 그럴 수도 있지만 누구라도 처음 컴퓨터 언어 즉, 컴퓨터의 세계를 알게 되었을 때 느끼는 새로움이란 잊지 못해서일 겁니다. 어떤 개발자 분은 자신의 인생이 컴퓨터 언어를 알기 전과 후로 나뉜다고 합니다.
저 또한 그랬고 지금부터 꾸준히 컴퓨터의 세계를 보여드리고자 합니다. 디자이너 입장이라 눈에 보이는 결과물을 중시하기 때문에 웹페이지를 만드는 과정을 하나씩 남기겠습니다. 단순 기록용이지만 독자들에게 도움이 될 수 있었으면 좋겠습니다.
참고로 제가 코딩을 배우고 참고한 서적은 "Do it! 인터랙티브 웹 페이지 만들기" 입니다. 더 자세한 설명은 서적과 유튜브 영상을 통해 알아보실 수 있습니다.
코딩을 왜 해야하는지 목표부터 설정하자.
"누구는 코딩을 잘해서 연봉을 더 받는데~" 라는 소리가 나올 정도로 코딩은 이제 필수요소가 되어버렸습니다. 그렇다고 무작정 뭔지도 모르고 파이썬을 많이 한다고 파이썬을 배우는 건 어리석은 짓이라 생각합니다. 코딩이 우리 생활에 녹아있는 것처럼 자신의 직업이나 자기계발 혹은 사업에 필요한 코딩공부가 있을 것입니다. 저 같은 경우는 IT분야 디자인을 전공한 사람으로서 퍼스널 브랜드를 보여주기 위해선 웹 페이지 하나는 스스로 만들어야 한다 생각했습니다. 제각기 가지고 있는 목표는 다를 것이라 생각합니다. 하지만 입문자라면, 컴퓨터 세상이 처음이라면, 눈에 보이는 영역부터 다루는 것이 쉽고 성취감을 느끼기 좋을 것입니다. 웹 페이지를 만드는 것이 첫 단추가 될 수 있는 셈이죠.
준비 & 세팅
01. 준비물
- 웹 브라우저: 크롬 (chrome) https://www.google.com/intl/ko/chrome/
- 웹 에디터: 비주얼 스튜디오 코드 (visual studio code) https://visualstudio.microsoft.com/ko/downloads/
크롬 외에도 웹 브라우저는 엣지, 웨일, 사파리, 파이어폭스 등 여러개 있지만 최근 점유율이 높아지고 있고 개발자 도구가 유용하게 쓰이기에 크롬을 사용하기로 합니다.
웹 에디터 또한 노트패드++, 아톰, 브라켓, 에디트플러스 등이 있지만 실무에서는 비주얼 스튜디오 코드가 널리 쓰인다고 합니다.
02. 비주얼 스튜디오 코드 세팅하기
- 비주얼 스튜디오 코드를 연다.
- 필요한 확장 기능을 설치한다.
시작하기 앞서 작업 속도를 높여 줄 수 있도록 확장 기능을 설치하겠습니다. 왼쪽 끝에서 5번째 아이콘을 누르면 확장 기능을 검색해서 install할 수 있습니다.
확장 기능 리스트
- Auto Rename Tag: 여는 태그의 이름을 변경하면 닫는 태그의 이름도 바뀝니다.
- CSS Navigation: 특정 HTML 영역에서 ctrl + 마우스 왼쪽 버튼을 누르면 연결된 CSS를 확인할 수 있습니다.
- Font Awesome Auto-xomplete & Preview: 폰트 어썸 아이콘을 실시간으로 미리 보여줍니다.
- html tag wrapper: 그룹할 태그를 드래그해 ctrl + i 를 누르면 상위 태그를 자동으로 감싸 줍니다.
- Live Server: 웹 서버를 통해 결과물을 브라우저에 실시간으로 보여줍니다.
-Power Mode: 코드를 입력할 때 특수효과가 나오는 재미요소를 줍니다.
- Prettier - Code formatter: 줄 바꿈 등을 자동 정렬해 줍니다.
- vscode-icons: 에디터의 내비게이션 아이콘 모양을 변경해줍니다.
03. 확장 기능 설정하기
- 이미지에 나온 순서대로 클릭합니다.
- 그러면 창이 하나 뜨는데 이 카페로 들어가셔서 코드를 복사해 붙여넣기 해줍니다.
이렇게 하면 일일이 설정할 필요없이 한 번에 끝낼 수 있습니다.
참고로 카페는 제가 스터디 기록하고 있는 "Do it! 인터랙티브 웹 페이지 만들기" 책을 만드신 분의 카페입니다.
04. 시작하기
본격적으로 시작하기 위해 파일을 만들어보겠습니다.
- 상단의 File > Open Folder 선택해 창이 열리면 폴더를 새로 만들고 (이름은 상관없습니다) 선택해 열어줍니다.
- Explorer 창에서 마우스 오른쪽 클릭을 하고 New File을 선택해서 파일 하나를 새로 만들어줍니다.
- 파일 이름을 index.html 로 지어줍니다.
- 그림처럼 빈문서 창에 html 을 치면 밑에 자동완성 기능으로 html : 5 가 나타나는데 이것을 선택해줍니다.
- 자동으로 HTML 코드가 입력됩니다.
한국어를 입력할 것이므로 lag="en" 을 lang="ko"로 변경해줍니다.
이렇게 기본적인 준비와 세팅은 끝났습니다. 알 수 없는 코드들이 난무하지만 함께 이 난관을 헤쳐나가봅시다!
관련 정보 출처: 『Do it! 인터랙티브 웹 페이지 만들기』
책의 내용이 입문자들을 위해 설명이 쉽게 써져 있어서 좋은거 같습니다. 링크로 들어가시면 도서 정보를 더 자세히 확인할 수 있습니다.
※ 관련 내용 포스팅은 상업적 목적이 아닌, 단순 공부 기록 목적으로 사용됩니다.