Animated Turtle

CSS

CSS의 기본문법은 ?

훙구 2023. 2. 20. 15:06

...

728x90
반응형

 

CSS의 기본문법

 

 CSS(Cascading Style Sheets)를 정의하는 방법으로는

내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다.

실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일시트만으로 사용할 수도 있습니다.

인라인 스타일시트의 경우 거의 사용하진 않지만, 가장 우선순위가 높아서 꼭 필요한 경우 편리하게 사용 가능합니다.

 

 

 

내부 스타일시트

 

 CSS를 HTML 문서안에 <style></style> 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다.

내부 스타일시트
결과물

 

 

외부 스타일시트

 

 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다.

이때 스타일은 .css 확장자를 가진 별도의 파일로 저장하고, HTML에서는 <link> 태그를 이용하여 선언합니다.

여러 다른 HTML문서에 공통적으로 가지는 스타일의 중복이 많을 경우,

각각의 문서에 내부 스타일시트를 매번 적어줘야하는 필요를 없애주므로 가장 많이 쓰이는 방법입니다.

외부 스타일시트에 링크로 선언한 모습
외부 스타일시트
결과

 

 

@Import

 

 @import 는 CSS 안으로 다른 CSS 파일을 불러들일 경우 사용합니다. CSS의 맨 윗줄에 기술합니다.

(웹폰트 등을 사용할 때 쓰입니다.)

imprt로 CSS파일 불러오기
결과

 

 

인라인 스타일

 

 인라인 스타일(inline style)은 태그에 직접 CSS를 정의해주는 기법으로, 해당 요소에 style=" " 형식으로 기술합니다.

우선순위가 가장 높아 가장 강력하게 적용되지만, 공통 CSS로 수정할 수 없고 일일이 HTML문서를 열어서 편집해야 하므로 일반적으로 많이 사용하지는 않습니다.

태그에 직접 적용한 인라인 스타일
결과

 

 

 

이상으로 CSS의 기본문법에 대하여 알아보았습니다 !

728x90
반응형