(photo from. unplash_John Schaidler)
HTML 문서에 CSS를 적용하는 방법은 크게 3가지 입니다. 각각에 장단점이 있으니 상황에 맞게 사용할 수 있도록 숙지합니다.
Inline Style Sheet
HTML 요소에 속성으로 스타일을 넣는 방식
<div style="color:#f00;">빨간 글자색 </div>Internal Style Sheet
HTML에 <style> 요소를 통해 css언어를 사용하는 방식
<style> div { color: #f00 } </style>Linking Style Sheet
• 태그를 통해 외부 css 파일을 불러옵니다.
<link rel="stylesheet" href="CSS파일경로">rel : relationship 문서 사이의 관계를 설명
rel속성은 SEO(검색 엔진 최적화) 영향을 주며 다양한 값이 있으나 css나 아이콘툴킷 등 스타일 관련 시트를 연결할 땐 모두“stylesheed”를 사용합니다.
href : hyper reference 의 축약이며 [ (h)əref ] 로 주로 부르는 듯 하다.
값으로 파일의 경로(URL; Uniform Resource Locator)를 적어주면 된다.
CSS 적용 우선순위
인라인 스타일 > 내부 스타일 > 외부 스타일(스크립트 사용시 인라인 스타일로 적용됩니다.)
각각의 스타일 시트 장단점
Inline Style Sheet : 코드 편집이 어려운 사람들에게 쉽게 접근될 수 있다.
단점: 추후 수정을 하거나 여러 요소에 적용할 때 코드가 길어지는 단점이 있다.
Internal Style Sheet : 여러요소에 적용이 편리하고 수정이 인라인보다 편리하다. 그리고 새 파일을 만드는 링크보다 간결하게 사용할 수 있다.
단점: 다른 HTML 파일에 적용하기 위해서는 복사해서 붙혀넣어야해서 코드가 길어질 수 있으며, 한 문서에 많은 내용이 있어 가독성이 낮아질 수 있다.
Linking Style Sheet : 여러 html 문서에 적용하기 문서를 구별하여 각각 문서의 관련성과 가독성을 높일 수 있다.
단점: 파일을 갯수가 많아져 단순한 문서에는 사용하지 않는게 오히려 좋으며, HTML만 알고 있는 디자이너들에게 어려움을 줄 수 있다.
