CSS(Cascading Style Sheet) 기본문법
- CSS(Cascading Style Sheet)를 정의하는 방법으로는 내부 스타일시트, 외부스타일시트, @import, 인라인 스타일시트 등이 있습니다.
- 외부 스타일시트를 많이 사용하는 편이지만 간단한 스타일은 내부 스타일시트만으로 사용할 수도 있습니다.
- 인라인 스타일시트는 거의 사용하자 않지만, 우선순위가 가장 높아서 꼭 필요한 경우 편리하게 사용할 수 있습니다.
- CSS에서 주석은/* */로 표현합니다.
다음은 내부 스타일시트, 외부스타일시트, @import, 인라인 스타일시트에 대해서 알아보겠습니다
내부 스타일시트
- CSS를 HTML 문서 안에 <style> 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다.
외부 스타일시트
- 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다.
- 스타일은 *.css 확장자를 가진 별도의 파일로 저장합니다.
- HTML에서는<link> 태그를 이용하여 선언합니다.
- 내부 스타일시트는 그 스타일이 기술된 페이지에만 적용되는 반면, 외부 스타일시트는 그 스타일을 선언한 모든 HTML 페이지에 적용됩니다.
예제.html
예제.css
@import
- CSS 안으로 다른 CSS 파일을 불러들일 경우 사용합니다.
- CSS 맨 윗줄에 기술합니다.
- 공통으로 들어가야 할 스타일을 따로 저장하여 다른 CSS에 삽입시켜 사용할 수 있도록 해줍니다.
- 그러나 CSS파일을 너무 여러 개로 분리하면 복잡해지기 때문에 용량이 적다면 하나의 파일로 저장하는 것이 좋습니다.
인라인 스타일
- 태그에 직접 CSS를 정의해주는 기법으로, 해당 요소에 style="" 형식으로 기술합니다.
- 내부스타일이나 외부스타일에서 기술된 속성보다 우선으로 적용되므로우선순위가 절대적으로 높아야 할 경우에 사용할수 있습니다.
- 그러나 스타일을 공통 CSS로 수정할 수 없고 일일이 html을 열어서 편집해야 하므로 일반적으로 많이 사용하지는 않습니다.
오늘은 CSS 기본 문법에 대해서 알아보았습니다!