CSS로 HTML스타일 지정하기
CSS = cascading style sheets.
CSS는 HTML요소가 화면이나 종이 또는 다른 미디어에 표시되는 방법을 설명합니다.
CSS는 많은 작업을 저장합니다. 한번에 여러 웹 페이지의 레이아웃을 제어할 수 있습니다.
CSS는 다음 세 가지 방법으로 HTML요소에 추가할 수 있습니다.
-inline : HTML요소의 style 속성 사용
-내부 : <head>섹션의 <style>요소 사용
-외부 : 외부 CSS파일 사용
CSS를 추가하는 가장 일반적인 방법은 별도의 CSS파일에 스타일을 유지하는 것입니다.
그러나 여기에서는 인라인 및 내부 스타일링을 사용합니다. 이는 시연하기 쉽고 직접 시도하기가 쉽기 때문입니다.
인라인 CSS
인라인 CSS는 단일 HTML요소에 고유한 스타이을 적용하는데 사용됩니다.
인라인 CSS는 HTML요소의 style속성을 사용합니다.
이 예제는 <h1>요소의 텍스트 색을 파란색으로 설정합니다.
<h1 style="color:blue;">This is a Blue Heading</h1>
내부 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>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
외부 CSS
외부 스타일 시트는 많은 HTML페이지의 스타일을 정의하는데 사용됩니다.
외부 스타일 시트를 사용하면 하나의 파일을 변경하여 전체 웹 사이트의 모양을 변경할 수 있습니다.
외부 스타일 시트를 사용하려면 HTML페이지의 <head>섹션에 링크를 추가하십시오
<!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확장자로 저장해야됩니다.
다음은 'style.css'의 모양입니다.
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS글꼴
CSS색상 속성은 사용할 텍스트 색상을 정의합니다.
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테두리
CSS테두리 속성은 HTML요소 주위에 테두리를 정의합니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
CSS 패딩
CSS패딩 속성은 텍스트와 테두리 사이의 패딩 (공백)을 정의합니다.
p {
border: 1px solid powderblue;
padding: 30px;
}
CSS여백
CSS여백 속성은 경계 외부의 여백(공백)을 정의합니다.
p {
border: 1px solid powderblue;
margin: 50px;
}
id 속성
특정 특수 요소에 대한 특정 스타일을 정의하려면 id 특성을 요소에 추가하십시오.
<p id="p01">I am different</p>
다음 특정 ID로 요소의 스타일을 정의하십시오
#p01{
color : blue;
}
중요- 요소의 id는 페이지 내에서 고유해야하므로 id selector가 하나의 고유한 요소를 선택하는데 사용됩니다.(한번밖에 못씀)
Attribute 클래스
특수유형의 요소에 대한 스타일을 정의하려면 클래스 속성을 요소에 추가하십시오
<p class="error">I am different</p>
다음 특정 클래스를 사용하여 요소의 스타일을 정의합니다.
p.error{
color:red;
}
외부참조
외부 스타일 시트는 전체 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"
'함께공부해요! > HTML5' 카테고리의 다른 글
| 02-1 텍스트 관련 태그 중 블록(block) 레벨 태그 <p, br, hr, blockquote, pre> (0) | 2020.02.06 |
|---|---|
| 01. HTML이란? HTML5 만들기 (0) | 2020.02.05 |
| 12. HTML 색상 (0) | 2017.12.14 |
| 11. HTML주석 (0) | 2017.12.13 |
| 10. HTML 인용문과 인용문 요소 (0) | 2017.12.12 |
댓글