본문으로 건너뛰기
실습하기

CSS를 불러오는 방법

1. 외부 CSS (External CSS)

  • CSS 코드를 별도의 파일로 만들어 해당 파일을 HTML 문서에 연결하는 방식입니다.

  • 코드 예시:

    HTML 문서에 외부 CSS 파일을 연결
    <head>
      <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>

    styles.css라는 별도의 파일 안에 스타일 코드가 들어있습니다.


2. 내부 CSS (Internal CSS)

  • HTML 문서의 <head> 섹션에 <style> 태그를 사용하여 스타일을 정의하는 방식입니다. 이렇게 정의된 CSS는 해당 HTML 문서 내에서만 스타일이 적용됩니다.

  • 코드 예시:

    HTML 문서 내부에 CSS 정의
    <head>
      <style>
        body {
          background-color: lightblue;
        }
      </style>
    </head>

3. 인라인 CSS (Inline CSS)

  • HTML 요소에 직접 스타일을 적용하는 방식입니다. 정의한 스타일은 해당 요소에만 적용됩니다.

  • 코드 예시:

    HTML 요소에 직접 스타일 적용
    <p style="color:red;">이 문장은 빨간색으로 표시됩니다.</p>

3가지 방법 중 어떤 방법을 선택할지는 프로젝트의 요구 사항, 유지 보수의 용이성 등 다양한 요인을 고려하여 결정합니다.


코드에 강조된 부분을 따라 입력해 보세요.​

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!