[CSS] 스타일과 스타일 시트

2022. 1. 11. 20:03

728x90

스타일 형식

선택자 { 속성1: 속성값1; 속성2: 속성값2; }

선택자 { 속성1: 속성값1;
속성2: 속성값2;
}

선택자 : 스타일을 어느 태그에 적용할 것인지 알려주는 것
중괄호 { } : 스타일 정보
속성과 속성값 : 스타일 규칙 (세미콜론 ; 을 이용해서 다수의 스타일 규칙을 지정할 수 있다.)

스타일의 주석 표기

스타일의 주석을 표시할 때는 /* 와 */ 사이에 내용을 입력한다.

/* 여러 줄짜리
주석 */

/* 한 줄짜리 주석 */

스타일 시트

다수의 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기 쉽도록 한군데 묶어 놓은 것

스타일 시트는 크게 웹 브라우저에 기본으로 만들어져 있는 브라우저 기본 스타일과, 사이트 제작자가 만드는 사용자 스타일로 나뉜다. 그리고 다시 사용자 스타일은 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트로 나뉜다.

브라우저 기본 스타일

CSS를 사용하지 않아도 웹 브라우저에서 미리 정해놓은 기본 스타일

예를들어 <h1> 태그를 사용한 텍스트는 글자가 크게 표시되고 텍스트 위쪽과 아래쪽에 약간의 여백이 생기는 등을 말한다.

인라인 스타일

간단한 스타일 정보를 적용하는 스타일

스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시한다.

스타일을 적용하고 싶은 태그에 style 속성을 이용해 style="속성: 속성값;" 형태로 사용한다.

  <h1>레드향</h1>
  <p style="color:blue;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>

내부 스타일 시트

웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 스타일

스타일을 여러 곳에 적용할 때 사용한다.

모든 스타일 정보는 <head> 태그 안에서 정의하고 <style> 과 </style> 태그 사이에 작성한다.

<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    h1 {      
      padding:10px;
      background-color:#222;
      color:#fff;
    }
  </style>
</head>
<body>
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</body>

외부 스타일 시트

별도 파일로 저장해 놓은 스타일

웹 사이트를 만들 때 웹 문서마다 똑같은 내부 스타일 시트로 만든다면 서버 공간과 시간이 낭비되기 때문에 일반적으로는 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 두고 필요할 때 마다 가져와서 사용하며, '.css' 라는 파일 확장자를 사용한다.

<link rel="stylesheet" href="외부 스타일 시트 파일 경로">

<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</body>

style.css

h1 {      
  padding:10px;
  background-color:#222;
  color:#fff;
}

저작자표시

'웹 개발' 카테고리의 다른 글

Web Developer 확장기능 (0)	2022.01.18
[CSS] 기본 선택자 (0)	2022.01.18
[CSS] CSS 소스 경량화 (0)	2022.01.11
CSS (Cascading style sheets) (0)	2022.01.05
[HTML] 폼에서 사용하는 태그의 종류 (0)	2022.01.03

코딩일기