HTML에 CSS를 추가하는 방법

3859 단어 csswebdevhtmlbeginners
HTML(Hyper Text Markup Language)과 CSS(Cascading Style Sheets)는 웹 사이트를 만드는 데 사용되는 두 가지 주요 언어입니다. HTML은 웹사이트의 구조를 제공하지만 CSS는 웹사이트의 스타일을 지정하는 데 사용됩니다. 이를 통해 사용자는 매력적이고 잘 구성된 웹사이트를 디자인할 수 있습니다.

전제 조건



이 문서에서는 독자에게 다음이 있다고 가정합니다.
  • 텍스트 편집기
  • 기본 HTML 지식.
  • 기본 CSS 지식.

    • CSS가 HTML 문서에 추가된 경우에만 스타일 선언을 HTML 코드에 적용할 수 있습니다. 그러나 많은 초보자 개발자는 CSS를 HTML에 추가하는 데 어려움을 겪습니다. 따라서 이 문서에서는 세 가지 스타일 지정 기법을 다룹니다. 그것들은 다음과 같습니다:

    인라인 CSS



    여기서 스타일은 style 속성을 사용하여 HTML 요소 태그에 직접 추가됩니다.

    <h1 style = "color : blue;" >Inline CSS</h1>

    예를 들어,
    요소의 텍스트 색상과 배경색을 변경하려면 다음을 수행할 수 있습니다.
  • 스타일 속성을 요소에 추가합니다.
  • 스타일 속성을 스타일 속성에 추가합니다.

    •   <p style = " " > Paragraph </p>




      <p style = "color:blue; background-color:yellow;"> Paragraph </p>


    높은 CSSspecificity로 인해 이 유형의 스타일을 사용하여 한 번에 하나의 요소만 대상으로 지정할 수 있습니다. 인라인 스타일은 HTML 코드가 번거롭고 읽기 불편하기 때문에 드문 경우를 제외하고 일상적인 애플리케이션에서는 사용되지 않습니다.

    Avoid using inline CSS as much as you can, but if you must, do it sparingly.



    내부 CSS



    여기서 스타일은 HTML 문서의 head 섹션에 있는 HTML<style> 태그를 사용하여 추가됩니다. 그런 다음 <style> 태그에서 적절한 선택기를 사용하여 스타일 속성을 정의합니다. 내부 CSS는 종종 포함된 CSS라고도 합니다.

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

  </head>

  <body>

     <h1>Internal CSS</h1>

  </body>

    내부 스타일 지정 방법을 사용하여 `h1` 요소의 색상을 변경하는 방법



    단일 HTML 페이지의 스타일은 내부 CSS 스타일 지정 방법을 사용하여 정의됩니다. 이것은 이 방법의 주요 단점 중 하나입니다.

    The internal style method is therefore not used much in practice.


    외부 CSS



    지금까지 설명한 스타일링 기법은 모두 HTML 문서(헤드 또는 본문)에 포함되어 있습니다. 하지만 이 경우 외부 스타일 시트에서 <link> 태그를 통해 CSS 스타일을 가져옵니다. 이는 코드를 유지 관리하고 읽기 쉽게 만들기 때문에 중요합니다.
    외부 CSS 스타일 방법을 사용하려면 외부 스타일.css 파일을 생성하고 이를 HTML에 연결해야 합니다.

    예를 들어, 이 기술을 사용하여 HTML 요소의 스타일을 지정하려는 경우 다음을 수행할 수 있습니다.
  • .css 확장자를 사용하여 외부 스타일 시트 파일을 생성합니다(style.css라는 파일을 생성합니다.)
  • 이와 같이 선택기를 사용하여 style.css 파일 내부의 HTML 요소를 대상으로 지정합니다.
  • style.css 태그를 사용하여 <head> 파일을 HTML 문서의 <link> 섹션으로 가져옵니다.

    •    h1{
       color: blue;

       font-size: 16px;

     }

    외부 스타일시트에서 `h1` 요소를 타겟팅하는 방법





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

  <body>
     <h1> External CSS </h1>
  </body>

    style.css 파일을 HTML 문서로 가져오는 방법

    This method's ability to specify styles for multiple HTML pages is one of its greatest features.



    따라서 외부 CSS를 웹 페이지 스타일 지정에 가장 적합한 방법으로 만듭니다.

    결론



    HTML에 CSS를 포함하는 세 가지 접근 방식에 대해 배울 수 있기를 바랍니다.
    이 기사에서 얻은 지식을 사용하여 HTML 코드에 CSS를 자유롭게 추가하십시오.

    아래 의견 섹션에 있는 모든 질문에 기꺼이 답변해 드리겠습니다.
    웹 개발에 대해 더 알고 싶다면 에서 저를 팔로우하세요.

    읽어주셔서 감사합니다🎉.

    표지 사진: Clément Hélardot
    Spring Tools 4란 무엇입니까?
    URL 검색 매개변수를 통해 CSS 그림자 부분 타겟팅

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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