HTML 페이지에 CSS 스타일을 추가하는 방법: 초보자 안내서

WBOY

풀어 주다： 2024-09-05 06:48:03

원래의

937명이 탐색했습니다.

How to Add CSS Styles to an HTML Page: A Beginner

소개

당신이 주방에서 요리를 준비하고 있다고 상상해 보세요. 고기, 야채, 향신료 등 주요 재료(HTML)가 앞에 있습니다. 그러나 이러한 재료를 요리의 걸작으로 바꾸려면 요리 기술, 조미료 및 플레이팅이 필요하며 이것이 바로 CSS(Cascading Style Sheets)가 작동하는 곳입니다. CSS는 웹을 위한 "조미료 예술"과 같습니다. CSS가 없으면 HTML 페이지는 영양가는 있지만 약간 밋밋할 것입니다. 이 가이드에서는 CSS를 사용하여 웹사이트를 "조미료"로 만들어 간단한 HTML 구조를 다음과 같이 변환하는 방법을 살펴보겠습니다. 시각적으로 매력적이고 조화로운 페이지.

CSS란 무엇인가요?

CSS(Cascading Style Sheets)는 웹 디자인을 위한 "레시피북"입니다. 다양한 요리 기술을 사용하여 독특한 맛을 낼 수 있는 주방에서와 마찬가지로 CSS를 사용하면 HTML 페이지의 스타일을 셀 수 없이 다양하게 지정할 수 있습니다. CSS의 간략한 역사: 1990년대에 탄생한 CSS는 웹 페이지 디자인 방식에 혁명을 일으켰습니다. "프레젠테이션"(CSS)의 "구조"(HTML).

CSS 사용예
소스를 사용하여 요리에 색상을 추가할 수 있는 것처럼 CSS를 사용하면 텍스트에 색상을 지정하고 요소를 창의적으로 배열하며 웹페이지에 예술적인 느낌을 더할 수 있습니다.

HTML 페이지에 CSS를 추가하는 방법
부엌에서 요리를 준비하는 다양한 방법이 있는 것처럼 HTML 페이지에 CSS를 추가하는 세 가지 주요 방법이 있습니다. 각 방법에는 프로젝트 요구 사항에 따라 장점과 단점이 있습니다.

인라인 CSS

요리에 직접 소금 한 꼬집을 추가하는 것과 같습니다. 작은 스타일을 바꾸는 데는 효과적이지만 전체 잔치에 양념을 쳐야 하는 경우에는 적합하지 않습니다.

예:

<p style="color: blue;">Blue text</p>

로그인 후 복사

장점: 사용하기 쉽고 작은 변경에도 빠릅니다.
단점: 대규모 프로젝트에서는 유지 관리가 어렵고, 너무 자주 사용하면 혼란을 야기할 수 있습니다.

내부 CSS:

이것은 요리하기 전에 특정 재료를 그릇에 담는 것과 같습니다. 단일 페이지에 특정 스타일을 사용하지만 모든 변경 사항은 해당 문서에서 이루어져야 합니다.

예:

<style>
  p {
    color: blue;
  }
</style>

로그인 후 복사

장점: 모든 스타일이 한곳에 있어 관리가 쉽습니다.
단점: 한 페이지에만 적용 가능하며 여러 페이지로 구성된 웹사이트에는 적합하지 않습니다.

외부 CSS:

이는 마치 항아리에 특별한 소스를 준비하고 이를 다양한 요리에 사용하는 것과 같습니다. 사이트의 모든 페이지에 적용할 수 있는 별도의 스타일 시트입니다.

예:

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

로그인 후 복사

장점: 재사용이 가능하고 관리가 쉬우며 대규모 웹사이트에 적합합니다.
단점: 여러 파일을 관리해야 하지만 다재다능함에 비해 비용은 적습니다.

레시피를 따르는 것과 마찬가지로 CSS에는 완벽한 디자인을 만들기 위해 알아야 할 기본 구문이 있습니다.

선택자

선택자는 스타일을 지정하려는 특정 "성분"입니다. 특정 유형(예: 단락의 경우 p)의 모든 요소를 선택하거나 클래스(.class-name) 또는 ID(#id-name)를 사용할 수 있습니다.

예:

p {
  color: red;
}

.highlight {
  background-color: yellow;
}

#main-title {
  font-size: 2em;
}

로그인 후 복사

속성 및 값

속성은 향신료와 같습니다. 수정하려는 항목(예: 색상, 글꼴 크기)을 지정하고, 값은 사용 중인 향신료의 양이나 유형(예: 빨간색, 16px)입니다.

예:

p {
  color: red; /* Property: color, Value: red */
}

로그인 후 복사

외부 스타일 시트 만들기
이제 기본 구문을 이해했으므로 모든 HTML 페이지에 적용할 수 있는 외부 스타일 시트인 "비밀 소스 병"을 만들 차례입니다.

외부 스타일 시트를 만드는 단계

styles.css라는 새 파일을 만듭니다. 스타일 작성을 시작하세요.

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

h1 {
  color: #333;
  text-align: center;
}

p {
  line-height: 1.6;
}

로그인 후 복사

를 사용하여 CSS 파일을 HTML 페이지에 연결하세요. 의 태그:

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

로그인 후 복사

HTML 페이지에 CSS 추가:

다음은 간단한 HTML 페이지와 외부 스타일 시트를 결합하여 완성된 "요리"를 만드는 방법에 대한 실제 예입니다.

HTML:

My First Styled Page <link rel="stylesheet" href="styles.css">

Welcome to My Web Kitchen

This is my first HTML page with style!

로그인 후 복사

CSS:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    line-height: 1.6;
}

로그인 후 복사

진정한 "웹 셰프"가 되기 위한 모범 사례는 다음과 같습니다.

의미 있는 클래스 이름 사용:
잘 쓰여진 레시피처럼 클래스 이름도 목적을 명확하게 표현해야 합니다.

스타일 시트 정리:
깔끔하고 잘 정돈된 주방처럼 코드를 깔끔하고 주석 처리된 상태로 유지하세요.

과도한 인라인 CSS 피하기:
소금을 과도하게 사용하지 않는 것처럼, 인라인 스타일을 너무 많이 적용하지 말고 유지 관리를 위해 외부 스타일 시트를 선호하세요.