달리는 자동차
CSS 정리1 본문
CSS란
Cascading Style Sheet의 줄임말이다. HTML 페이지에 디자인을 적용하기 위한 언어이며 HRML은 뼈대, CSS는 꾸미기(스타일), 그리고 Java Script는 interaction(상호작용)을 위한 것이라고 한다.
CSS를 적용하는 방법
1. 외부문서로 저장하여 연결하기(LInked Style)
| <link rel="stylesheet" type="text/css" href="스타일시트 경로"/> |
-css파일을 따로 관리할 수 있어 소스에 섞임이 없어 가장 많이 쓰이는 방식이며 다른 소스에 적용시켜서 그대로 적용이 되므로 하나의 CSS로 여러페이지를 적용시키는 방법이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>외부 CSS파일 적용</title>
<link rel="stylesheet" type="text/css" href="스타일시트 경로"/>
</head>
<body>
<div>
</div>
</body>
</html>
2. 문서 내부에 정의하기(Embedded Style)
-문서 내부에 정의하는 방법은 위와 같이 외부문서로 지정하지 않고 CSS를 헤드 태그 안에 스타일 태그를 선언하여서 그안에 적용하는 방법이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>스타일 태그에 CSS코드 작성</title>
<style type="text/css">
div{background:#fff}
</style>
</head>
<body>
<div>
</div>
</body>
</html>3. 태그에 직접 지정하기(Inline Style)
-태그에 직접 지정하는 것은 태그 안에 style="요소"를 지정하는 방식이다. 그럴경우 오직 저 태그만 해당 스타일이 적용되게 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>태그에 직접 css코드 작성</title>
</head>
<body>
<div style="background:#fff">
</div>
</body>
</html>4. CSS셀렉터(선택자)
-태그명을 선택자로 사용
매우간단하다. 태그명을 적고 괄호를 열고 닫고 한다. 예를 들어 p태그를 선택한다고 할 때
| p{CSS속성:값} |
태그를 선택자로 사용한다는 것은 해당태그로 감싸진 부분이 모두 적용이 된다는 것을 의미한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>태그명을 선택자로 사용</title>
<style>
p{color:red}
</style>
</head>
<body>
<p>hello world</p>
<p>hello k</p>
<p>hello a</p>
<p>hello y</p>
</body>
</html>5. 태그에 클래스 속성을 지정하여 선택자 사용
위의 소스와 똑같은데 hello k에만 빨강으로 표현되게 해보자. 즉 같은 태그라도 특정태그만 스타일을 적용시키는 방식인데 그렇게 하려면 특정태그에 별도의 이름을 부여해야 한다.
스타일 시트에는 다음과 같이 .클래스명{스타일 시트요소} 작성후
.클래스명{css값}
.red{color:red}적용하고자 하는 태그안에 class="이름"이라고 작성한다.
<p class="red">hello k</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>클래스를 선택자로 사용</title>
<style>
.red{color:red}
</style>
</head>
<body>
<p>hello world</p>
<p class="red">hello k</p>
<p>hello a</p>
<p>hello y</p>
</body>
</html>6. 상속된 태그만 선언되게 하는 방법
-아래와 같은 소스에서는 h1태그는 li태그에 상속되어 있다. 그리고 띄어쓰기로 구분을 해주므로 li h1{css}하면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>자식태그 선택자 사용</title>
<style>
li h1{color:red}
</style>
</head>
<body>
<ul>
<li><h1>hello world in list</h1></li>
</ul>
<h1> hello world in h1</h1>
</body>
</html>위 결과는 li태그안의 h1태그에만 빨강색이 적용되고 아래 h1태그에는 그렇지 않은 결과를 보여준다.
7.태그에 아이디 속성을 지정하여 선택자 사용
아이디값을 css선택자로 사용하는 방법이 있다. 아이디의 값은 오직 한번만 사용할 수 있다. 즉 어떤 태그에 rabit이라는 아이디 값을 적용했다면 다른 태그에는 적용해서는 안된다. 클래스는 여러번 사용할 수 있기때문에 차이점이 있다.
그리고 클래스는 앞에 . 을 붙인다면 아이디는 #을 붙인다.
| #아이디{CSS속성:값} |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>아이디를 선택자 사용</title>
<style>
#ch{color:skyblue}
</head>
<body>
<p id="ch">hello world</p>
</body>
</html>참고할 것은 아이디는 같은 이름으로 여러번 사용할 수 없기 때문에 다음과 같이 쓸 수 없다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>아이디를 선택자 사용</title>
<style>
#ch{color:skyblue}
</head>
<body>
<p id="ch">쓸수 없음</p>
<p id="ch">같은아이디 또 쓸 수 없음</p>
</body>
</html>