Fast Blinking Hello Kitty

CSS

CSS를 설정하는 4가지 기본문법 방법 알아보기

코른이되고싶은코린이 2023. 2. 20. 15:06

728x90
내부 스타일시트
- CSS를 HTML문서안에 <style> 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태이다.

 

예제

예제1
예제 1 결과값

  •  p{ color:red; }의 의미는 p태그 안의 글자 색상을 red로 설정하라는 뜻이다.

외부 스타일시트
- 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있다.
-이때 스타일은 *.css 확장자를 가진 별도의 파일로 저장하고 HTML에서는 <link>태그를 이용하여 선언한다.
-내부 스타일시트는 그 스타일이 기술된 페이지에만 적용되는 반면, 외부스타일시트는 그 스타일을 선언한 모든 HTML페이지에 적용 된다.

 

@ import
- @import는 CSS 안으로 다른 CSS 파일을 불러들일 경우 사용한다. CSS의 맨 윗줄에 기술한다.
- @import는 어떤 CSS파일 안에 공통 CSS를 불러들일 경우에도 사용할 수 있다.

 

인라인 스타일(inline style)
- 태그에 직접 CSS를 정의해주는 기법으로, 해당 요소에 style=" " 형식으로 기술한다.
- 인라인 스타일은 내부스타일이나 외부스타일에서 기술된 속성보다 우선 적용된다. 그러므로 우선순위가 절대적으로 높아야 할 경우에 사용할 수 있다.
- 하지만 스타일을 공통 CSS로 수정할 수 없고 일일이 html을 열어서 편집해야해서 일반적으로 많이 사용하지 않는다.