CSS를 사용하여 콘텐츠와 디자인을 분리하는 방법은 무엇입니까?

좋은 웹사이트는 항상 완벽하게 구성된 HTML 문서와 사용자의 관심을 끄는 아름다운 디자인으로 구성됩니다. 이러한 종류의 웹사이트는 웹사이트의 전반적인 상호작용성을 향상시키고 더욱 매력적으로 만들 수 있습니다.

웹 페이지에 스타일을 적용할 때 CSS(Cascading Style Sheets)를 줄여서 사용합니다. CSS를 사용하면 웹사이트를 더욱 쉽게 아름답게 만들 수 있습니다. 이는 HTML 문서의 구조와 사용자가 보고 상호 작용하는 요소를 참조하는 프레젠테이션을 구별합니다.

단순히 HTML을 사용하여 만든 평범한 웹사이트와 달리 독특하고 창의적인 스타일을 갖는 것은 웹사이트의 필수 기능이 되었습니다.

CSS 병합

CSS를 웹사이트에 통합할 수 있는 세 가지 방법이 있습니다. -

• 인라인 스타일 - 각 개별 HTML 태그에 스타일을 적용하는 것을 인라인 스타일이라고 합니다.

• Embedded Styles - head 태그는 스타일 태그 내에 포함되어 있으며 CSS가 HTML 파일에 병합된 것처럼 보입니다. 그런 다음 "임베디드 스타일"이라는 용어를 사용하십시오.

• 외부 스타일 - CSS를 HTML과 분리하는 데 사용되므로 CSS를 사용할 때 가장 권장되는 기술입니다. HTML 콘텐츠는 모든 스타일 정보가 포함된 CSS 파일에 연결됩니다. 이 스타일 접근 방식을 사용하면 많은 CSS 파일을 첨부할 수 있습니다.

별도의 파일을 사용하고 유사한 유형의 형식을 동일한 속성으로 그룹화하면 사용되는 코드 길이를 크게 줄일 수 있습니다. 코드가 적으면 버그 찾기 프로세스가 더 쉬워지고 코드의 전반적인 가독성이 크게 향상되므로 코드 유지 관리에 도움이 됩니다.

별도의 CSS 파일을 사용하는 또 다른 장점은 각 페이지에서 개별적으로 서식을 반복해야 하는 기존 서식에 비해 동일한 파일을 필요한 만큼 여러 번 재사용할 수 있다는 것입니다. 파일을 가져오거나 워크시트를 연결하여 파일을 재사용할 수 있습니다.

링크 태그를 사용하여 파일 링크

이미 논의한 것처럼 HTML 문서에 연결된 .CSS 파일을 사용하여 웹 페이지의 콘텐츠(구조)를 디자인(형식 및 스타일)에서 분리할 수 있습니다. html 태그를 사용하여 CSS 파일을 HTML 파일에 연결할 수 있습니다.

링크 태그를 사용하여 두 문서가 서로 어떻게 관련되어 있는지 지정합니다. 이는 빈 요소입니다. 즉, 여는 태그나 닫는 태그가 없고 자체 닫는 태그도 없다는 의미입니다. 필요한 모든 정보는 해당 속성에 저장됩니다. 링크 태그에 사용할 수 있는 속성은 많지만 사용해야 하는 속성은 아래에 정의되어 있습니다.

• Rel - 현재 사용 중인 문서가 연결하려는 문서와 어떻게 관련되는지 지정하는 링크 태그의 필수 속성입니다. 일반적으로 우리는 스타일시트나 파비콘을 관계로 생각하는 경향이 있습니다.

• Href - 링크할 파일의 URL을 지정하는 데 사용됩니다.

링크 태그는 head 태그에 사용됩니다. 동일한 문서 내에서 각 태그에는 서로 다른 파일을 가리키는 링크 태그의 여러 인스턴스가 있을 수 있습니다. 아래에는 링크 태그를 사용하여 HTML에서 CSS 파일을 연결하는 구문이 나와 있습니다. -

으아악

예

웹 페이지의 콘텐츠와 디자인 부분을 분리하기 위해 링크 태그를 사용하는 예를 살펴보겠습니다.

HTML 부분

으아악

수입신고 활용

CSS의 import 문을 사용하여 콘텐츠와 디자인을 분리할 수도 있습니다. 별도의 파일에 저장된 스타일을 가져와야 할 때마다 이 명령문을 사용합니다. CSS 파일이 있는 URL이나 소스 경로를 따옴표 안에 제공하기만 하면 됩니다.

이 문에 미디어 쿼리를 사용하도록 선택할 수도 있습니다. 이는 스타일 시트의 계단식 배열도 지원하는 유연한 명령문입니다.

디자인과 콘텐츠를 분리하기 위해 사용할 때 변경해야 할 유일한 것은 위 예제 코드에서 링크 태그를 제거하고 그 자리에 다음 명령문을 추가하는 것입니다.

으아악

코드의 출력은 위의 예제 코드의 출력과 동일합니다.

결론

결론적으로 CSS는 웹 디자이너를 위한 강력한 도구로, 콘텐츠와 디자인을 분리할 수 있게 해줍니다. 디자이너는 CSS를 사용하여 여러 웹사이트와 장치에서 일관된 모양을 만들면서 콘텐츠를 정리하고 쉽게 업데이트할 수 있습니다. HTML과 CSS에 대한 올바른 이해를 통해 모든 디자이너는 이 기능을 쉽게 활용하여 유용성이나 접근성을 저하시키지 않고 멋진 디자인을 만들 수 있습니다.

위 내용은 CSS를 사용하여 콘텐츠와 디자인을 분리하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!