7. 웹 문서의 디자인, CSS

2017. 8. 7. 13:53하루만에 프로그래밍 끝내기/HTML

1. 지금까지는 디자인에 상관없이 요소에서 속성을 사용하여 여러 가지 색상이나 글꼴, 크기 등을 바꾸어 보았습니다. 최종적으로html을 이용한 나만의 홈페이지를 만들려면 홈페이지 전체의 디자인을 생각해야 합니다. 따라서 여기에서는 html에서 디자인을 담당하고 있는 CSS( Cascading Style Sheets )를 사용하여 다양한 디자인을 만들어 봅니다.

2. 간단한 CSS를 만들어서 사용해 봅니다.


<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>웹 문서의 디자인, CSS</title>
 <style>
  p {
   font-family: "바탕체";
   font-size: "20px";
   color: blue;
  }
 </style>
</head>
<body>
 <p>CSS를 만들어 봅시다!</p>
</body>
</html>

 

3. CSS를 사용하는 3가지 방법


1. 인라인 방식 : <p style="color:blue";>
2. 임베디드 방식 : head 태그 안에 style 태그를 사입하는 방식입니다. ( 3과 같은 방식 )
3. 외부 링크 방식 : css 파일을 만들어 놓고 연결하여 사용하는 방식입니다. .css파일을 미리 만들어 놓고 사용