PC사용팁 Vs code 비주얼스튜디오코드 HTML

[홍돈]

Copy path 클릭 후 복사된 주소로 접속하면 로딩만 뜨고 웹사이트 접속이 안됩니다.

노트북이 wifi 연결되어 있으면 안되는건가요?

추가적으로 ports 부분에 연결된 포트가 없다고 뜨는데, 이것때문에 웹사이트 연결이 안되는걸까요?

컴퓨터 수리 & IT 전문가 민컴78 : 네이버 엑스퍼트

MinCom78

1) "Copy Path" 클릭 후 접속이 안 되는 이유

VS Code에서 **"Copy Path"**를 클릭한 후 브라우저에서 여는 경우, 파일 경로 문제로 인해 웹사이트가 제대로 표시되지 않을 수 있어요.

해결 방법:

파일 경로를 직접 브라우저 주소창에 입력해 보기

VS Code에서 "Copy Path"를 눌러 파일 경로를 복사

브라우저를 열고 file:///C:/Users/사용자이름/Desktop/index.html 같은 형식으로 직접 입력

그래도 안 되면, 파일을 다른 위치(예: 바탕화면)에 옮겨 다시 시도

주의:

"Copy Path"로 복사된 경로가 로컬 경로(file://)인지 확인해야 합니다.

http://localhost:xxxx 같은 주소가 아닌, 단순한 파일 경로라면 포트 설정과 무관하게 실행이 가능합니다.

2) "No forwarded ports" 메시지가 원인일까?

"PORTS" 탭에 No forwarded ports라고 뜨는 것은 VS Code의 원격 개발(SSH, 컨테이너 등)과 관련된 문제입니다.

HTML 파일을 단순히 실행하는 데는 필요하지 않으므로, 포트 문제는 아닙니다!

HTML 실행 방법:

Live Server 확장 프로그램 사용하기

VS Code에서 "Live Server" 확장 프로그램을 설치하고,

HTML 파일을 열고 우클릭 → "Open with Live Server" 실행하면 됩니다.

그러면 자동으로 http://127.0.0.1:5500/index.html 같은 주소로 실행돼요.

파일을 직접 브라우저에서 열기

HTML 파일을 찾아서 우클릭 → "Chrome(또는 Edge)으로 열기" 하면 됩니다.

PORTS 탭의 "포트 포워딩"은 서버를 실행할 때 필요한 기능이라, HTML 파일 실행과는 관계가 없습니다.

Live Server를 쓰면 자동으로 해결되므로 설치해서 사용해 보세요!

3) Wi-Fi 연결과 관련이 있을까?

HTML 파일을 실행하는 것 자체는 Wi-Fi 연결과 무관합니다.

하지만 Live Server 사용 시 "localhost"에서 페이지를 띄울 때 인터넷이 끊어지면 오류가 발생할 수 있음은 유의해야 해요.

Wi-Fi가 영향을 줄 수 있는 경우:

HTML에서 외부 CSS, JS (예: Bootstrap, Google Fonts) 파일을 불러올 때

인터넷 연결이 끊기면 외부 리소스가 로딩되지 않아 제대로 표시되지 않을 수 있음.

Live Server가 특정 포트를 사용 중일 때 방화벽에서 차단될 경우

방화벽이 5500 포트를 차단하고 있을 수 있음 → 방화벽에서 허용 필요.

Wi-Fi 없이도 HTML 파일 실행은 가능하므로, 외부 리소스를 확인해 보세요.

HTML 파일을 직접 브라우저에서 열어보기 (file:// 경로 확인)

Live Server 설치 후 실행 (Open with Live Server)

Wi-Fi가 문제라면 인터넷 연결 후 테스트 (외부 CSS, JS 확인)

방화벽이 Live Server(5500 포트)를 차단했는지 체크