inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

웹 애니메이션의 새로운 표준, Web Animations API

SVG에 Transition 적용하기 2

vscode에서 svg파일 불러오기 질문

3763

작성자 없음

작성한 질문수 0

0

선생님 안녕하세요 svg를 vscode에서 불러오기를 했는데, vscode에서 이미지로 열립니다 소스로 안열리는데 소스로 열리게 하는법이 있을까요?

HTML/CSS javascript 인터랙티브-웹 frontend web-animations-api

답변 1

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.
vcxzz33님, Visual Studio Code에서 SVG 파일을 이미지로 여는 대신 소스로 열고 싶으신 경우, 다음과 같은 방법을 시도해 보세요:

  1. 기본 편집기 설정 변경:

    • Visual Studio Code가 SVG 파일을 기본적으로 이미지 뷰어로 여는 경우가 있습니다. 이를 해결하기 위해, 파일을 마우스 오른쪽 버튼으로 클릭하고, “열기 방식”을 선택한 다음 “텍스트 편집기”로 선택합니다.
  2. 확장 프로그램 사용:

    • SVG Viewer와 같은 확장 프로그램을 설치하여 SVG 파일을 이미지와 소스로 동시에 확인할 수 있을 수 있습니다.
  3. 파일 열기 설정 수정:

    • 특정 파일 유형을 열 때 사용하는 기본 편집기를 설정할 수 있습니다. “settings.json”에서 다음 설정을 추가하세요:
      
      "workbench.editorAssociations": {
      "*.svg": "default"
      }
      

      이 설정은 SVG 파일을 텍스트 형식으로 열리도록 강제합니다.

이러한 방법을 통해 SVG 파일을 Visual Studio Code에서 소스로 열 수 있습니다. 추가적인 설정으로 불편함을 줄일 수 있을 것입니다.

저는 질문자님의 이해를 돕고자 기존 답변을 참고하여 유사한 해결책을 제안하였습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

Json 플러그인 사용시 variable collection 없음

0

12

1

배리어블 목록 없음

0

21

3

Token 등록 방법 문의

0

18

1

3강 질문

0

15

1

스크롤 이미지 영역 넘어갈시 가로로 스크롤이 안되여

0

133

1

모바일 화면 최적화 방법 질문드립니다!

0

229

1

key.svg 이미지

1

209

1

Vue.js 적용 방법

0

278

1

강사님 vscode 폰트와 색상이 뭔가요

0

648

2

2:20분 이해가 가지 않습니다.

0

284

1

web animation api를 통한 apple page

0

490

2

리액트에서 scroll-timeline.js 불러오는 법

0

726

1

특정 시점에 자바스크립트 호출은 어려울까요?

0

320

2

section04 - 각각의 객체에 개별 애니메이션 적용하기

0

461

3

scroll-timeline.js 를 사용한 ScrollTimeline 실행 시, easing 효과?

0

736

2

scroll-timeline.js 파일

0

544

1

선생님 Section4에 제목 오타난것같습니다!

0

389

1

keyframeEffect를 찾을 수 없다고 나와요

0

504

1

제이쿼리 animate()와는 다른걸까요?

0

402

1

scroll-timeline.js 파일을 cdn으로 불러 올 수 없을까요??

0

559

1

넓이를 %로 적용하긴 어려울까요?

0

434

2

scrollTimeline polyfill 에 관해서

0

812

1

아직 강의를 보진 않았는데

2

575

1

이 플러그인은 지원되지 않습니다. 어떻게 해결해야 되나요?

0

1151

2