[코딩 자율학습 HTML + CSS + 자바스크립트] 13장 HTML+CSS+자바스크립트로 완성하는 최종 프로젝트 - 10

| 2025-01-11 20:19 | 조회 174

#비디오커리 #포트폴리오수정 #미디어쿼리 #CSS수정 #코딩튜토리얼 #myip

[주요 목차]

📌 포트폴리오 스펠링 수정

📌 클래스 이름 변경

📌 CSS 자동 완성 사용법

📌 프로젝트 실행 및 검토

📌 미디어 쿼리 적용

이번 블로그에서는 웹 개발 과정에서 자주 발생할 수 있는 실수와 그 해결 방법에 대해 다뤄보겠습니다. 비디오 커리를 적용하려던 중 포트폴리오 스펠링 오류를 발견하고 이를 수정하는 과정을 통해 디버깅의 중요성을 강조합니다. CSS 클래스 이름 변경과 자동 완성 기능을 올바르게 사용하는 방법도 함께 설명할 것입니다. 마지막으로 프로젝트를 실행하여 최종 결과를 검토하고, 차기 영상에서 미디어 쿼리 적용을 준비하는 과정까지 안내합니다. 이를 통해 웹 개발의 기본기를 다지고, 실수로 인한 혼란을 최소화하는 방법을 알아보세요.

📌 포트폴리오 스펠링 수정

포트폴리오 페이지를 개발하면서 가장 먼저 맞닥뜨린 문제는 바로 스펠링 오류였습니다. 코드 작성 중에는 사소한 오타가 전체 프로젝트에 영향을 미칠 수 있기 때문에, 자주 검토하고 디버깅하는 습관이 중요합니다. 포트폴리오의 일부가 잘못된 스펠링으로 작성되어 있었고, 이를 수정하기 위해 먼저 오타를 찾아내고 수정하는 과정을 거쳤습니다. 이러한 과정은 코드 리뷰나 페어 프로그래밍을 통해 더욱 효율적으로 수행할 수 있으며, 코드 품질을 높이는 데 큰 도움을 줍니다.

📌 클래스 이름 변경

클래스 이름은 HTML과 CSS의 연결고리로서 매우 중요합니다. 이번 프로젝트에서는 클래스 이름을 'a 스템'에서 'b 포트폴리오'로 변경하는 작업을 진행했습니다. 이 과정에서 주의할 점은 모든 관련 파일에서 동일하게 변경되어야 한다는 것입니다. 특히, HTML에서의 클래스 변경은 CSS 파일에서도 동일하게 반영되어야 스타일이 정상적으로 적용됩니다. 이를 위해 프로젝트 내에서 검색 및 바꾸기 기능을 활용하여 일괄적으로 수정하는 것이 효율적입니다.

📌 CSS 자동 완성 사용법

CSS 작성 중에는 자동 완성 기능을 활용하여 코드의 일관성을 유지할 수 있습니다. 자동 완성은 오타를 방지하고, 코드 작성 속도를 높이는 데 유용합니다. 하지만, 잘못된 자동 완성을 사용할 경우 오히려 오류를 초래할 수 있으므로, 항상 결과를 확인하고 필요한 경우 수동으로 수정해야 합니다. 이번 프로젝트에서도 자동 완성으로 인해 발생한 오류를 수정하며, 자동 완성 기능의 장단점을 체험했습니다.

📌 프로젝트 실행 및 검토

수정이 완료된 후에는 반드시 프로젝트를 실행하여 최종 결과를 검토해야 합니다. 이는 브라우저에서의 실제 작동 여부를 확인하고, 예상치 못한 에러를 발견하는 중요한 단계입니다. 프로젝트가 정상적으로 작동한다면, 그동안의 수정 작업이 올바르게 진행되었음을 의미합니다. 따라서, 수정 작업 후에는 항상 프로젝트를 실행하여 결과를 확인하는 습관을 가지는 것이 좋습니다.

📌 미디어 쿼리 적용

마지막으로 준비할 작업은 미디어 쿼리의 적용입니다. 미디어 쿼리는 반응형 웹 디자인의 핵심 요소로, 다양한 디바이스에서의 최적의 사용자 경험을 보장합니다. 다음 단계에서는 기존의 코드를 활용하여 미디어 쿼리를 적용하는 방법을 다룰 예정입니다. 이를 통해 다양한 화면 크기에 대응하고, 사용자에게 최적화된 인터페이스를 제공할 수 있도록 합니다.