HTML CSS

CSS는 Cascading Style Sheet 약어로 계단식 스타일 시트를 의미한다.

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

CSS란 무엇인가?

계단식 스타일 시트(CSS)는 웹 페이지의 레이아웃을 포맷하는 데 사용된다.

CSS를 사용하면 색, 글꼴, 텍스트 크기, 요소 사이의 간격, 요소의 배치 및 배치 방법, 사용할 배경 이미지 또는 배경색, 다양한 장치 및 화면 크기에 대한 다양한 디스플레이 등을 제어할 수 있다!

계단식이라는 단어는 부모 요소에 적용된 스타일이 부모 요소 내의 모든 자식 요소에도 적용된다는 것을 의미한다.
따라서 본문 텍스트의 색상을 "파란색"으로 설정하면 본문 내의 모든 제목, 문단 및 기타 텍스트 요소도 동일한 색상을 갖게 된다(다른 항목을 지정하지 않는 한)!

CSS 사용하기

CSS는 세 가지 방법으로 HTML 문서에 추가할 수 있다:

인라인(inline) - HTML 요소 내부의 스타일 속성을 사용한다.
내부(internal) - <head> 섹션의 <style> 요소 사용
외부(external) - <link> 요소를 사용하여 외부 CSS 파일에 연결한다

CSS를 추가하는 가장 일반적인 방법은 외부 CSS 파일에 스타일을 유지하는 것이다.

그러나 이 튜토리얼에서는 인라인 및 내부 스타일을 사용할 것이다. 이 스타일은 시연하기 쉽고 사용자가 직접 시도하기도 쉽기 때문이다.

인라인 CSS(inline)

인라인 CSS는 단일 HTML 요소에 고유한 스타일을 적용하는 데 사용된다.
인라인 CSS는 HTML 요소의 스타일 속성을 사용한다.
다음 예제에서는 <h1> 요소의 텍스트 색상을 파란색으로 설정하고 <p> 요소의 텍스트 색상을 빨간색으로 설정한다:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">푸른색 제목</h1>

<p style="color:red;">붉은색 단란.</p>

</body>
</html>

내부 CSS(Internal CSS)

내부 CSS는 단일 HTML 페이지에 대한 스타일을 정의하는 데 사용된다.
내부 CSS는 HTML 페이지의 <head> 섹션에서 <style> 요소 내에서 정의된다.

다음 예제에서는 모든 <h1> 요소(해당 페이지)의 텍스트 색상을 파란색으로 설정하고 모든 <p> 요소의 텍스트 색상을 빨간색으로 설정한다. 또한 페이지는 "파우더 블루" 배경색으로 표시된다:

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

<h1>이것은 제목이다</h1>
<p>이것은 단락이다.</p>

</body>
</html>

외부 CSS(External CSS)

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

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

외부 스타일 시트는 모든 텍스트 편집기에서 작성할 수 있다.

이 파일은 HTML 코드를 포함할 수 없으며 .css 확장자로 저장해야 한다.

"styles.css" 파일은 다음과 같다:

styles.css

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

CSS 색깔, 글꼴과 글자크기

여기서는 일반적으로 사용되는 몇 가지 CSS 속성을 살펴볼 것이다. 우리는 나중에 그것들에 대해 더 배울 것이다.

CSS color 속성은 사용할 텍스트 색상을 정의한다.
CSS font-family 속성은 사용할 글꼴을 정의한다.
CSS font-size 속성은 사용할 텍스트 크기를 정의한다.

아래 CSS에 color, font-family, font-size 속성을 활용한 예제이다.

styles.css

<!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 윤곽선(Border)

CSS border 속성은 HTML 요소 주위에 테두리를 정의한다.

팁: 거의 모든 HTML 요소에 대한 테두리를 정의할 수 있다.

<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
}
</style>
</head>
<body>

<h1>이것은 제목이다.</h1>

<p>이것은 단락이다.</p>
<p>이것은 단락이다.</p>
<p>이것은 단락이다.</p>

</body>
</html>

CSS Padding 속성

CSS padding 속성은 텍스트와 테두리 사이의 여백(스페이스)을 정의한다.

<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
padding: 30px;
}
</style>
</head>
<body>

<h1>이것은 제목이다</h1>

<p>이것은 단락이다.</p>
<p>이것은 단락이다.</p>
<p>이것은 단락이다.</p>

</body>
</html>

CSS 여백(Margin)

CSS margin속성은 테두리 밖의 여백(공백)을 정의한다.

<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
margin: 50px;
}
</style>
</head>
<body>

<h1>이것은 제목이다</h1>

<p>이것은 단락이다.</p>
<p>이것은 단락이다.</p>
<p>이것은 단락이다.</p>

</body>
</html>

padding과 margin 이해하기

외부 CSS에 연결하기

외부 스타일 시트는 전체 URL 또는 현재 웹 페이지를 기준으로 한 경로로 참조할 수 있다.

다음 예제에서는 전체 URL을 사용하여 스타일 시트에 연결한다:

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

<h1>이것은 제목</h1>
<p>이것은단락이다.</p>

</body>
</html>

다음 예제는 현재 웹 사이트의 html 폴더에 있는 스타일시트에 연결한다:

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

<h1>이것은 제목</h1>
<p>이것은 단락이다.</p>

</body>
</html>

다음 예제는 현재 페이지와 동일한 폴더에 있는 스타일시트에 연결한다:

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

<h1>이것은 제목</h1>
<p>이것은 단락이다.</p>

</body>
</html>

마무리

지금까지 CSS를 사용하는 기본 방법에 대해 살펴보았다.

style, <style>, <link> head 요소와 color, font-family, font-size, border, padding, margin 속성을 살펴보았다.

인라인, 내부, 외부 스타일 시트에 대해 살펴보았다.

가장 많이 사용되는 CSS는 외부 CSS 방법이다. 왜냐하면 CSS 수정할 때, 관리하기가 쉽기 때문이다.

꼭 CSS를 활용하여 HTML 문서를 꾸며보자.

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지 (새창열림)

'HTML > HTML 기본문법' 카테고리의 다른 글

HTML 링크-다른색상 (0)	2023.04.27
HTML 링크(Links-Hyperlinks) (0)	2023.04.26
HTML 색조, 채도, 명도(HSL) 색상 (0)	2023.04.24
HTML HEX 색상 (0)	2023.04.23
HTML RGB와 RGBA 색상 (0)	2023.04.22

enjoyCoding

HTML CSS

CSS란 무엇인가?

CSS 사용하기

인라인 CSS(inline)

내부 CSS(Internal CSS)

외부 CSS(External CSS)

CSS 색깔, 글꼴과 글자크기

CSS 윤곽선(Border)

CSS Padding 속성

CSS 여백(Margin)

padding과 margin 이해하기

외부 CSS에 연결하기

마무리

'HTML > HTML 기본문법' 카테고리의 다른 글

댓글

티스토리툴바

HTML CSS

CSS란 무엇인가?

CSS 사용하기

인라인 CSS(inline)

내부 CSS(Internal CSS)

외부 CSS(External CSS)

CSS 색깔, 글꼴과 글자크기

CSS 윤곽선(Border)

CSS Padding 속성

CSS 여백(Margin)

padding과 margin 이해하기

외부 CSS에 연결하기

마무리

'HTML > HTML 기본문법' 카테고리의 다른 글

관련글

댓글

티스토리툴바