HTML 웹 페이지에 CSS를 추가하는 3가지 방법

2052 단어 htmlcssstyle


인체로 만들어지고 있는 HTML, CSS, Javascript에 대한 비유를 여러분 모두 알고 계실 것입니다. HTML이 뼈대라면 CSS는 근육이고 javascript는 웹 페이지의 두뇌입니다.

인터넷에는 수백만 개의 웹사이트가 있으며 웹사이트가 다른 웹사이트와 차별화되는 유일한 방법은 스타일과 상호작용입니다. 스타일이 없는 HTML 페이지는 브라우저에 표시되는 워드 문서일 뿐입니다. 따라서 스타일은 모든 웹사이트 개발에서 매우 중요한 역할을 합니다.

인라인, 내부 및 외부의 세 가지 방법으로 모든 HTML 페이지에 스타일을 추가할 수 있습니다.

이 세 가지 방법과 웹 페이지에서 적용하는 방법에 대한 자세한 내용을 살펴보겠습니다.

인라인 CSS

인라인 스타일의 경우 HTML 태그의 style 속성을 사용합니다. CSS는 태그에 스타일을 추가하는 style 속성에 문자열로 전달됩니다.

예를 들어 인라인 CSS로 웹 페이지 배경을 파란색으로 만들고 싶다면 다음과 같이 작성할 수 있습니다.

<body style="background-color: blue"></body>


그러나 내부 및 외부 CSS가 그림에 포함되는 이유인 HTML 태그에서 스타일을 분리하는 것이 가장 좋습니다.

내부 CSS

내부 CSS의 경우 웹 페이지와 관련된 모든 스타일이 추가된 스타일 태그가 사용됩니다. 이 스타일 태그는 페이지의 헤드 태그에 추가되어 HTML 문서가 렌더링되기 전에도 스타일이 추가됩니다.

예를 들어 내부 CSS를 사용하여 웹 페이지 배경을 파란색으로 만들고 싶다면 다음과 같이 할 수 있습니다.

<head>
    <style>
      body {
        background-color: blue;
      }
    </style>
 </head>


내부 CSS가 제 역할을 하지만 둘 이상의 페이지에 동일한 스타일을 사용해야 하는 시나리오를 상상해 보세요. 이 경우 내부 CSS를 사용하면 같은 코드를 두 번 작성하게 되는데 이를 극복하기 위해 외부 CSS를 사용하고 있다.

외부 CSS

외부 CSS에서는 모든 스타일을 작성하는 .css 확장자를 가진 별도의 파일을 사용합니다. 이 CSS 파일은 head 태그 아래에 추가되는 link 태그를 사용하여 여러 웹 페이지에서 사용할 수 있습니다.

예: 외부 CSS를 사용하여 웹 페이지 배경을 파란색으로 만들려면 두 파일을 변경해야 합니다.

먼저 모든 스타일을 CSS 파일에 추가합니다. 이 예에서는 styles.css가 됩니다.

body{
     background-color: blue;
}


그런 다음 이 css 파일을 다음과 같이 html 파일에 연결합니다.

<head>
  <link rel="stylesheet" href="styles.css">
</head>


이것을 더 잘 이해하려면 작은 프로젝트를 만들어 같은 것을 적용하는 것이 좋습니다.

행복한 스타일링!
Discord를 사용하여 GitHub에서 제품 지원
[JS] JS 프레임의 Svelt를 가동해 봤습니다.(동작이 엄청 빠른 것 같아!)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage