CSS는 cascading style sheet의 약자로 그 중 현재 사용하고 있는 것은 CSS level 3이다. 이를 축약해서 CSS3라고 지칭한다.
CSS는 이름 그대로 웹페이지의 스타일을 담당하는 언어이다. 스타일 시트에서 주로 사용하는 기능은 다음과 같다.
- 색상과 배경
- 텍스트
- 폰트
- 박스 모델
- 비주얼 포맷 및 효과
- 리스트
- 테이블
- 사용자 인터페이스
css 언어는 다음과 같이 구성된다.
셀렉터{ 프로퍼티 : 값; 프로퍼티 : 값; }
셀렉터에는 HTML 태그를 넣는다. 셀렉터가 지정되면 그 셀렉터만 {}(스타일시트 블록) 내부의 스타일 시트가 적용된다.
프로퍼티는 값과 쌍으로 표현되며 ;로 분리된다.
다음이 헤더 내의 <style> CSS가 적용된 예시문이다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
<style>
body{background-color: mistyrose;}
h3{color:midnightblue;}
hr{border:3px solid mediumturquoise;}
span{color:goldenrod;font-size: 20px;}
</style>
</head>
<body>
<h3>CSS스타일 맛보기</h3>
<hr>
<p>나는 <span>웹 프로그래밍</span>을 좋아한다.</p>
</body>
<head> 태그 내의 <style>태그로 인해 다음과 같이 변한다.
-스타일 시트 적용하기
1.<style>태그로 스타일 시트 만들기.
위에 예제처럼 스타일 시트를 <head>내에 넣어서 만드는 방식이다.
ex)
<head>
<style>
body{background-color: linen;
color:blueviolet;
margin-left: 30px;
margin-right: 30px;
}
h3{
text-align: center;
color:darkred;
}
</style>
</head>
2. 태그 내에 스타일 시트 적용하기(in-line 방식)
<p style="color: blue;">김치부침개를 좋아하고</p>
<p style="color: magenta; font-size:30px;">축구를 좋아합니다.</p>
3. 외부 스타일 시트 만들기
1) css 확장자를 지니는 스타일 시트를 생성하기.
body{
background-color: linen;
color: blueviolet;
margin-right: 30px;
margin-right: 30px;
}
h3{
text-align: center;
color: darkred;
}
2) head내에 link 태그를 이용해 참조하기
<head>
<link type="text/css" rel="stylesheet" href="mystyle.css">
</head>
- CSS3 규칙
1. CSS스타일은 부모로부터 상속된다.
닫힌 태그 내에 있는 다른 태그를 자식 태그, 바깥에 감싸고 있는 태그를 부모 태그라고 한다.
이 때, 부모 태그에 스타일이 적용되면 자식 태그에 따로 CSS가 적용되지 않는 이상 부모태그의 스타일이 적용되는데, 이를 '상속'이라고 한다.
<head>
<style>
div{
color:cornflowerblue;
}
</style>
</head>
<body>
<div>
주변에 있는 다양한 색
<ul>
<li>컴퓨터는 검은색</li>
<li>텀블러는 분홍색</li>
</ul>
</div>
</body>
다음과 같이 <ul> 태그에 따로 CSS 스타일을 적용하지 않아도 div에 적용된 스타일을 따라 변한다.
2. 스타일 합치기와 오버라이딩
1) 스타일 합치기
스타일 합치기는 스타일 시트에 태그가 동시에 적용되어 중첩되면, 스타일이 합쳐져서 적용되는 것을 말한다. 이 때, 여러 스타일이 중첩될 경우, 우선순위를 매겨서 적용되게 된다.
2) 스타일 오버라이딩
이렇게 여러가지 태그와 스타일이 중첩될 경우 우선순위를 매겨 스타일을 적용하게 되는데, 이것을 스타일 오버라이딩이라고 한다.
<head>
<link type="text/css" rel="stylesheet" href="external.css">
<style>
p{color:blue; font-size: 12px;}
</style>
</head>
<body>
<p>Hello, students!</p>
<p style="font-size: 25px; color:crimson;">안녕하세요 반갑습니다.</p>
</body>
우선순위가 낮은 것은 head에 적용된 style들이다.
높은 우선순위로, 태그에 직접 적용된 CSS 스타일이 적용된 모습이다.
'HTML+CSS+Javascript > CSS3' 카테고리의 다른 글
| 6. 시각적 스타일 (0) | 2020.03.09 |
|---|---|
| 5. 배경 (0) | 2020.03.09 |
| 4. 박스 스타일 (0) | 2020.03.09 |
| 3. 색과 텍스트 꾸미기 (0) | 2020.03.09 |
| 2. 셀렉터 (0) | 2020.03.05 |
