CSS 스타일 시트
CSS Style Sheet
- html 5 에서는 기존의 css1, css2 뿐만 아니라 css3까지도 완벽히 지원하는 것을 기본 목표로 한다. 기존의 css1, css2에서는 주로 텍스트, 폰트, 배경 및 색상, 목록, 박스 모델 등에 관련된 속성을 다루었다면, css3에서는 2D/3D 변환, 장면 전환, 애니메이션 등 더욱 다양한 스타일 지정 기능을 포함하고 있다.
- 스타일시트(Style sheet) 는 웹에서 작성한 문서에서 PC화면이나 모바일 단말기 화면에 출력될 외형 스타일을 좀 더 다양하면서 손쉽게 빠르게 적용하기 위하여 사용된다.
- 스타일시트를 사용하면 콘텐츠 내용과 디자인의 분리가 가능해진다는 점이 큰 장점이다. CSS로 디자인 요소를 별도로 작성하여 다수의 개발자가 동시에 하나의 웹 사이트를 개발할 수 있다. 따라서 웹 사이트를 더 쉽게 유지보수 할 수 있게 된다.
- css3는 화려하고 동적인 스타일을 작성할 수 있도록 하여 기존의 플래시나 그래픽 툴에 의존하던 부분이 css3만을 이용해도 상당 부분 가능하게 되었다.
- CSS는 Cascading Style Sheets의 약어로 HTML뼈대구조에 ui를 입히는 것을 말한다.
CSS 선택자 문법
- 타입 선택자 : 가장 기본적인 선택자로 html태그 이름으로 접근한다. (ex) a { } )
- 아이디 선택자 : #아이디 명으로 접근한다. 가장 우선순위가 높다. 하나의 요소만 선택 가능.(ex) #id { } )
- 전체 선택자 : *로 접근한다. (잘 사용 안됨)
- 클래스 선택자 : .클래스명으로 접근한다. 클래스 선택자는 몇 개의 요소를 하나의 클래스로 묶어서 스타일을 지정하려고 할 때 사용된다. 요소를 한꺼번에 선택 가능. 아이디 다음으로 우선순위가 높다. (ex) .class { } )
css 주석문 기호 : /* 주석문 */
CSS를 삽입하는 방법
1. 외부 스타일 시트방법
별도의 *.css 파일을 만들어서 외부 포함파일로 읽어와서 사용한다.
<link rel="stylesheet" type="text/css" href="*.css" />
외부 스타일 시트 방법은 많은 페이지에 동일한 스타일을 적용하려고 할 때 좋은 방법이다. 외부 스타일 파일을 사용하면 전체 웹 페이지의 스타일을 하나의 스타일 파일로 변경할 수 있다.
2. 내부 스타일 시트 방법
html 태그 안에 css를 정의하는 것이다. <style>태그를 사용하여 스타일을 이 태그안에 기입하여 이용한다.
<style type="text/css">/*type속성은 기본값으로 생략이 가능하다*/
p{/*타입 선택자*/
background-color:yellow;/*배경색을 노랑*/
}
#title{/*#id명으로 접근하고 유일해야 함.*/
bavkground-color:yellow;/*배경색은 노랑*/
}
.table{/* .class명으로 접근*/
bavkground-color:yellow;/*배경색은 노랑*/
}
</style>
+
<style>
body strong{/* strong태그 모두 green로 바꿔줌.
(body안 strong 태그& 다른 태그 안의 strong 태그)*/
color:green;
}
body > strong{/* 바로 하위에 있는거를 정해준다.
body안 strong 태그를 yellow로 바꿔줌. (다른 태그 안의 strong태그는 안바꿈.) */
color:yellow;
}
/*아래로 적을수록 우선순위가 높다.*/
</style>
>는 바로 하위에 있는거를 정해준다. 만약에 body > strong이면 body태그 안의 strong태그만 바꿔준다. 바디태그안의 다른태그의 strong태그는 안바꿔준다. 또한 아래로 적을수록 우선순위가 높아진다.
3. 인라인 스타일 시트법
각 html 태그 요소마다 스타일을 지정한다. 간편하게 스타일을 지정할 수 있다는 장점도 있다. 필요한 경우에만 제한적으로 사용하는 것이 좋다.
<body>
<h1 style="color:red;">This is a headline.</h1>
<!-- 유지보수가 힘들어 제한적 사용해야한다. -->
<p style="color:#0026ff;">This is a paragraph.</p>
</body>
'언어공부 > CSS' 카테고리의 다른 글
| CSS - 속성 정리 (2) / CSS3 애니메이션 (0) | 2021.07.15 |
|---|---|
| CSS - 속성 정리 (1) / 타입 선택자 css (0) | 2021.07.14 |
| (생활코딩) CSS 코드의 재사용 <link> (0) | 2021.04.05 |
| (생활코딩) CSS 미디어 쿼리 (0) | 2021.04.05 |
| (생활코딩) CSS 그리드 grid, <div>, <span> (0) | 2021.04.05 |
