[HTML] HTML 요소에 CSS 스타일 적용하기

728x90

HTML과 CSS: 웹 페이지 스타일링의 기초 🎨🌐

안녕하세요, 웹 개발에 관심 있는 여러분! 웹 페이지를 디자인할 때 HTML과 CSS는 빼놓을 수 없는 중요한 요소입니다. HTML은 웹 페이지의 구조를 만들고, CSS는 이 구조에 색과 형태를 부여합니다. 오늘은 HTML 요소에 CSS 스타일을 적용하는 기본적인 방법에 대해 알아보겠습니다. 이 블로그를 통해 웹 페이지를 보다 아름답고 사용자 친화적으로 만드는 방법을 배워보세요.

HTML과 CSS의 기본

HTML (HyperText Markup Language): 웹 페이지의 구조를 정의합니다. 텍스트, 이미지, 링크 등 웹 페이지의 콘텐츠를 구성하는 요소들을 마크업합니다.
CSS (Cascading Style Sheets): HTML 요소에 스타일을 적용합니다. 색상, 레이아웃, 폰트, 크기 등 다양한 시각적 속성을 정의하여 웹 페이지의 디자인을 결정합니다.

HTML 요소에 CSS 스타일 적용하기

인라인 스타일(Inline Style):
- HTML 요소에 직접 CSS 스타일을 적용하는 방법입니다.
- 각 요소에 style 속성을 사용하여 CSS 규칙을 정의합니다.

<p style="color: blue; font-size: 20px;">이것은 파란색 글씨입니다.</p>

내부 스타일 시트(Internal Style Sheet):
- HTML 문서 내의 <head> 태그 안에 <style> 태그를 사용하여 스타일을 정의합니다.
- 문서 내부에서만 사용되는 스타일을 정의할 때 유용합니다.

<head>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>

외부 스타일 시트(External Style Sheet):
- 별도의 CSS 파일을 만들고, HTML 문서에서 이 파일을 링크하여 사용합니다.
- 스타일 규칙을 여러 페이지에 걸쳐 일관되게 적용할 수 있습니다.

<!-- HTML 문서 내에서 외부 CSS 파일 링크 -->
<link rel="stylesheet" href="styles.css">

/* styles.css 파일 */
body {
  background-color: #f0f0f0;
}
h1 {
  color: navy;
}

CSS 기본 선택자

요소 선택자: 특정 타입의 HTML 요소를 모두 선택합니다.
클래스 선택자: class 속성이 일치하는 요소들을 선택합니다.
ID 선택자: id 속성이 일치하는 단일 요소를 선택합니다.

마무리하며...

HTML과 CSS를 활용한 웹 페이지 스타일링은 웹 개발의 필수적인 부분입니다. 기본적인 스타일링 방법을 이해하고 적용함으로써, 웹 페이지를 더욱 돋보이게 만들 수 있습니다. 지금까지 배운 기초 지식을 바탕으로 다양한 디자인을 실험해보세요!

Reference:

HTML Tutorial

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

CSS Tutorial