CSS는 Cascading Style Sheets의 약자로 HTML요소들이 각각 어떻게 보이는가를 정의하는데 사용하는
스타일 시트 언어이다.
사용하는 방법은
<head>
<style>
....
</style>
</head> 로 공간을 만들어 작성한다.
코드를 작성하기 전에 선택자(selector)라는 개념을 알아야 한다. 선택자는 보통 class나 id 값으로 태그를 가리켜서 사용한다. 즉 css에선 class와 id값으로 '이름표'를 달아준다고 생각하면 된다. 예를 들면 mytitle이라고 클래스에 이름표를 달아주고 mytitle이라는 이름을 가진 클래스의 글씨를 빨간색으로 바꿔라' 라고 생각하면 된다.
(선택자 이름은 자유롭게 지을 수 있는데 단 이후에 어떤 역할을 하기 위한 선택자인지 잘 알수 있게 이름을 잘 정하는 것이 중요하다!)
또한 class나 id에 들어가는 것처럼 이름표를 달지 않고도 body처럼 태그명을 직접 지칭해서 쓸 수도 있다.
<h1>태그와 <div>태그에 각각 mytitle이라는 이름표를 붙여주고 <style>태그 안에
.mytitle{
color:red;
}
이렇게 코드를 작성하면 된다.
그러면 이렇게 mytitle이라고 이름표를 달아준 부분의 색이 빨간색으로 변한것을 확인할 수 있다.
다음으로 태그명을 바로 가리키는 방법이다.
선택자를 이용하는 방법과 크게 다르지 않다.
똑같이 <style>태그 안에 작성하면 되고 선택자를 이용할 땐 이름표앞에 .(점)을 붙였다면
태그명을 직접 가리킬 땐 .(점)을 붙이지 않아도 된다.
이 외에도 다양한 선택자들이 존재한다.
1. 전체 선택자(HTML 페이지 내부의 모든 태그를 선택)
*{
color:blue;
margin: 0;
}
2. 태그 선택자(모든 p태그를 지칭)
p{
color : darkgreen;
background : yellowgreen;
}
3. 클래스 선택자
/* class1 클래스를 가진 모든 태그를 지칭 */
.class1{
color : red;
}
/*div 태그 중 class2 클래스를 가진 태그만 지칭*/
div.class2{
color : yellowgreen;
}
class와 id
-id는 css에서 거의 쓰지 않고, javascript에서 가리킬 때 주로 사용한다. 예를 들면
class는 "4학년" 또는 "남자"와 같이 누구나 붙일 수 있는 이름표라면 id는 "홍길동"와
같은 한 사람만 붙일 수 있는 이름표이다.
(그래서 class는 중첩이 가능하다)
정리
-css는 <head>태그 안에 <style>이라는 공간을 만들어 사용한다.
-css를 사용하는 방법은 선택자를 이용하거나 태그명을 직접 가리켜 사용할 수 있다.
-선택자는 쉽게 class나 id에 이름표를 달아주고 이름표가 붙은 부분들의 글씨를 빨간색으로 바꿔라하는 것과 같다.
-선택자는 이름을 자유롭게 지을 수 있지만 이후에 관리를 하기 위해 어떤 역할을 하는지 잘 알 수 있게 이름을 정하는 것이 중요!
- 자주 쓰이는 css 참고: http://www.walterz.net/2017/08/18/자주-사용되는-css-속성/
'HTML,CSS' 카테고리의 다른 글
| [CSS]부트스트랩 사용하기 (0) | 2020.04.26 |
|---|---|
| [CSS]구글 웹폰트 적용하기 (0) | 2020.04.26 |
| [CSS]CSS연습하기(1) (0) | 2020.04.26 |
| [HTML]간단한 로그인 페이지 (0) | 2020.04.25 |
| [HTML][CSS]HTML과 CSS 기초 (0) | 2020.04.25 |
