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

728x90

Day37. 230621

스타일과 스타일 시트

스타일(style)?

웹 문서에서 스타일(style)이란 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용을 가리킨다.

p{text-align: center;}
선택자{스타일 속성:속성 값;}

내부 스타일 시트(Internal Stylesheet)

웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것.

<head>태그와 </head>태그 안에서 정의해야 하고

<html>
 <head>
  <style>
   h1{color:red;}
  </style>
 </head>
 <body>
  <h1>style 태그에 적용한 스타일이 적용됨</h1>
 </body>
</html>

외부 스타일 시트(External Stylesheet)

여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용하는 것.

HTML 문서 내부가 아닌 외부에서 CSS 파일을 작성

<head>태그 내에 <link>태그를 삽입하여 HTML문서에서 CSS를 연결할 수 있다.

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

<html>
 <head>
  <link rel="stylesheet" href="/stylesheet.css">
 </head>
 <body>
  <h1>참조한 CSS파일의 스타일이 적용됨.</h1>
 </body>
</html>

인라인 스타일(Inline Style)

간단한 스타일 정보라면 스타일 적용할 대상에 직접 표시한다.

스타일을 적용하고 싶은 부분이 있다면

해당 태그에 style속성을 사용해 style="속성:속성 값"형태로 스타일을 바꿀 수 있다.

<p style="color:blue;">인라인 스타일 적용</p>

728x90