It's easy, if you try

[웹/Web] CSS 기본 (1) - CSS 작성 규칙/ 외부 스타일 시트/ 내부 스타일 시트/ 인라인 스타일 본문

웹/CSS

[웹/Web] CSS 기본 (1) - CSS 작성 규칙/ 외부 스타일 시트/ 내부 스타일 시트/ 인라인 스타일

s5he2 2021. 3. 3. 10:30
반응형
1. CSS의 작성 규칙에 대해 알아보자.
2. 스타일 적용 방법 3가지에 대해 알아보자.

🐻 CSS(Cascading Style Sheets)

HTML 문서를 화면에 표시하는 방식을 정의한 언어

🐻 CSS 작성 규칙

  • 선택자와 선언 두 부분으로 구성
  • 선택자는 규칙이 적용되는 엘리먼트
  • 선언부분에서는 선택자에 적용될 스타일을 작성
  • 선언은 중괄호로 감싸며 속성과 값으로 이루어짐
  • 속성은 선택자에서 바꾸고 싶은 요소
  • 값은 속성에 적용할 값
  • 각 속성은 ; 로 구분
  • 주석: /* 내용 */

 

🐻 CSS 스타일 적용 방법 3가지

인라인 스타일, 내부 스타일시트, 외부 스타일시트 적용 방법이 있다. 스타일 적용 순위는 "인라인 > 내부 > 외부" 시트 순이다.

⚡️ 인라인 스타일 적용

  • <body> tag 안 개별 element에 작성한다.
  • 개별 element마다 스타일을 지정하므로 유지보수에 용이하지 않다.
  • style attribute를 사용하고 속성값(" " 안)으로 CSS 규칙을 작성
<body>
	<p style="background-color: cyan; color: magenta;"> Inline Style </p>
</body>

 

⚡️ 내부 스타일 시트 적용

  • <style> 을 사용하여 내부 스타일 시트를 적용
  • <style> tag 내부에 CSS 규칙을 작성.
  • 외부 스타일 시트보다 우선 적용
  • <head> tag 내부에 <style> 태그를 작성
  • 페이지마다 반복해서 작성하는 단점이 있다.
<head>
	...
    <style type="text/css">
		h1 {color: pink;}
	    .classname {background-color: cyan; color: magenta;}
	</style>
    ...
</head>

 

⚡️ 외부 스타일 시트 적용

여러 페이지에 동일한 스타일을 적용해야하 할 경우 많이 사용된다.

1. <link> 를 사용하여 외부 스타일 시트를 적용

  • <link>는 <head> 안에 작성하며 rel, type, href 3가지 속성을 주로 사용.
  • rel 은 HTML 페이지와 링크된 파일간의 관계를 의미
  • href 는 CSS file 경로를 의미함
<link rel="stylesheet" type="text/css" href="path/filename.css">

2. @import : 최 상단에만 위치할 수 있고 file path를 사용

  • @import url("file path"); 또는 @import "file path"; 형태로 사용.
  • link와 달리 <style>의 media 속성을 통해 보여지는 미디어 타입을 결정.
<style type="text/css">
@import url("path/filename.css"); /*@import "path/filename.css";*/
</style>

 

반응형
저작자표시

'웹 > CSS' 카테고리의 다른 글

[웹/Web] CSS 기본 (2) - 선택자  (0) 2021.03.03
'웹/CSS' Related Articles more
Comments