HTML5 & CSS3 배워보자 (5화 : CSS 스타일 기초)

zzangdis 2024. 5. 4.

웹 문서의 기본적인 구조는 모두 완성되었지만, 여전히 심심하고 어설프게 느껴집니다. 요소들이 정리되지 않고 단순히 나열되어 있어서 보기에 좋지 않습니다. 이제 이 문서에 CSS라는 옷을 입혀 보겠습니다. HTML로 만들어둔 골격에 CSS를 적용하는 것이죠. 웹 디자인이나 웹 개발에서 CSS는 매우 중요한데, HTML보다 더 많은 역할을 하기도 합니다. 다음으로 CSS의 주요 속성들을 익혀 웹 디자인을 한 층 더 업그레이드해보세요.

CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 핵심 개념입니다. HTML은 웹 문서의 뼈대를 만드는데 사용되며, 텍스트, 이미지, 표 등 다양한 요소를 웹 페이지에 배치합니다. 반면에 CSS는 이러한 요소들의 디자인과 스타일을 담당합니다. 텍스트의 색상과 크기, 이미지의 크기와 위치, 표의 색상과 배치 방법 등을 결정하여 웹 문서에 생동감을 불어넣습니다.

따라서 CSS를 통해 웹 문서를 디자인하고 꾸미는 것은 웹 개발에서 매우 중요한 부분입니다. CSS를 이용하면 HTML 요소들을 원하는 스타일로 꾸밀 수 있으며, 이를 통해 사용자 경험을 향상시키고 웹 페이지의 시각적 효과를 높일 수 있습니다.

이제부터는 CSS의 기본 개념부터 차근차근 살펴보겠습니다. 함께 CSS를 이용하여 웹 문서를 더욱 멋지게 꾸며보도록 하겠습니다.

1.스타일

웹 문서에서 스타일은 HTML 문서에서 자주 사용하는 글꼴, 색상, 정렬, 각 요소들의 배치 방법 등 문서의 외관을 결정하는 내용을 의미합니다. 스타일을 통해 텍스트 단락의 줄 간격을 조절하거나 표의 테두리를 점선으로 변경하는 등의 디자인 요소를 제어할 수 있습니다.

HTML로도 스타일을 적용할 수 있지만, 따로 스타일을 사용하는 이유는 다음과 같습니다.

웹 문서의 내용과 상관없이 디자인만 변경이 가능합니다.
다양한 기기에 대응하는 탄력적인 문서 작성이 가능합니다.

<기본형>

선택자 { 스타일 속성 : 속성 값; }

<예시>

/* 텍스트를 중앙에 배치하기 위한 규칙 */
p { text-align : center; }

/* 글자크기를 20px, 색상은 오랜지색으로 변경하는 규칙 */
h2
{
font-size : 20px;
color : orange;
}

2.스타일 시트

앞의 스타일 처럼 웹 문서 안에는 여러 개의 스타일 규칙이 사용되는 경우가 많은데, 이런 규칙들을 모아놓은 것을 스타일 시트라고 합니다.

[내부 스타일 시트]

웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것을 '내부 스타일 시트'라고 합니다.

스타일 정보는 웹 문서를 브라우저 화면에 표시하기 전에 결정되어야 하기 때문에, 모든 스타일 정보는 <head> 태그와 </head> 태그 사이에 정의되어야 합니다. 이를 위해 <style> 태그와 </style> 태그 사이에 스타일을 작성합니다.

내부 스타일 시트를 사용하면 HTML 문서 안에서 스타일을 간편하게 정의할 수 있으며, 관련된 스타일들을 한 곳에 모아 관리할 수 있습니다.

<예시>

<head>
    <meta charset="UTF-8">
    <title>내부 스타일 시트</title>
    <style>
      ul {
            color : blue;             /* 목록의 글자색*/
            list-style-type : square; /* 불릿형태 : 사각형 */
      }
    </style>
</head>
<body>
  <img src="thai.jpg" alt="태국">
  <h1>동남아 관광지</h1>
  <ul>
    <li>태국</li>
    <li>인도네시아</li>
    <li>베트남</li>
  </ul>
</body>

<예시화면>

[외부 스타일 시트]

웹 사이트를 제작할 때 하나의 웹 문서로만 구성되는 경우는 거의 없습니다. 대부분의 경우, 여러 개의 문서를 작성하여 웹 사이트를 완성하게 됩니다. 이러한 경우, 각 문서의 디자인 일관성을 유지하기 위해 스타일을 별도의 파일로 모아놓고 필요할 때마다 이 파일을 참조합니다. 이렇게 스타일 정보를 별도로 저장한 문서를 '외부 스타일 시트'라고 하며, 이 파일은 일반적으로 '.css' 확장자를 가집니다. 외부 스타일 시트를 사용하면 여러 문서에서 동일한 스타일을 쉽게 적용할 수 있고, 유지보수가 용이해집니다.

<기본형>

<link href = "외부 스타일 파일 경로" rel = "stylesheet" type = "text/css">

<예제>

<head>
    <meta charset="UTF-8">
    <title>외부 스타일 시트</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <img src="thai.jpg" alt="태국">
  <h1>동남아 관광지</h1>
  <ul>
    <li>태국</li>
    <li>인도네시아</li>
    <li>베트남</li>
  </ul>
</body>

<예제화면>

[인라인 스타일]

인라인 스타일은 해당 스타일을 적용할 대상 태그에 style = "속성 : 속성 값;"을 직접 넣어 사용하는 형태입니다.

간단하게 변경하고 싶을 때 사용하는 기능입니다.

<기본형>

<p style = "속성 : 속성값;">

<예시>

<head>
    <meta charset="UTF-8">
    <title>인라인 스타일</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <img src="thai.jpg" alt="태국">
  <h1>동남아 관광지</h1>
  <ul style="color : orange;">
    <li>태국</li>
    <li>인도네시아</li>
    <li>베트남</li>
  </ul>
</body>

<예시화면>

※ 다음화에서는 "CSS3 스타일 중 주요 선택자"에 대해서 공부하겠습니다!!

https://zzangdis.tistory.com/37

HTML5 & CSS3 배워보자 (6화 : CSS 선택자)

이번 6화에서는 선택자(Selector)에 대해 알아보겠습니다. 선택자는 하나의 태그를 지정할 수 있을 뿐 아니라, 여러 요소를 묶어 별도의 선택자로 지정할 수도 있습니다. 이렇게 함으로써 스타일을

zzangdis.com

'HTML5 & CSS3' 카테고리의 다른 글

HTML5 & CSS3 배워보자 (7화 : 캐스캐이딩 스타일 시트 우선순위) (0)	2024.05.07
HTML5 & CSS3 배워보자 (6화 : CSS 선택자) (0)	2024.05.06
HTML5 & CSS3 배워보자 (4화 : Input, select) (0)	2024.04.30
HTML5 & CSS3 배워보자 (3화 : Form) (0)	2024.04.29
HTML5 & CSS3 배워보자 (2화 : Image, Link) (0)	2024.04.18