vscode 라이브서버 질문

Question

질문이 있어 글남깁니다.현재 다른 홈페이지 보고 대충 따라만들고 있는 중인데요.vscode 라이브서버로 창을 열면 제가 예상한대로 예쁘게 잘 나오긴합니다만... html파일 더블클릭해서 열었을 때는 css가 하나도 적용이 안된채로 그냥 쌩 html요소들만 보이는 상황입니다. 이 문제를 해결하고 싶은데 어떻게 하면 좋을까요? 아래는 html코드와 css코드입니다. 메인화면

회사소개
사업소개
오시는길
고객센터
- 공지사항
- 질문과 답변
- 갤러리
- 동영상

회사소개

인간과 환경을 생각하며 가치를 창조하는 회사, 더착한

고객 지향의 서비스

회사가 필요로 하는 모든 것, 언제나 고객의 입장에서 생각합니다. 우리가 하는 일은 고객과 같은 곳을 바라보는 일입니다.

품질 만족도 1위

회사가 필요로 하는 모든 것, 언제나 고객의 입장에서 생각합니다. 우리가 하는 일은 고객과 같은 곳을 바라보는 일입니다.

무료홈페이지

회사가 필요로 하는 모든 것, 언제나 고객의 입장에서 생각합니다. 우리가 하는 일은 고객과 같은 곳을 바라보는 일입니다.

사업소개

인간과 환경을 생각하며 가치를 창조하는 회사, 더착한

에너지개발사업

환경을 생각한다는 기업은 많지만 미래의 환경까지 생각하는 기업은 더디자인입니다. 프리미엄급 시설과 최고의 서비스를 제공하여 고객만족에 최선을 다하며, 세계의 기업과 함께 최고의 비즈니스 파트너가 될 것을 약속합니다.

에너지개발사업

환경을 생각한다는 기업은 많지만 미래의 환경까지 생각하는 기업은 더디자인입니다. 프리미엄급 시설과 최고의 서비스를 제공하여 고객만족에 최선을 다하며, 세계의 기업과 함께 최고의 비즈니스 파트너가 될 것을 약속합니다.

오시는길

인간과 환경을 생각하며 가치를 창조하는 회사, 더착한

Address: 서울특별시 강서구 양천로 551-24
Mail Us: web@co.kr
Tel: 02-1234-5678
Fax Us: 0212345678
평일: AM 9:00 ~ PM 6:00 / 주말, 공휴일 휴무

header{ /* position: relative; */} .logo{ cursor: pointer;} .top{ position: fixed; width: 100%; border-bottom: 2px solid #f61616; background-color: white; opacity: 0.8;} .top img{ margin-top: 30px; margin-left: 30px;} .mainmenu{ float: right; margin-bottom: 20px;} .menuitems{ /* position: absolute; */ display: inline-block; margin-right: 10px; width: 100px;} ul.submenu{ display: none; position: absolute; border: 1px solid #f61616; background-color: white; text-align: center; width: 150px; right: 4px; color: black; /* 서브메뉴 컬러 블랙으로 덮어줌, 그래야 메인메뉴 클릭했을 때 빨간색으로 다 안변함 */ /* margin-top: 10px; */} li.submenu{ margin-top: 5px; margin-bottom: 5px;} ul > li.menuitems:hover{ color: #f61616; cursor: pointer;} li.gogak:hover > ul.submenu{ display: block;} li.submenu:hover{ color: #f61616; cursor: pointer;} header > div > img{ width: 100%; margin-top: 125px;} article {} .first { text-align: center; width: 100%;} .first_1 { margin: 100px;} .first_1>h1 { font-size: 30px; font-weight: 400;} .first_1>h2 { font-size: 16px; font-weight: 400; color: #6E6E6E; letter-spacing: -1px;} .first_1>h2>span { color: #F61616; font-weight: 600;} .first_2>div { display: inline-block; width: 300px; margin: 10px;} .first_2>div>p { font-size: 13px; color: #555; letter-spacing: -.5px} .second { text-align: center; width: 100%; background: #f5f5f5;} .second_1 { margin: 100px; padding-top: 100px; /* border: 1px solid red; */} .second_1>h1 { font-size: 30px; font-weight: 400;} .second_1>h2 { font-size: 16px; font-weight: 400; color: #6E6E6E; letter-spacing: -1px;} .second_1>h2>span { color: #F61616; font-weight: 600;} .second_2 p,.second_3 p { letter-spacing: -.5px; font-size: 14px; line-height: 24px; color: #555;} .second_2 h3,.second_3 h3 { margin-bottom: 10px;} .second_2>div { width: 350px; display: inline-block; margin: 40px; text-align: left; position: relative; right: 40px; bottom: 93px;} .second_3>div { width: 350px; display: inline-block; margin: 40px; text-align: right; position: relative; left: 40px; bottom: 93px;} .first_1 { margin: 100px;} .third { text-align: center; padding: 100px;} .third_1>h1 { color: #333; letter-spacing: -2.5px; margin-bottom: 10px; font-size: 30px; font-weight: 400;} .third_1>h2 { color: #6E6E6E; letter-spacing: -1px; margin-bottom: 50px; font-size: 16px; font-weight: 400;} .third_1>h2>span { color: #F61616; font-weight: 600;} .map{ display: inline-block;} .info{ position: relative; display: inline-block; margin-left: 10px; bottom: 250px;} .info > li{ font-size: 14px; color: #777; padding: 5px 0; letter-spacing: -.5px; text-align: left;} .info_5{ border-top: 1px solid #ccc; margin-top: 10px;} footer { text-align: center; border-top: 1px solid #ccc;} .footnav li { display: inline-block; margin: 5px; padding: 5px;} .footnav a { text-decoration: none; color: #999; font-size: 12px;} .footnav a:hover { text-decoration: underline;} footer>div>p { font-size: 12px; color: #999; line-height: 20px;} .footnav li:after { content: "|"; position: relative; left: 12px;} .footnav li:last-child:after { content: "";}

kenu,전독시 · Answer

파일을 불러올 경우 웹서버 역할이 필요할 수도 있습니다.브라우저의 개발자 도구에서 확인할 수 있습니다.웹서버는 node가 깔린 경우 아래 명령으로 실행할 수 있습니다.npx servehttp://localhost:3000 으로 html 브라우저에서 볼 수 있습니다.

vscode 라이브서버 질문

1개의 답변

#liveserver 목록