Leeyanggoo
[CSS] 표현 방법을 알아보자! 본문
CSS는 Cascading Style Sheets의 약자로서 HTML의 요소들을 어떻게 보여줄지 정의하는 스타일 시트 언어입니다.
이 CSS를 적용하는 표현 방법으로 내부 스타일 시트, 외부 스타일 시트, 인라인 스타일 시트가 있습니다.
한번 알아보겠습니다. :)
내부 스타일 시트Internal style sheet
내부 스타일 시트는 HTML의 문서 안에 <style> 태그를 이용하여 요소에게 적용하는 방식입니다.
대부분 <style> 태그는 HTML 문서의 <head> 태그 안에 넣습니다.
See the Pen CSS_1 by leeyanggoo (@leeyanggoo) on CodePen.
이처럼 <style> 태그가 HTML 문서 내부에 쓰여 적용되는 방식을 '내부 스타일 시트'라고 합니다.
이 방식은 해당 HTML 문서에만 스타일을 적용할 수 있습니다.
외부 스타일 시트External style sheet
외부 스타일 시트는 작성한 스타일 속성을 스타일 시트 파일(.css)로 저장하여 HTML 문서에 연결하는 방식입니다.
<style> 태그를 <head> 안에 적듯, 외부 스타일 시트는 <head> 태그 안에 <link> 태그를 이용합니다.
See the Pen CSS_2 by leeyanggoo (@leeyanggoo) on CodePen.
p { color: red; }style.css의 파일 내용
외부 스타일시트는 <link> 태그를 이용해 스타일을 선언한 모든 HTML 페이지에 적용할 수 있습니다.
스타일시트 파일 하나만 수정해도 모든 페이지에 적용이 가능하기 때문에 유지 보수에 편리하다는 장점이 있습니다.
인라인 스타일Inline style
인라인 스타일은 HTML 요소에 직접 스타일 속성을 정의해주는 방식입니다.
HTML 요소 뒤에 style=" " 형식으로 정의하며 해당 요소 하나에만 스타일을 적용할 수 있습니다.
See the Pen CSS_3 by leeyanggoo (@leeyanggoo) on CodePen.
인라인 스타일은 다른 내부/외부 스타일보다 우선 순위가 높습니다.
따라서 공통의 스타일과 다른 스타일을 요소에 적용할 때 사용하지만, 일일히 HTML 페이지를 열어 수정해야 하기 때문에 주의해야 합니다.
