안녕하세요! Live Server 익스텐션을 직접 개발한 것이 아니기 때문에 오류가 발생하는 원인을 파악하기 어려우나, 알려진 바에 의하면<ul><li>폴더명이나 파일명에 공백 또는 영어 외 글자가 포함된 경우</li><li>파일명 첫 글자에 마침표(.)가 포함된 경우</li><li>설정이나 설치 상의 문제 또는 익스텐션 버그</li></ul>위 3가지 사례가 대표적입니다.폴더명, 파일명 수정 후에도 동일한 문제가 다시 발생한다면 VScode와 Live Server 익스텐션을 삭제 후 재설치하여 실행 해 보세요 :)

vscode live server 기동관련

안녕하세요 용민님!싸이월드 만들기 5탄의 해당 부분에서 말씀드린 내용은, <code><div class="navigation"></div></code> 부분이 <img src="https://cdn.inflearn.com/public/comments/ded458d7-14bb-4fcb-8041-f0f8f4653942/스크린샷 2022-12-28 15.09.32.png" alt="image" title="image">이러한 형태로 보여야 하나,별도로 정렬 옵션을 부여하지 않게 될 경우<img src="https://cdn.inflearn.com/public/comments/3323e061-1fdd-4032-a28b-7860698d66cd/스크린샷 2022-12-28 15.09.44.png" alt="image" title="image">위 사진과 같이 보이게 된다는 것을 말씀 드렸던 것입니다! 위쪽으로 치우쳐 보인다는 표현을 조금 더 쉽게 이해하려면 CSS의 <code>.navigation</code> 에 <code>border:1px solid red;</code> 를 부여하여 <code><div class="navigation"></div></code> 의 영역을 확인해 보세요.<img src="https://cdn.inflearn.com/public/comments/ab8ff566-ea6b-4dff-a931-8e8f449d258b/스크린샷 2022-12-28 15.13.59.png" alt="image" title="image">해당 div가 차지하고 있는 영역 내에서 위쪽으로 치우쳐진 형태임을 알 수 있습니다!

싸이월드 만들기 31:20초쯤

안녕하세요! 올려주신 스크린샷을 보면 우리가 직접 html에 작성한 것 외에도 많은 것들이 함께 표시되고 있네요. vscode에 설치했던 live server 라는 익스텐션을 이용하고 계실텐데, 이 익스텐션의 버그인 것 같습니다🤣코드를 수정할 때 마다 새로고침을 하는 번거로움을 줄여 주기 위해 live server 익스텐션 프로그램은 몇가지 추가 작업을 위한 코드를 추가하여 브라우저에 띄워 주게 되는데, 모종의 이유로 숨겨져야 할 내용이 그대로 표시되고 있는 것 같습니다!익스텐션 재설치 후 vscode 재실행, PC재부팅 등을 시도해 보세요😄

Live-server로 html 파일을 볼때 이상한 것들도 같이 보여요

안녕하세요 경석님! 우분투나 윈도우를 사용하고 계시다면 <code>Home</code>이나 <code>End</code> 버튼을 누르시면 되고, macOS를 사용하고 계시다면 <code>cmd+방향키</code> 를 누르시면 되겠습니다!<code>cmd+좌우</code> : 해당 줄의 첫 시작 또는 끝 지점으로 이동합니다 <code>cmd+상하</code> : 해당 문서의 첫 시작 또는 끝 지점으로 이동합니다

줄바꿈안하고 바로 아래로 내려가는 방법이 있나요?

안녕하세요 반갑습니다😄 첨부해주신 코드를 보니 각 <code>input</code> 태그를 <code>div</code> 태그가 감싸고 있는 형태이시군요!질문하신 내용을 보면 이메일, 이름, 비밀번호, 비밀번호 확인을 입력하는 <code>input</code> 태그를<img src="https://cdn.inflearn.com/public/comments/4106925c-1c78-43f1-ae82-f667388dd8e3/스크린샷 2022-12-19 13.21.51.png" alt="image" title="image">이렇게 만들고 싶으신 것 같아요. 제가 이해한 내용이 맞을까요?&nbsp;우선 제가 제대로 이해했다고 가정하고 답변을 드릴게요! 위 사진처럼 만들기 위해서는 <code>input</code> 태그와, input을 감싸는 <code>div</code> 태그의 <code>width</code> 를 조정해야 해요. 아래 순서대로 한번 코드를 수정해 보세요!<ol><li><code>input</code>을 감싸고 있는 <code>div</code> 태그들에 모두 클래스명을 부여하고, css에서 <code>width: 100%</code> 속성을 지정합니다.</li><li>css에서 <code>.inputform</code> 부분에 부여했던 <code>float: left !important</code> 를 제거하고 <code>width: 100%</code> 속성을 지정합니다.</li></ol>

이메일, 이름, 비밀번호, 비밀번호확인의 input 창만

kimtaeyan21님 안녕하세요!혹시 푸른색 밑줄과 오류 메세지로 표시되고 있나요? 그렇다면 VScode 확장 모듈로 설치한 spell checker가 영어사전에 등록되지 않은 단어를 검출한 상태랍니다. 코드의 오류는 아니라서 작동에 문제는 없어요! <code>myword</code> 를 <code>myWord</code> 와 같이 Camel Case 네이밍으로 변경해 주시거나, 해당 단어를 우클릭하여 개인 설정에 추가하시면 spell checker의 알림 메세지를 없앨 수 있답니다😄

오류가 왜 난지 모르겠습니다 ㅠㅠ

eriri0419님 안녕하세요! 회원가입은 추후 Final에서 자바스크립트와 함께 작동하도록 만들어 볼 예정이기 때문에 별도의 레퍼런스 코드가 제공되지 않아요😃지금은 우선 figma와 최대한 유사하게 만들어 보시고, final 완료 후 레퍼런스를 참조하여 공부해 보세요!👩‍💻

섹션 2 css 정렬 회원가입 정답

안녕하세요 민석님! HTML과 CSS 코드를 보여주셔야 원인을 찾을 수 있을 것 같습니다😅 <code>index.html</code>과 <code>index.css</code> 의 코드를 보여주실 수 있을까요?

ssy

Posts