CSS 시작하기, 파트 2

2345 단어
계속하자 ...

스타일 불러오기



이를 달성하는 3가지 기본 방법이 있습니다.
첫 번째는 HTML 파일에서 스타일을 지정하려는 HTML 요소와 같은 줄에 CSS를 추가하는 것이며 이를 인라인이라고 합니다.

<h1 style="color: blue;">
     Title 
</h1>}

그러나 HTML 파일에 스타일을 포함하는 것은 좋지 않은 것으로 간주되므로 권장되지 않습니다. 구조와 내용을 포함해야 합니다. 그다지 효율적이지 않습니다. 조작하려는 모든 단일 요소에 스타일을 추가해야 합니다. 다른 곳에서는 스타일을 사용할 수 없습니다. 마지막으로 이 방법은 브라우저에서 페이지의 로딩 시간을 추가할 수 있습니다.



두 번째 방법은 스타일 요소입니다.
인라인과 약간 비슷합니다. 다시 HTML 파일에 스타일을 포함해야 하지만 이번에는 파일의 헤드 섹션에 모든 CSS를 생성합니다.

<head>
   <style>
       h3 {
          color: blue;
       }
   </style>
</head>

또한 모든 HTML 파일에 스타일 섹션을 포함해야 하기 때문에 권장되지 않습니다. 스타일은 포함된 페이지에만 적용되고 페이지 전체에서 재사용할 수 없으며 효율적이거나 실용적이지 않습니다.



세 번째 방법, 외부 CSS
모든 스타일을 포함하고 페이지 자체를 통해 HTML 페이지에 연결되는 별도의 CSS 파일 또는 파일을 생성해야 합니다.

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

위의 구문을 사용하여 외부 파일을 HTML에 연결합니다.
두 가지 속성을 추가해야 합니다. 첫 번째는 rel입니다. 파일 간의 관계를 정의합니다. rel="stylesheet"는 HTML에 이것이 스타일시트 파일임을 알려줍니다. 다른 하나는 href입니다. 파일의 위치를 ​​가리킵니다. href="style.css"는 HTML이 파일을 찾을 위치를 알려줍니다. 관련(HTML 위치에 대한) 경로 또는 URL을 사용할 수 있습니다. 위치로.

이것은 스타일을 로드하는 데 권장되는 방법이며 가장 널리 사용되는 방법입니다. 콘텐츠/일반 구조와 해당 콘텐츠의 프레젠테이션/스타일을 별도로 유지하고 응용 프로그램을 통해 스타일을 재사용할 수 있으며 좋은 방법으로 간주됩니다.



시간 내 주셔서 감사합니다,

다음 부분에서는 몇 가지 자세한 예제로 시작하여 논의한 모든 개념을 결합하는 방법을 살펴보겠습니다.

좋은 웹페이지 즐겨찾기