제14강.  HTML CSS

 

 

동영상 강좌보기

 

 

CSS로 HTML 스타일 지정하기

CSS는 Cascading Style Sheets의 약어입니다.

CSS는 HTML요소가 화면, 종이 또는 다른 미디어에 표시되는 방법을 설명합니다.

CSS는 일의 양을 줄여줍니다. 한 번에 여러 웹페이지의 레이아웃을 제어할 수 있습니다.

CSS는 다음 세 가지 방법으로 HTML요소에 추가할 수 있습니다.

 

CSS를 추가하는 가장 일반적인 방법은 별도의 CSS화일을 만들어 스타일을 유지하는 것입니다.

그러나 여기에서는 인라인 및 내부 스타일링을 살펴봅니다. 이는 시연하기 쉽고 직접 시도하기가 쉽기 때문입니다.

 

인라인 CSS

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

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

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

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

내부 CSS

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

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

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

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

</body>
</html>
Markup

외부 CSS

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

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

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

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>표제</h1> <p>문단입니다.</p> </body> </html>

 

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

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

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

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>표제</h1>
<p>문단입니다.</p>

</body>
</html>
Markup

CSS 테두리

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

p {
    border: 1px solid powderblue;
}
CSS

CSS padding

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

p {
    border: 1px solid powderblue;
    padding: 30px;
}
CSS

CSS margin

CSS margin속성은 테두리 외부의 여백을 정의합니다.

p {
    border: 1px solid powderblue;
    margin: 50px;
}
CSS

id속성

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

<p id="p01">아이디 속성을 추가</p>
Markup

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

#p01 {
    color: blue;
}
CSS

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

 

class 속성

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

<p class="error">class속성을 정의</p>
Markup

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

p.error {
    color: red;
}
CSS

외부 참조

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

아래 예제는 전체 url을 사용하여 스타일 시트에 연결합니다.

<link rel="stylesheet" href="https://365ok.co.kr/css/styles.css">
Markup

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

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

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

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