동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
동영상 강좌보기
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>내부 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>외부 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 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>CSS 테두리
CSS border속성은 HTML요소 주위에 테두리를 정의합니다.
p {
border: 1px solid powderblue;
}CSS padding
CSS padding속성은 텍스트와 테두리사이의 여백을 정의합니다.
p {
border: 1px solid powderblue;
padding: 30px;
}CSS margin
CSS margin속성은 테두리 외부의 여백을 정의합니다.
p {
border: 1px solid powderblue;
margin: 50px;
}id속성
특정 특수 요소에 대한 특정 스타일을 정의하려면 id속성을 요소에 추가하십시오.
<p id="p01">아이디 속성을 추가</p>그 다음 특정 ID로 요소의 스타일을 정의하십시오.
#p01 {
color: blue;
}** 요소의 id는 페이지내에서 고유해야 하므로 id selector는 하나의 고유한 요소를 선택하는데 사용됩니다.
class 속성
특수 유형의 요소에 대한 스타일을 정의하려면 class속성을 요소에 추가하십시오.
<p class="error">class속성을 정의</p>그 다음 특정 class를 사용하여 요소의 스타일을 정의합니다.
p.error {
color: red;
}외부 참조
외부 스타일 시트는 전체 url 또는 현재 웹페이지와 관련된 경로로 참조할 수 있습니다.
아래 예제는 전체 url을 사용하여 스타일 시트에 연결합니다.
<link rel="stylesheet" href="https://365ok.co.kr/css/styles.css">아래 예제는 현재 웹사이트의 html폴더에 있는 스타일시트에 연결합니다.
<link rel="stylesheet" href="/css/styles.css">아래 예제는 현재페이지와 같은 폴더에 있는 스타일 시트에 연결합니다.
<link rel="stylesheet" href="styles.css">등록된 댓글이 없습니다.