본문 바로가기
HTML

HTML 스타일 - CSS(HTML Styles - CSS)

개발자 살리에리 2018. 6. 12. 00:00


CSS = Styles and Colors

Manipulate Text
Colors,  Boxes

Styling HTML with CSS

CSS로 HTML 스타일 지정하기


CSS stands for Cascading Style Sheets.

CSS는 의미 C의 ascading의 S의 tyle S의 heets.

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

내부 - 섹션 의 <style>요소를 사용하여<head>

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 파일에 스타일을 유지하는 것입니다. 그러나 여기에서는 인라인 및 내부 스타일링을 사용합니다. 이는 시연하기 쉽고 직접 시도하기가 쉽기 때문입니다.


Tip: You can learn much more about CSS in our CSS Tutorial.

팁 : CSS에 대한 자세한 내용은 CSS 자습서를 참조하십시오 .


Inline CSS

인라인 CSS


An inline CSS is used to apply a unique style to a single HTML element.

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

An inline CSS uses the style attribute of an HTML element.

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

This example sets the text color of the <h1> element to blue:

이 예제에서는 <h1>요소 의 텍스트 색 을 파란색으로 설정합니다.


Example

1
<h1 style="color:blue;">This is a Blue Heading</h1>
cs

 

Try it Yourself »


Internal CSS

내부 CSS


An internal CSS is used to define a style for a single HTML page.

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

An internal CSS is defined in the <head> section of an HTML page, within a <style> element:

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


Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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>
cs


Try it Yourself »


External CSS

외부 CSS


An external style sheet is used to define the style for many HTML pages.

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

With an external style sheet, you can change the look of an entire web site, by changing one file!

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

To use an external style sheet, add a link to it in the <head> section of the HTML page:

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


Example

1
2
3
4
5
6
7
8
9
10
11
12
<!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>
cs


Try it Yourself »


An external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.

외부 스타일 시트는 텍스트 편집기로 작성할 수 있습니다. 파일에는 HTML 코드가 없어야하며 .css 확장자로 저장해야합니다.

Here is how the "styles.css" looks:

다음은 "styles.css"의 모양입니다.


1
2
3
4
5
6
7
8
9
body {
    background-color: powderblue;
}
h1 {
    color: blue;
}
p {
    color: red;
}
cs


CSS Fonts

CSS 글꼴


The CSS color property defines the text color to be used.

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

The CSS font-family property defines the font to be used.

CSS font-family속성은 사용할 글꼴을 정의합니다.

The CSS font-size property defines the text size to be used.

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


Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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>
cs


Try it Yourself »


CSS Border

CSS 테두리


The CSS border property defines a border around an HTML element:

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


Example

1
2
3
p {
    border: 1px solid powderblue;
}
cs


Try it Yourself »


CSS Padding

CSS 패딩


The CSS padding property defines a padding (space) between the text and the border:

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


Example

1
2
3
4
p {
    border: 1px solid powderblue;
    padding: 30px;
}
cs


Try it Yourself »


CSS Margin

CSS 여백


The CSS margin property defines a margin (space) outside the border:

CSS margin속성은 경계 밖의 여백 (공백)을 정의합니다.


Example

1
2
3
4
p {
    border: 1px solid powderblue;
    margin: 50px;
}
cs


Try it Yourself »


The id Attribute

id 속성


To define a specific style for one special element, add an id attribute to the element:

특정 특수 요소에 대한 특정 스타일을 정의하려면 요소에 id특성을 추가하십시오 .


1
<p id="p01">I am different</p>
cs


then define a style for the element with the specific id:

다음 특정 ID로 요소의 스타일을 정의하십시오.


Example

1
2
3
#p01 {
    color: blue;
}
cs


Try it Yourself »


Note: The id of an element should be unique within a page, so the id selector is used to select one unique element!

참고 : 요소의 id는 페이지 내에서 고유해야하므로 id selector가 하나의 고유 한 요소를 선택하는 데 사용됩니다!


The class Attribute

To define a style for a special type of elements, add a class attribute to the element:

특수 유형의 요소에 대한 스타일을 정의하려면 요소에 class속성을 추가하십시오 .


1
<p class="error">I am different</p>
cs


then define a style for the elements with the specific class:

다음 특정 클래스를 사용하여 요소의 스타일을 정의합니다.


Example

1
2
3
p.error {
    color: red;
}
cs


Try it Yourself »


External References

External style sheets can be referenced with a full URL or with a path relative to the current web page.

외부 스타일 시트는 전체 URL 또는 현재 웹 페이지와 관련된 경로로 참조 할 수 있습니다.

This example uses a full URL to link to a style sheet:

이 예제에서는 전체 URL을 사용하여 스타일 시트에 연결합니다.


Example

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


Try it Yourself »


This example links to a style sheet located in the html folder on the current web site:

이 예제는 현재 웹 사이트의 html 폴더에있는 스타일 시트에 연결됩니다.


Example

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


Try it Yourself »


This example links to a style sheet located in the same folder as the current page:

이 예제는 현재 페이지와 같은 폴더에있는 스타일 시트에 연결됩니다.


Example

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


Try it Yourself »


You can read more about file paths in the chapter HTML File Paths.

HTML 파일 경로 장에서 파일 경로에 대한 자세한 내용을 볼 수 있습니다 .


Chapter Summary

Use the HTML style attribute for inline styling

style인라인 스타일에 HTML 속성 사용

Use the HTML <style> element to define internal CSS

HTML <style>요소를 사용하여 내부 CSS 정의

Use the HTML <link> element to refer to an external CSS file

HTML <link>요소를 사용하여 외부 CSS 파일을 참조하십시오.

Use the HTML <head> element to store <style> and <link> elements

HTML <head>요소를 사용하여 <style> 및 <link> 요소 저장

Use the CSS color property for text colors

color텍스트 색상에 CSS 속성 사용

Use the CSS font-family property for text fonts

font-family텍스트 글꼴에 CSS 속성 사용

Use the CSS font-size property for text sizes

font-size텍스트 크기에 CSS 속성 사용

Use the CSS border property for borders

border테두리에 CSS 속성 사용

Use the CSS padding property for space inside the border

padding테두리 안의 공간에 CSS 속성 사용

Use the CSS margin property for space outside the border

margin경계 외부 공간에 CSS 속성 사용


Test Yourself with Exercises!

HTML Style Tags

 Tag

 Description

 <style> 

 Defines style information for an HTML document

 <link> 

 Defines a link between a document and an external resource



출처 : W3School.com


반응형
저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

HTML 이미지(HTML Images)  (0) 2018.06.14
HTML 링크(HTML Links)  (0) 2018.06.13
HTML 색상(HTML Colors)  (0) 2018.06.11
HTML 주석(HTML Comments)  (0) 2018.06.10
HTML 인용문 및 인용문 요소(HTML Quotation)  (0) 2018.06.09

'HTML' Related Articles

티스토리툴바