Prerequisites
Tutorial
11 min follow •
Section 1
CodeSandbox 가입하기
CodeSandbox 가입하기
Modern HTML and CSS Basics 코스에서는 CodeSandbox 를 사용해 웹사이트를 만들어 봅니다
회원 가입과, 프로젝트 시작을 해 봅니다
Step 2
Sign in 버튼을 찾아, 편한 방법을 사용해 회원가입을 완료 합니다.
Section 2
CodeSandbox 프로젝트 시작
CodeSandbox 프로젝트 시작
다양한 CodeSandbox의 템플릿 중 HTML, CSS 를 배우기에 적합한 템플릿을 사용해
새로운 프로젝트를 만듭니다
Step 1
CodeSandbox 의 Home 탭에서 'New Sandbox' 버튼을 클릭합니다
Step 2
클릭하면 나타나는 템플릿 중에서 'static' 템플릿을 선택하여
새로운 프로젝트 생성을 완료합니다.
템플릿을 사용하여 만들어진 프로젝트에서는
좌측에 편집할 수 있는 코드들, 우측에는 이 코드들이 만든 웹사이트가 나타납니다.
Section 3
CodeSandbox 설정
CodeSandbox 설정
CodeSandbox 는 워드와 같은 하나의 코드 전용 편집 도구 입니다.
입맞에 맞게 도구에 대한 설정을 해 봅니다.
Step 1
CodeSandbox 좌측 상단 메뉴에서
[File] - [Preferences] - [Settings] 를 클릭하여 설정 창에 들어갑니다
👉 [Cmd + ,] 단축키를 사용하여 설정 창에 빠르게 접근 할 수 도 있습니다.
Step 2
설정 검색 창에, 'theme' 를 검색하여 'Workbench: Color Theme' 설정을 찾은 후
원하는 테마를 선택하여 에디터의 모양을 바꾸어 줍니다
여기서는 Default Dark+ 라는 테마를 선택 하였습니다
Step 3
다시 설정 검색 창에, 'wrap' 이라고 검색하여 'Editor: Word Wrap' 설정을
off 에서 on 으로 바꾸어 줍니다.
이 설정은 코드들을 스크롤 없이 한눈에 보여주게 합니다.