Internet3. CSS
CSS(Cascading Style Sheets)
- HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방식(스타일)을 정해주는 언어
- HTML에 디자인 요소를 욱여 넣다 보니, HTML의 본연의 목적인 구조화된 문서가 아닌 디자인 적인 문서가 되어 버림.
그래서 디자인적 요소를 따로 전담하기 위해 만들어진 언어
- 장점 : 작성이 쉬움, 변경이 쉬움
- 문법
선택자(selector)와 선언부(declarative)로 구성
선택자 : CSS를 적용하고자 하는 HTML 요소
보통을 tag 단위로 적용된다.
tag별 다른 style을 적용하고 싶은 경우는
1. 각각의 요소에 고유한 ID속성을 이용: 자유롭게 이름 부여 가능, 문서 내에서 요소별 유일한 값으로 특정 요소의 이름 붙이는 것에 사용됨
2. Class를 만들고 요소에 class를 부여: 자유롭게 이름 부여 가능, 여러 요소가 동일 class사용 가능하고 각 요소는 여러 class 가질 수 있다. 주로 스타일 분류에 사용됨
선언부 : 하나 이상의 선언들을 세미클론(;)으로 구분하여 포함할 수 있으며, 중괄호("{}")를 사용해 전체 둘러쌈
각 선언은 CSS 속성명과 속성값을 가지며, 그 둘은 콜론(:)으로 연결되있다.
- CSS를 HTML에 적용하는 방법 3가지
1) 인라인 스타일(inline style) : HTML 요소 내부에 style 속성에 직접 CSS코드 넣어 CSS스타일 적용 하는 방법
<body>
<h2 style="color:green; text-decoration:underline">
인라인 스타일을 이용하여 스타일을 적용하였습니다.
</h2>
</body>
-> 선택자 h2의 스타일을 꾸며줌. 단, 인라인 방식은 재사용이 불가능
2) 내부스타일 시트(internal style sheet) : HTML문서 내의 <head>태그에 <style>태그 안에 CSS코드 넣어 CSS 스타일 적용
<head>
<style>
body { background-color: lightyellow; }
h2 { color: red; text-decoration: underline; }
</style>
</head>
-> 선택자 h2의 스타일을 꾸며줌.
인라인과 다른 점은, 문서안의 모든 h2요소들의 스타일이 바뀐다는 것이다.
단, 문서안의 여러 요소를 한번에 꾸밀 수는 있으나 다른 HTML문서에는 적용할 수 없다.
3) 외부스타일 시트(external style sheet) : 별도의 CSS파일을 만들어 HTML 문서와 연결하는 방법
외부에서 작성된 스타일 시트 파일은 .css확장자를 사용해 저장한뒤
스타일을 적용할 웹페이지의 <head>태그에 <link>태그를 사용하여
외부 스타일 시트를 포함해 스타일 적용
<head>
<link rel="stylesheet" href="/examples/media/expand_style.css">
</head>
_expand_style.css_
h2 {color : red; font-style : italic;
-> 여러 HTML 문서에서 사용할 수 있다.
- 스타일 적용 우선순위: 하나의 HTML 요소에 대해 외부, 내부, 인라인 스타일이 서로 다르게 지정되고 있다면
우선순위 규칙에 의해서 적용
인라인 스타일 > 내부/외부 스타일 > 웹브라우저 기본 스타일