CSS로 스타일을 적용하기 위해서는 CSS의 문법을 사용해줘야 합니다.
CSS의 문법은 SPV를 기억해주면 됩니다
바로 S(Selector, 선택자) P(Property, 속성) V(Value, 속성값)입니다.
적용하고자 하는 태그(또는 id, class)를 선택자라고 하고 CSS에서 제공하는 디자인 관련 속성을 속성, 그 속성에 맞는 값을 속성값이라고 합니다.
위 사진을 예로 들면 HTML 문서의 p 태그를 선택자로 설정하였습니다.
그리고 중괄호 안에 background-color라는 배경색을 주는 속성과 color라는 글자색을 주는 속성을 이용하였습니다.
각각 값은 black, white로 배경은 검은색, 글자색은 하얀색으로 주고자 했습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
참고 : 위 스타일을 적용할 html 코드 그냥 Hello World!를 출력하고자 하는 HTML코드입니다.
저런 CSS 코드를 적용시키면
CSS style은 위와 같이 HTML 문서 안에 link 태그를 사용하여 적용할 수도 있지만 그 밖에 다른 방법으로도 HTML문서에 스타일을 적용할 수 있습니다.
위 사진은 HTML 문서 안에서 스타일을 적용한 사진입니다.
<style>태그를 이용하면 HTML 문서 안에서도 CSS의 문법을 이용하여 스타일을 적용시킬 수 있습니다.
위 사진은 각 태그에 스타일을 적용한 방법입니다. 아마 CSS가 나타나기 전에는 이렇게 스타일을 적용하지 않았을까요 ㅎㅎ
위 방법은 inline 방법으로 HTML 속성 중 style 속성을 이용하여 스타일을 적용합니다. 속성 값으로는 큰 따옴표 안에 CSS의 문법을 적용하면 됩니다.
이렇게 외부 파일에서 적용하는 방법, 내부 파일, 인라인 방법을 모두 적용했더니
이렇게 style이 적용됐습니다.
이유는 CSS 적용에 우선순위가 있기 때문입니다.
우선순위는 1. 인라인 스타일 2. 외부 파일 및 내부 파일 (html 문서에서 먼저 나타난 순서 - 외부파일은 link 태그) 3. 브라우저 default 와 같은 순서를 가집니다.
3번째 사진을 보면 <style>태그보다 link태그가 먼저 나왔기 때문에 나중에 나온 <style> 태그의 스타일이 적용되어 배경이 노란색이 된 것입니다.
만약 link를 <style> 태그 밑으로 내린다면 배경은 검은색으로 바뀌게 됩니다.
스타일을 적용하는 여러 방법이 있지만 대부분의 사람들은 외부 css 파일을 통해 스타일을 적용하는 것을 추천합니다.
이유는 HTML 문서는 정보를 담당한다고 했는데 Style 부분이 뒤죽박죽 섞이면 가독성 및 유지보수에도 적지않은 영향을 미친다고 합니다.
외부파일을 이용한다면 스타일만 적용되어 있으므로 어떤 태그에 어떤 스타일이 적용되어있는지 깔끔하게 알 수 있으므로 유지보수에도 좋습니다.
따라서 가급적 HTML문서에 스타일을 적용할 때에는 외부 css파일을 사용해야겠습니다!
