Styling HTML with CSS
html을 스타일링하는 css
CSS stands for Cascading Style Sheets.
Cascading Style Sheet의 줄임말 CSS
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS 묘사한다 html이 어떻게 스크린,종이,미디어에 표현되는지를
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS 는 많은 작업을 저장합니다 . 한 번에 여러 웹 페이지의 레이아웃을 제어 할 수 있습니다.
CSS can be added to HTML elements in 3 ways:
CSS는 다음 세 가지 방법으로 HTML 요소에 추가 할 수 있습니다.
- Inline - by using the style attribute in HTML elements
- 인라인 - HTML 요소의 style 속성을 사용해서
- Internal - by using a
<style> element in the <head> section - 내부적 head섹션안에서 style요소를 사용해서
- External - by using an external CSS file
- 외부의 CSS파일을 사용해서
The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.
CSS를 추가하는 가장 일반적인 방법은 별도의 CSS 파일에 스타일을 유지하는 것입니다. 그러나 여기에서는 인라인 및 내부 스타일링을 사용합니다. 이는 시연하기 쉽고 직접 시도하기가 쉽기 때문입니다.
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
This example sets the text color of the <h1> element to blue:
인라인 CSS
인라인 CSS는 단일 HTML 요소에 고유 한 스타일을 적용하는 데 사용됩니다.
인라인 CSS는 HTML 요소의 style 속성을 사용합니다.
이 예제에서는 <h1>요소 의 텍스트 색 을 파란색으로 설정합니다.
내부 CSS
내부 CSS는 단일 HTML 페이지의 스타일을 정의하는 데 사용됩니다.
내부 CSS는 요소 <head>내의 HTML 페이지 섹션에 정의됩니다 <style>.
예
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
직접 해보기»
외부 CSS
외부 스타일 시트는 많은 HTML 페이지의 스타일을 정의하는 데 사용됩니다.
외부 스타일 시트를 사용하면 하나의 파일을 변경하여 전체 웹 사이트의 모양을 변경할 수 있습니다!
외부 스타일 시트를 사용하려면 <head>HTML 페이지 의 섹션에 링크를 추가 하십시오.
예
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
직접 해보기»
외부 스타일 시트는 텍스트 편집기로 작성할 수 있습니다. 파일에는 HTML 코드가 없어야하며 .css 확장자로 저장해야합니다.
다음은 "styles.css"의 모양입니다.
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS 글꼴
CSS color속성은 사용할 텍스트 색상을 정의합니다.
CSS font-family속성은 사용할 글꼴을 정의합니다.
CSS font-size 속성은 사용할 텍스트 크기를 정의합니다.
예
<!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>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
직접 해보기»
CSS 테두리(border)
CSS border속성은 HTML 요소 주위에 테두리를 정의합니다.
예
p {
border: 1px solid powderblue;
}
직접 해보기»
CSS 패딩(여백)
CSS padding속성은 텍스트와 테두리 사이의 여백 (공백)을 정의합니다.
예
p {
border: 1px solid powderblue;
padding: 30px;
}
직접 해보기»
CSS 여백
CSS margin속성은 경계 밖의 여백 (공백)을 정의합니다.
예
p {
border: 1px solid powderblue;
margin: 50px;
}
직접 해보기»
id 속성
특정 특수 요소에 대한 특정 스타일을 정의하려면 요소에 id특성을 추가하십시오 .
<p id="p01">I am different</p>
다음 특정 ID로 요소의 스타일을 정의하십시오.
참고 : 요소의 id는 페이지 내에서 고유해야하므로 id selector가 하나의 고유 한 요소를 선택하는 데 사용됩니다!
Attribute 클래스
특수 유형의 요소에 대한 스타일을 정의하려면 요소에 class속성을 추가하십시오 .
<p class="error">I am different</p>
다음 특정 클래스를 사용하여 요소의 스타일을 정의합니다.
외부 참조
외부 스타일 시트는 전체 URL 또는 현재 웹 페이지와 관련된 경로로 참조 할 수 있습니다.
이 예제에서는 전체 URL을 사용하여 스타일 시트에 연결합니다.
예
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
직접 해보기»
이 예제는 현재 웹 사이트의 html 폴더에있는 스타일 시트에 연결됩니다.
예
<link rel="stylesheet" href="/html/styles.css">
직접 해보기»
이 예제는 현재 페이지와 같은 폴더에있는 스타일 시트에 연결됩니다.
예
<link rel="stylesheet" href="styles.css">
직접 해보기»
단원 요약
style인라인 스타일에 HTML 속성 사용- HTML
<style>요소를 사용하여 내부 CSS 정의 - HTML
<link>요소를 사용하여 외부 CSS 파일을 참조하십시오. - HTML
<head>요소를 사용하여 <style> 및 <link> 요소 저장 color텍스트 색상에 CSS 속성 사용font-family텍스트 글꼴에 CSS 속성 사용font-size텍스트 크기에 CSS 속성 사용border테두리에 CSS 속성 사용padding테두리 안의 공간에 CSS 속성 사용margin경계 외부 공간에 CSS 속성 사용
Test Yourself with Exercises!
HTML 스타일 태그
| Tag | Description |
|---|
| <style> | Defines style information for an HTML document |
| <link> | Defines a link between a document and an external resource |