HTML을 CSS에 연결하는 방법

HTML과 CSS는 프런트 엔드 기술의 중요한 구성 요소입니다. 이들의 협력은 페이지의 모양과 상호 작용 경험을 향상시키는 데 도움이 될 수 있습니다. 이 기사에서는 페이지 스타일 제어를 달성하기 위해 HTML을 CSS와 연결하는 방법을 소개합니다.

1. HTML 및 CSS에 대하여

HTML은 웹페이지의 기본 구조로, 웹페이지의 콘텐츠, 레이아웃, 태그 및 링크를 정의합니다. CSS는 집의 장식으로 이해될 수 있는 스타일 시트로 웹 페이지의 모양, 레이아웃 및 색상을 제어합니다.

2. HTML에 CSS 추가

HTML 문서에 CSS 스타일 시트를 추가하는 방법에는 내부 스타일과 외부 스타일이 있습니다.

1. 내부 스타일

내부 스타일은 <를 추가합니다. HTML 문서의

태그와 태그 사이에 CSS 스타일 코드를 작성합니다. 예:

<title>My Website</title>
<style>
body {
  background-color: #f2f2f2;
  font-family: Arial, sans-serif;
}
h1 {
  color: #333333;
}
</style>


<h1 id="Welcome-to-my-website">Welcome to my website</h1>
<p>This is the home page of my website</p>

위 코드에서

2. 외부 스타일

외부 스타일은 CSS 코드를 별도의 CSS 파일에 넣은 다음 HTML 문서의 태그를 통해 CSS 파일을 HTML 문서로 가져오는 것입니다. 예:

<title>My Website</title>
<link>


<h1 id="Welcome-to-my-website">Welcome to my website</h1>
<p>This is the home page of my website</p>

위 코드에서 태그는 HTML 코드가 웹페이지 스타일을 제어하는 ​​데 사용할 "style.css"라는 CSS 파일을 가리킵니다.

3. CSS 선택기

CSS 스타일을 만드는 방법을 이해하려면 먼저 CSS 선택기를 이해해야 합니다. 선택기는 스타일을 지정할 HTML 요소를 지정하는 방법입니다. 다음은 몇 가지 일반적인 CSS 선택기입니다.

1. 요소 선택기

요소 선택기는 태그 이름을 선택기로 사용하는 방법입니다. 예를 들어, 다음 CSS 코드는 모든 단락 요소의 색상을 빨간색으로 설정합니다.

p {
  color: red;
}

2. 클래스 선택기

클래스 선택기는 클래스 이름을 HTML 요소에 할당합니다. 이러한 클래스 이름은 스타일 시트에서 사용할 수 있습니다. 예를 들어, 다음 CSS 코드는 클래스 속성이 "my-class"인 모든 요소를 ​​빨간색 배경색과 글꼴 크기 16pt로 설정합니다.

.my-class {
  background-color: red;
  font-size: 16pt;
}

HTML 코드에서 다음을 추가하여 이 스타일을 요소에 적용할 수 있습니다. class 속성, 방법은 다음과 같습니다.

<div>
  <p>Hello, this is a paragraph</p>
</div>

3. ID Selector

ID 선택기는 HTML 요소에 대한 고유한 ID 이름을 지정합니다. 스타일 시트에서 이 이름을 사용하여 ID 요소에 스타일을 지정할 수 있습니다. 예를 들어 다음 CSS 코드는 ID 속성 값이 "my-id"인 요소를 파란색 배경과 18pt 글꼴 크기로 설정합니다.

#my-id {
  background-color: blue;
  font-size: 18pt;
}

HTML 코드에서 id를 추가하여 요소에 이 스타일을 적용할 수 있습니다.

<div>
  <p>Hello, this is a paragraph</p>
</div>

4. 요약

HTML에 CSS 스타일 시트를 추가하면 페이지의 모양과 스타일을 쉽게 제어할 수 있으며, 이는 내부 및 외부 스타일 시트의 두 가지 방법으로 달성할 수 있습니다. CSS 스타일을 작성할 때 스타일을 적용할 HTML 요소를 지정하는 방법인 CSS 선택기를 이해해야 합니다. 이러한 기술을 결합하면 아름답고 관리하기 쉬운 페이지를 얻을 수 있습니다.

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