이 프로젝트에서는 웹사이트의 디스플레이 문제를 해결하고, 적절한 스타일과 레이아웃을 갖추도록 하는 방법을 배우게 됩니다. 목표는 완성되지 않은 웹사이트를 가져와 원하는 최종 제품처럼 보이도록 만드는 것입니다.
이 프로젝트에서 다음을 배우게 됩니다:
이 프로젝트를 완료하면 다음을 수행할 수 있습니다:
이 단계에서는 프로젝트를 설정하고 편집기에서 파일을 엽니다.
index.html, style.css 파일과 이미지 파일 html5logo.png, css3-logo.png, nav-btn.png 및 evolution.png가 표시됩니다.
이 단계에서는 페이지의 HTML 구조를 살펴보고, 거기에서 페이지 디스플레이 문제를 해결할 문제를 찾습니다.
index.html 파일을 엽니다.index.html 파일을 검토하고 CSS 파일에 대한 <link> 태그에 잘못된 파일 이름이 있음을 확인합니다. href 속성을 업데이트하여 올바른 파일인 style.css를 가리키도록 합니다.<link rel="stylesheet" href="style.css" />HTML 파일에는 다음과 같은 주요 섹션이 포함되어 있습니다.
<header>: 웹사이트 제목과 탐색 메뉴를 포함합니다.<div class="content">: 한 개의 열 섹션, 세 개의 열 섹션 및 두 개의 열 섹션을 포함하는 페이지의 주요 내용을 포함합니다.<footer>: 링크가 있는 웹사이트 바닥글을 포함합니다.index.html 파일에 변경 사항을 저장합니다.
버그 수정 후 브라우저에서 페이지를 새로 고치면 다음과 같은 결과를 볼 수 있습니다.
축하합니다! HTML 및 CSS 파일을 업데이트하여 웹사이트 디스플레이를 성공적으로 수정했습니다.
축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.
