[개발] - Front/Mega-CSS

1. 스타일과 스타일 시트

완벽한 장면 2023. 5. 13. 00:17

대표적인 스타일 시트

스타일 시트의 갈래

기본형

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

  • 맨 앞의 선택자는 스타일을 어느 태그에 적용할 것인지 알려주는 것.
  • 중괄호 사이에는 스타일 정보를 넣는다.
  • 속성과 같이 하나의 쌍으로 이루어진 것을 스타일 규칙
  • 브라우저 기본 스타일 : CSS를 적용하지 않더라도 웹 브라우저에 표시할 때는 기본 스타일을 사용.
  • 인라인 스타일 : 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시
  • 내부 스타일 시트 : 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것.
  • 외부 스타일 시트 : 스타일 정보를 따로 저장해 놓은 외부 스타일 시트
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
</head>
<body>
  <h1>레드향</h1>
  <p style="color:blue;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<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>
</html>
h1 {      
  padding:10px;
  background-color:#222;
  color:#fff;
}
<!DOCTYPE html>
<html lang="ko">
<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>
</html>
728x90
반응형