CSS 기초 문법

CSS란?

Cascading Style Sheets 는 documents가 사용자에게 어떻게 보여질까를 기술하는 언어입니다. HTML이 정보를 표현한다면 CSS는 HTML문서를 시작적으로 이쁘게 꾸며주는 역할을 합니다.

CSS 주석 표시

//CSS 한줄 주석
    
/* CSS 주석 
여러줄 주석*/

CSS 선언 방법

내부 스타일

HTML 파일 안에 별도 영역으로 스타일 정의하고 일반적으로 <head>...</head> 안에 style을 사용합니다.

  • HTML 문서 하나가 고유한 CSS 내용을 가진다고 생각될 때 사용
  • <style> 태그를 사용하여 지정
  • HTML 페이지 안에 위치하므로 영향을 주는 범위는 페이지 안의 전체 태그
  • 다른 HTML 페이지에서 똑같은 내용으로 사용하고 싶다면 복사해서 사용
<!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Inline Style</title>
    <style type="text/css">
    p {color:#ff0a00; font-size:30px; }
    <!-- 글자색을 #ff0a00 으로 지정 글자크기를 30px로 지정 -->
    </head>
    <body>
    <이 문장은 내부 스타일이 적용되었습니다.></p>
    <p>모든 p에 적용됩니다.</p>
    </body>
    </html>

외부 스타일

스타일 내용을 별도의 페이지로 만들어서 사용, 여러번 복사해야 하는 내부 스타일 시트의 단점 보완한 스타일입니다.

  • 하나의 스타일로 여러 개의 HTML 페이지에 적용하여 사용하고자 할 때 편리
  • 하나의 스타일 페이지만 바꾸면 연결된 전체 HTML 페이지가 바뀌므로 유지, 보수에 편리
  • 각각의 HTML 페이지 문서는 <head>..</head> 안에 <link>태그를 사용하여 스타일 페이지와 연결
  • 스타일 시트 파일의 확장자는 .css
main.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>main</title>
<link rel="stylesheet" type="text/css" href="style.css" >
<!-- 링크로 스타일 시트 연결 -->
</head>
<body>
<h1>외부 스타일 시트가 적용된 문장.</h1>
<h2>메인 페이지</h2>
</body>
</html>

style.css
h1 { color:#ff0a00;                 : 글자색  #ff0a00
     border:3px solid blue;     : 3px 두께의 파란색 선 테두리 
     width:600px;                      : 테두리 넓이 600px
     padding:10px; }                 : 테두리와 글자 사이 간격 10px
h2 { color:green; }                 : 글자색 그린

인라인 스타일

한 줄짜리 짤막한 스타일, 태그 안에 직접 지정하여 사용. HTML과 섞어서 사용합니다.

  • 태그에 직접 스타일을 지정할 때 용이
  • HTML과 섞여 있으므로 인라인 스타일을 많이 작성할 경우 나중에 어느 곳에 있는지 알아내기 어려우므로, 가급적사용을 자제하는 것이 좋다.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Inline Style</title>
</head>
<body>
<!-- 글자색을 #ff0a00 으로 지정 -->
<p style='color:#ff0a00'>인라인 스타일이 적용되었습니다.</p>
<p>이 문장은 일반 문장입니다.</p>
</body>
</html>