[CSS] 3. WebStorm 초기 설정하기

안녕하세요. 개발 토끼입니다.

오늘은 웹스톰 초기 설정에 대해서 알아보겠습니다. 

어제 설치한 웹스톰을 처음 설치하시면 아래와 같은 화면이 나오게 됩니다.

- 실행 초기 화면 -

이 화면은 기존에 웹스톰 설정을 가지고 있는지 있으면 그 해당 설정대로 웹스톰을 설정할 것인지 묻는 내용입니다.

우리는 처음 웹스톰을 사용하기 때문에 그래도 OK를 클릭합니다.

- 웹스톰 스타일 지정 화면 -

이제 웹스톰의 UI 색상과 Code 에디터의 테마를 설정하는 화면입니다.

에디터가 어떻게 생겼는지 간단히 프리뷰로 한번 보시죠. 

Click to preview 를 클릭하면 아래와 같이 화면이 변화할 것입니다.

- 디폴트 코드 에디터 테마 -

저는 보통 검은색 계열이나 회색 계열로 테마를 지정합니다. 

그래서 IDE theme도 Dracula, 에디터 theme도 Dracula로 설정해보겠습니다.

그리고 OK를 눌러주세요.

- 새로운 설정 적용을 위해 웹스톰을 재시작해야 한답니다 -

Yes를 클릭해주세요

- 웹스톰 다시 시작 중 -

- 웹 스톰 초기 화면 입니다 -

이렇게 첫 테마 설정을 끝나게 되면 더이상 앞서 했던 설정 화면들은 나오지 않게 됩니다.

얼른 코드를 입력하면서 공부하고 싶으시죠? ㅎㅎㅎ

아직 설정을 하나 더 해야 합니다.

그것은 바로 폰트!!

폰트 설정 방법은 웹스톰 초기화면에서 Configure이라는 버튼을 클릭하면 

펼침 메뉴가 나오게 됩니다.

이때 Settings 를 클릭해주세요.

- 웹스톰 설정 화면 - 

앞서 했던 테마 설정도 필요에 따라서 바꾸고 싶으면 이 설정화면에서 바꿀 수 있습니다.

일단 저희는 폰트를 바꿔야 하기 때문에 폰트를 바꿔봅시다.

Settings 왼쪽 메뉴들을 볼까요?

- Editor를 클릭해주세요 - 

그 다음 세부 항목에서 Colors & Fonts를 클릭하시면 또다른 세부 항목이 나오게 됩니다. 

거기서 첫번째, Font를 클릭하세요.

그러면 위와 같은 화면이 나오게 됩니다. 

여기서 오른쪽 패널을 보면 Primary font 부분이 있는 펼침 메뉴를 클릭하면 웹스톰에서 사용할 수있는 폰트 목록이 나오게 됩니다.

저는 Consolas를 선호 하므로  Consolas를 선택하고 옆에 글씨크기(Size)를 14로 설정하도록 하겠습니다. 

그리고 OK 를 클릭하시면 모든 설정이 끝납니다. 

프로그래밍을 배워보려고 하면 이러한 설정이 많은 데 설정하다 보면 엄청 힘드실 겁니다.

하지만, 이건 설정해도 되고 안해도 되는 사안이라 나중에 웹스톰이 익숙해지시면 스스로 설정하시면 됩니다.

오늘은 여기까지 하고 강좌를 마무리 하겠습니다. 

다음 시간엔 진정한 CSS 강좌를 시작하겠습니다.

긴글 읽어주셔서 감사합니다.