CSS

1. Styling

CSS 란?

Cascading Style Sheets의 약자로 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는데 사용되는 스타일시트 언어이다.

CSS 문법

CSS 선택자

<style>
  /* 요소 선택자 */
  p { color: red; text-decoration: underline; }
  /* id 선택자 */
  #header { color: red; text-decoration: line-through; }
  /* class 선택자 */
  .heading { color: lime; text-decoration: overline; }
  /* 그룹 선택자 */
  h1, h2 { color: lightgray; }
</style>
<p>요소선택자</p>
<div id="header">id 선택자</div>
<div class="heading">class 선택자</div>
<h1>그룹 선택자</h1>
<h2>그룹 선택자</h2>

CSS 적용

인라인 스타일

HTML요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법

<h2 style="color:green; text-decoration:underline">
  인라인 스타일
</h2>

내부 스타일 시트

HTML 문서 내에 <head>태그 내 <style>태그를 사용하여 CSS 스타일을 적용하는 방법

<head>
  <style>
    body { background-color: lightyellow; }
    h2 { color: red; text-decoration: underline; }
  </style>
</head>
<body>
  <h2>내부 스타일 시트</h2>
</body>

외부 스타일 시트

웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 하는 방법. (.css 확장자 파일 사용)

<head>
  <link rel="stylesheet" href="/example/css/style.css">
</head>

http://www.tcpschool.com/css/css_intro_apply - 해당 페이지 참고

728x90

저작자표시 (새창열림)