HTML에 CSS를 추가하는 방법은 무엇입니까?

일반적으로 CSS로 알려진 계단식 스타일 시트는 웹 개발자가 원하는 대로 웹 페이지 스타일을 지정할 수 있는 수단을 제공합니다. CSS에 정의된 스타일 형식이 없는 단순한 HTML 페이지는 최종 사용자에게 매우 보기 흉하고 지루해 보일 것입니다. 따라서 CSS는 현대 웹사이트에서 아름답고 매력적이며 매력적인 모습을 제공하는 중요한 구성 요소입니다. 전통적으로 CSS는 웹사이트의 모양과 느낌을 제어하는 ​​역할만 담당했습니다. 그럼에도 불구하고 지속적인 업그레이드와 새로운 CSS를 통해 웹 개발자와 디자이너는 웹페이지에 대한 웹사이트의 반응성을 제어하여 노트북, 태블릿, 모바일 화면에 대한 차별화된 UI를 가질 수 있습니다.

CSS는 모든 웹사이트에 필요하므로 디자이너의 요구 사항에 따라 유연하고 쉽게 정의할 수 있어야 합니다. 또한 매우 세분화될 수 있으므로 CSS 정의는 동일한 스타일 형식을 여러 구성 요소에 함께 적용하기 위해 재사용이 가능해야 합니다. 다행히 CSS의 기능은 이러한 요구 사항을 충족합니다.

HTML에 CSS를 추가하는 방법

다음 옵션 중 하나 또는 모두를 사용하여 웹페이지에 CSS를 추가할 수 있습니다. 이제 이 세 가지 방법을 자세히 살펴보겠습니다.

1. 인라인 CSS

인라인 CSS를 사용하면 HTML 디자이너는 "style" 속성을 사용하여 HTML 요소의 태그 내에서 스타일 정보를 정의할 수 있습니다. 여기에는 몇 가지 장단점이 있으며, 이에 대해서는 곧 몇 가지 예를 통해 논의할 것입니다. 인라인 CSS는 CSS를 적용하는 가장 기본적인 방법입니다. 이 방법을 사용하면 한 번에 하나의 HTML 요소에만 스타일을 지정할 수 있습니다. 스타일 재사용성을 제공하지 않습니다. 스타일 정보는 HTML 요소의 여는 태그에 정의되며 "style" 속성에 값으로 제공됩니다.

아래 예에서는 Inline CSS를 사용하여 h1, h6, p 요소의 글꼴 색상을 변경하고 있습니다.

코드:

<h1 id="I-am-a-Blue-H-heading">I am a Blue H1 heading</h1>
<h1 id="I-am-a-Blue-H-heading">I am a Blue H6 heading</h1>
<p style="color:blue;">I am a Blue Paragraph</p>

출력:

위 예에서는 H1, H6, P 태그의 글꼴 색상만 파란색으로 변경하려고 했습니다. 동일한 스타일링 정보를 적용하고 싶어도 재사용이 불가능하고, 각 요소별로 3번씩 정의해야 했습니다. 재사용성이 부족하고 시간 소모가 증가하기 때문에 웹 디자이너는 여러 페이지로 구성된 웹 사이트의 스타일을 지정할 때 인라인 CSS를 사용하는 것을 선호하지 않습니다. 또한 인라인 스타일 정의로는 모바일 반응형 웹사이트를 만드는 것이 거의 불가능합니다.

2. 내부 CSS

내부 CSS에서 HTML 디자이너는

이제 동일한 예를 내부 CSS로 구현해 보겠습니다.

코드:

.bluecolor {
color : blue ;
}


<h1 id="I-am-a-Blue-H-heading"> I am a Blue H1 heading </h1>
<h1 id="I-am-a-Blue-H-heading"> I am a Blue H6 heading </h1>
<p class=" bluecolor "> I am a Blue Paragraph </p>

출력:

위의 예에서 볼 수 있듯이 스타일링 정보를 한 번 선언한 후 여러 번 사용해야 합니다. 내부 CSS는 상당한 수준의 스타일 재사용성을 제공하지만 하나의 HTML 파일에 정의된 CSS는 다른 파일에서 활용할 수 없습니다. 또한 동일한 파일에 CSS와 HTML을 선언하면 파일 크기가 크게 늘어나고 파일 로드 시 지연이 발생할 수 있습니다.

3. 외부 CSS

이름에서 알 수 있듯이 외부 CSS는 .css 확장자로 저장되고 스타일을 적용해야 하는 HTML 파일의 태그입니다. 외부 CSS 메커니즘은 내부 CSS와 인라인 CSS의 단점을 극복하기 위해 구축되었습니다. 외부 CSS에는 모든 스타일 정보를 전달하기 위해 .css 파일이 필요합니다. 그런 다음 HTML 요소가 연결된 CSS 파일에 정의된 ID 또는 클래스를 참조하는 HTML 파일에 이 파일을 연결할 수 있습니다.

HTML 링크 태그를 사용하여 연결을 달성합니다. 예를 들어 이것을 이해해 봅시다. 이름이 mystyles이고 확장자가 .css인 CSS 파일을 만듭니다. 이 파일은 다음 데이터에 연결됩니다:

코드:

.bluecolor{
color:blue;
}

Now we will add the below content in the HTML file:

<link rel="stylesheet" href="mystyles.css">


<h1 id="I-am-a-Blue-H-heading"> I am a Blue H1 heading </h1>
<h1 id="I-am-a-Blue-H-heading"> I am a Blue H6 heading </h1>
<p class=" bluecolor "> I am a Blue Paragraph </p>

The above code will produce the following output in the browser:

Output:

Conclusion

With the above examples, we can conclude that External CSS would be the most efficient way of implementing CSS in the website due to the highest degree of code reusability that it provides limited time consumption. Web designers use External CSS for building all professionally developed and popular themes available because it greatly enhances manageability and efficiency in web designing.

위 내용은 HTML에 CSS를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!