소개
오늘날 웹에서 수행할 수 있는 일은 매우 인상적입니다. 모든 디바이스에서 실행되는 웹 환경을 빌드하고, 모든 종류의 미디어 콘텐츠를 포함하고, 복잡한 계산을 수행할 수 있습니다. 원시 애플리케이션처럼 보이고 느껴지는 앱을 만들 수도 있습니다.
현재 웹 개발을 시작하는 데 관심이 있다면, 선택 사항이 너무 많아 당황할 수 있습니다. 이 모듈에서는 웹 사이트의 기본 구성 요소와 웹 개발을 시작하는 데 사용할 수 있는 몇몇 도구를 알아봅니다. HTML, CSS 및 JavaScript를 함께 사용하여 웹 사이트를 빌드한 다음, 브라우저에서 개발자 도구를 사용하여 무슨 일이 일어나는지 이해합니다.
이러한 기본적인 지식이 있으면 나중에 웹 사이트를 빌드할 때 더 나은 컨텍스트에서 결정을 내릴 수 있습니다. 예를 들어 웹 사이트를 빌드하기 위해 JavaScript 프레임워크를 선택해야 하는지 자체 JavaScript 함수를 만들어야 하는지 여부입니다.
원하는 시나리오를 확인하는 것부터 시작해 보겠습니다.
시나리오
여러분이 웹 개발자로서 더 광범위한 고객에게 어필할 수 있는 회사 웹 사이트를 만들라는 요청을 받았다고 가정해 보겠습니다. 고객이 웹 사이트의 사용 환경을 사용자 지정할 수 있도록 밝은 테마와 어두운 테마에 대한 지원을 추가하기로 결정합니다. CSS를 사용한 테마 지원을 보여 주는 작은 개념 증명 웹 사이트를 만들고, 해당 테마 사이를 전환하기 위한 JavaScript 함수를 작성합니다.
완료되면 어두운 테마를 선택한 경우 웹 사이트가 다음 예제와 같이 보이게 됩니다.
웹 페이지의 기능
콘텐츠, 스타일 및 대화형 논리는 각각 HTML, CSS 및 JavaScript 파일로 구분됩니다. 최신 프로그래밍의 디자인 원칙은 ‘문제를 분리하는 것’입니다. 문제를 구분하는 여러 가지 이유 중에서 두 가지 이유는 단순성과 재사용입니다. 예를 들어, CSS를 사용하여 HTML 요소의 스타일을 지정하면 HTML 코드를 간소화할 수 있습니다. 각 요소 내에서 모양을 코딩하는 대신 페이지 복잡성에 관계없이 페이지의 모든 요소에 CSS 스타일을 적용합니다. 또한 여러 HTML 페이지를 단일 CSS 파일에 연결하여 전체 웹 사이트에서 일관된 모양과 느낌을 간소화할 수 있습니다.