jiraynor’s 하루 2시간 프로그래밍 - HTML 11. Style - CSS 영상 보러가기

HTML Styles - CSS

CSS란?

CSS(Cascading Style Sheet)는 웹 페이지의 레이아웃 형식을 지정하는 데 사용됩니다.

CSS를 사용하면 색상, 글꼴, 텍스트 크기, 요소 간 간격, 요소의 배치 및 배치 방법, 사용하는 배경 이미지 또는 배경 색상, 디바이스 및 화면 크기에 따라 다른 디스플레이 등을 제어할 수 있습니다.

Tip: 캐스케이드라는 단어는 부모 요소에 적용되는 스타일이 부모 내의 모든 자식 요소에도 적용됨을 의미합니다. 따라서 본문 텍스트의 색상을 “파란색”으로 설정하면 본문 내의 모든 제목, 단락 및 기타 텍스트 요소도 동일한 색을 갖게 됩니다(다른 것을 지정하지 않는 한).

CSS 사용하기

CSS는 다음 3가지 방법으로 HTML 문서에 추가할 수 있습니다.

Inline - HTML 요소 내부의 style 속성을 사용합니다.
Internal - <head> 섹션의 <style> 요소를 사용합니다.
External - <link> 요소를 사용하여 외부 CSS 파일에 링크합니다.

CSS를 추가하는 가장 일반적인 방법은 외부 CSS 파일에 스타일을 유지하는 것입니다. 단, 이 튜토리얼에서는 인라인 스타일과 내부 스타일을 사용합니다.이는 시연하기 쉽고 사용자가 직접 사용해 볼 수 있기 때문입니다.

Inline CSS

인라인 CSS는 단일 HTML 요소에 고유한 스타일을 적용하기 위해 사용됩니다.

인라인 CSS는 HTML 요소의 style 속성을 사용합니다.

다음 예제에서는 <h1> 요소의 텍스트 색상을 파란색으로 설정하고 <p> 요소의 텍스트 색상을 빨간색으로 설정합니다.

예제 1

<h1 style="color:blue;">파란색 표제</h1>

<p style="color:red;">빨간색 문단</p>

Internal CSS

내부 CSS는 단일 HTML 페이지의 스타일을 정의하기 위해 사용됩니다.

내부 CSS는 HTML 페이지의 <head> 섹션에서 <style> 요소 내에서 정의됩니다.

다음 예제에서는 해당 페이지의 모든 <h1> 요소의 텍스트 색상을 파란색으로 설정하고 모든 <p> 요소의 텍스트 색상을 빨간색으로 설정합니다. 또, 페이지는 「파우더 블루」배경색으로 표시됩니다.

예제 2

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>표제입니다.</h1>
<p>문단입니다.</p>

</body>
</html>

External CSS

외부 스타일시트는 많은 HTML 페이지의 스타일을 정의하는 데 사용됩니다.

외부 스타일시트를 사용하려면 각 HTML 페이지의 <head> 섹션에 링크를 추가합니다.

예제 3

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>표제입니다.</h1>
<p>문단입니다.</p>

</body>
</html>

외부 스타일시트는 모든 텍스트 편집기에서 작성할 수 있습니다. 파일에는 HTML 코드를 포함할 수 없으며 .css 확장자로 저장해야 합니다.

styles.css 파일은 다음과 같습니다.

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

Tip: 외부 스타일시트를 사용하면 하나의 파일을 변경함으로써 전체 웹 사이트의 모양을 변경할 수 있습니다!

CSS 색상, 글꼴 및 크기

여기에서는 일반적으로 사용되는 CSS 속성에 대해 설명합니다. 여러분은 나중에 그것에 대해 더 많이 배울 거예요.

CSS color 속성은 사용할 텍스트 색상을 정의합니다.

CSS font-family 속성에 의해 사용되는 폰트가 정의됩니다.

CSS font-size 속성은 사용할 텍스트 크기를 정의합니다.

예제 4

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>표제입니다.</h1>
<p>문단입니다.</p>

</body>
</html>

CSS 테두리

CSS border 속성은 HTML 요소 주위의 경계를 정의합니다.

Tip: 거의 모든 HTML 요소의 경계를 정의할 수 있습니다.

예제 5

p {
  border: 2px solid powderblue;
}

CSS 패딩

CSS padding 속성은 텍스트와 테두리 사이의 패딩(스페이스)을 정의합니다.

예제 6

p {
  border: 2px solid powderblue;
  padding: 30px;
}

CSS 여백(마진)

CSS margin 속성은 테두리 외부에 여백(스페이스)을 정의합니다.

p {
  border: 2px solid powderblue;
  margin: 50px;
}

External CSS 링크

외부 스타일시트는 전체 URL 또는 현재 웹 페이지에 상대적인 경로로 참조할 수 있습니다.

예제 7 (전체 경로)

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

예제 8 (상대 경로)

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

예제 9 (현재 경로)

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

Summary

인라인 스타일링에 HTML style 속성 사용
HTML <style> 요소를 사용하여 내부 CSS를 정의합니다.
외부 CSS 파일을 참조하려면 HTML <link> 요소를 사용합니다.
HTML <head> 요소를 사용하여 <style> 및 <link> 요소를 저장합니다.
텍스트 색상에 CSS color 속성 사용
텍스트 글꼴에 CSS font-family 속성 사용
텍스트 크기에 CSS font-size 속성 사용
경계에 CSS border 속성 사용
경계 내부 공간에 CSS padding 속성을 사용합니다.
테두리 밖의 공간에 CSS margin 속성 사용

HTML 11. Style - CSS

CSS는 많은 작업을 절약합니다. 여러 웹 페이지의 레이아웃을 한 번에 제어할 수 있습니다.