[javascript] HTML과 CSS와의 연동 관련 규칙 설정하기

05 Dec 2023

javascript

HTML과 CSS를 함께 사용하여 웹페이지의 디자인을 구성할 수 있습니다. 이를 위해 HTML과 CSS를 연동하는 규칙을 설정해야 합니다. 이번 블로그 포스트에서는 HTML과 CSS의 연동 관련 규칙에 대해 알아보겠습니다.

1. 외부 CSS 파일 연결하기

HTML 문서와는 별개로 CSS 파일을 작성하여 사용할 수 있습니다. 이를 위해 다음과 같은 단계를 따릅니다:

외부 CSS 파일을 생성합니다. (예: style.css)
HTML 문서에 <link> 태그를 사용하여 외부 CSS 파일을 연결합니다.
```
 <link rel="stylesheet" type="text/css" href="style.css">
```
정확한 파일 경로를 지정하여 href 속성에 CSS 파일의 경로를 입력합니다.

2. 내부 CSS 스타일 시트

HTML 문서 내부에서 CSS를 작성할 수도 있습니다. 이를 위해 다음과 같은 단계를 따릅니다:

HTML 문서의 <head> 태그 내부에 <style> 태그를 추가합니다.

<style> 태그 내부에 CSS를 작성합니다.

 <style>
     body {
         font-family: Arial, sans-serif;
         background-color: #f1f1f1;
     }
        
     h1 {
         color: #333;
         font-size: 24px;
     }
 </style>

<style> 태그 내에 작성한 CSS 코드는 해당 HTML 문서에서만 적용됩니다.

3. Inline 스타일

CSS를 HTML 요소에 직접 적용하고 싶을 때는 Inline 스타일을 사용할 수 있습니다. 이를 위해 다음과 같은 단계를 따릅니다:

HTML 요소의 style 속성을 사용하여 CSS를 설정합니다.
```
 <h1 style="color: red; font-size: 32px;">제목</h1>
```

4. 선택자와 스타일의 적용 우선순위

여러 개의 CSS 규칙이 동일한 요소에 적용될 경우, 선택자의 우선순위에 따라 스타일이 결정됩니다. 크게 말하면 다음과 같은 우선순위를 가집니다:

Inline 스타일 > 내부 CSS > 외부 CSS
더 구체적인 선택자가 더 우선순위가 높습니다.

결론

HTML과 CSS를 연동하여 웹페이지의 디자인을 구성하는 방법에 대해 알아보았습니다. 외부 CSS 파일 연결, 내부 CSS 스타일 시트, Inline 스타일의 사용 방법을 알고, 선택자와 스타일의 우선순위에 대해 이해했습니다. 이제 규칙을 설정하고 디자인을 지정할 준비가 되었습니다.

참고 문서:

MDN Web Docs