CSS style 적용의 3가지 방법

Bard

CSS 스타일을 적용하는 3가지 방법은 다음과 같습니다.

 

1. 인라인 스타일

인라인 스타일은 HTML 태그에 `style` 속성을 사용하여 스타일을 적용하는 방법입니다. 인라인 스타일은 가장 간단한 방법이지만, 스타일을 적용할 수 있는 태그가 제한되고 유지 관리가 어려울 수 있습니다.

예:

<div style="color: red;">This is an inline style.</div>

 

2. 내부 스타일

내부 스타일은 HTML 문서의 `head` 태그에 `style` 태그를 사용하여 스타일을 적용하는 방법입니다. 내부 스타일은 인라인 스타일보다 유지 관리가 쉽지만, 스타일을 적용할 수 있는 태그가 제한되고 여러 개의 HTML 문서에 동일한 스타일을 적용하기 어려울 수 있습니다.

예:

<style>
div {
  color: red;
}
</style>

<div>This is an internal style.</div>

 

3. 외부 스타일

외부 스타일은 `.css` 파일에 스타일을 작성하고, HTML 문서에서 `link` 태그를 사용하여 스타일을 참조하는 방법입니다. 외부 스타일은 가장 유연한 방법이며, 여러 개의 HTML 문서에 동일한 스타일을 적용하기 쉽습니다.

예:

// mystyle.css

div {
  color: red;
}

// index.html

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

<div>This is an external style.</div>

---

<link href="mystyle.css" rel="stylesheet"> 에서

'rel' 속성은 뭐야?

 

chatGTP

`rel`은 HTML에서 링크 요소(`<link>`)의 속성(Attribute) 중 하나입니다. `rel`은 해당 링크가 현재 문서와 어떤 관계(Relationship)에 있는지를 정의하는 역할을 합니다. 주로 CSS 파일을 연결하는데 사용되며, 다른 유용한 용도로는 파비콘(Favicon), 관련 문서 등의 링크를 지정할 때 사용됩니다.

 

`rel` 속성은 일반적으로 다음과 같은 값들을 가집니다:

1. `stylesheet`: 

링크된 리소스가 CSS 스타일시트임을 나타냅니다. 예를 들어, `<link href="mystyle.css" rel="stylesheet">`는 `mystyle.css`라는 파일이 CSS 스타일시트라는 것을 명시합니다.

 

2. `icon`: 

링크된 리소스가 파비콘(Favicon) 이미지임을 나타냅니다. 예를 들어, `<link href="favicon.ico" rel="icon">`은 `favicon.ico`라는 파일이 파비콘이라는 것을 명시합니다.

 

3. `alternate`:

링크된 리소스가 현재 문서와 대체되는 대체 버전임을 나타냅니다. 주로 RSS 피드와 같이 별도의 문서 버전을 가리킬 때 사용됩니다.

 

4. `canonical`:

링크된 리소스가 현재 문서의 주요 버전임을 나타냅니다. 주로 검색 엔진에 중복 콘텐츠를 피하기 위해 사용됩니다.

 

5. `prefetch`: 

링크된 리소스를 미리 가져올 것을 알리는데 사용됩니다. 이를 통해 사용자 경험을 개선할 수 있습니다.

 

6. `next`, `prev`: 

현재 문서의 이전 또는 다음 문서와의 관계를 나타냅니다. 페이징이나 시리즈 컨텐츠 등에서 사용됩니다.

등 다양한 값들이 있으며, 각 값은 해당 리소스와 현재 문서의 관계를 정의하는데 사용됩니다. `rel` 속성을 사용하여 문서 간의 관계를 명시함으로써 검색 엔진이나 브라우저 등에서 적절한 처리를 할 수 있도록 도와줍니다.