CSS란?
Cascading Style Sheets의 약자로, 우선순위가 있는 style sheet
HTML이나 XML로 작성된 문서를 효율적으로 디자인하기 위해 등장한 언어
HTML은 본래 문서에 정보를 담기 위한 목적으로 생겨난 언어인데, 각종 디자인을 담당하는 태그가 생겨나기 시작하면서 디자인을 보여주기 위한 문서가 되는 문제가 생겼다.
그래서 HTML의 목적을 유지하고 디자인 기능도 살리기 위해서 디자인 관련 요소를 모아서 만든 CSS가 등장했다.
CSS를 사용하는 두 가지 방법
1. head 내부에서 <style>...</style>태그를 사용 (oragne) : 해당 태그에 종속
2. 기본 태그 내부 속성으로 style을 사용 (purple) : 그 라인만 적용
<!DOCTYPE html>
<html>
<head>
<style>
h2{color:orange} // 방법 1
</style>
</head>
<body>
<h1 style="color:purple">Hello World</h1> // 방법 2
<h2>Hello world</h2>
</body>
</html>
위의 코드를 편집기에 입력하고, 실행 결과를 확인해보자.
방법 1은 head에 h2의 색은 무조건 orange라고 정해놓은 셈이다. body에서 h2를 이용한 코드를 짜면, 그 코드는 orange로 나온다.
<!DOCTYPE html>
<html>
<head>
<style>
h2{color:orange} // 방법 1, head 안에 h2 태그의 속성을 정해둠
</style>
</head>
<body>
<h1 style="color:purple">Hello World</h1> // 방법 2, 이 라인만 적용
<h1> Bye world</h1> // 따로 h1의 속성을 나타내지 않아서 디폴트로 적용
<h2>Hello world</h2> // 따로 h2의 속성을 나타내지 않아도 head에서 적용됨
<h2>Bye world</h2> // 위의 이유와 동일
</body>
</html>
위와 같이 코드를 입력해주자.
1. head에 넣는 style 태그는 전역 변수와 같다. body에서 h2 태그를 쓰면 그 내용은 orange로 전체 적용된다.
body에서 h2의 속성을 orange라고 정하지 않아도, 알아서 orange 컬러의 Bye world가 출력됐다.
2. 그러나 태그 속성으로 들어간 style 태그는 지역 변수와 같다.
body에서 h1를 이용한다고 해도 style로 속성을 정하지 않았기 때문에 Bye world는 디폴트인 검은색으로 나온다.
CSS 선택자와 선언
<!DOCTYPE html>
<html>
<head>
<style>
li{ // 선택자 : h1
color:pink; // 색상(속성)은 분홍(속성값)
text-decoration:overline underline; // 텍스트 꾸미기(속성)는 밑줄(속성값)
}
</style>
</head>
<body>
<ul>
<li>Digital Forensics</li>
<li>Java</li>
<li>Web</li>
</ul>
</body>
</html>
편집기에 위의 코드를 입력해주자
선택자와 선언은 아래와 같이 이루어진다.
선택자 {속성 : 속성 값} // 보통의 경우
선택자 {속성 : 속성 값; 속성 : 속성 값;} // 속성이 2개 이상일 경우, 세미콜론 ;으로 구분
그래서, 코드에 입력한 것을 위와 같이 나타내면
li {color : pink; text-decoraton : overline underline;}이 된다.
선택자와 종류
* 태그 선택자
li{ // 선택자 : h1
color:pink; // 색상(속성)은 분홍(속성값)
text-decoration:overline underline; // 텍스트 꾸미기(속성)는 밑줄(속성값)
}태그를 선택해서 해당 태그의 속성을 전체 적용한다.
* ID 선택자
<!DOCTYPE html>
<html>
<head>
<style>
li{
color:pink;
text-decoration:overline underline;
}
#select{ // 폰트 스타일 : 이탤릭체
font-style : italic;
}
</style>
</head>
<body>
<ul>
<li>tag selector</li>
<li id="select">id selector</li> // 해당 라인만 적용
<li>class selector</li>
</ul>
</body>
</html>
head style 태그 안에, #select로 속성을 정해주고
속성을 적용할 태그 안에 id="select"를 삽입해주면 그 라인만 적용이 된다.
id는 한 번만 사용할 수 있다.
id는 1인당 1개만 가질 수 있다(예 : 학번). 이렇게 생각하면 이해하기 편하다.
* 클래스 선택자
<!DOCTYPE html>
<html>
<head>
<style>
li{ // 태그 선택자
color:pink;
text-decoration:overline underline;
}
#select{ // id 선택자, #으로 선언
font-style : italic;
}
.cancellation{ // class 선택자, .으로 선언
text-decoration : line-through;
}
</style>
</head>
<body>
<ul>
<li class="cancellation">tag selector</li> // class는 여러번
<li id="select">id selector</li> // id는 한 번만
<li class="cancellation">class selector</li> // class는 여러번
</ul>
</body>
</html>
head style 태그 안에, .cancellation으로 속성을 정해주고
속성을 적용할 태그 안에 id="cancellation"를 삽입해주면 클래스를 공유하는 태그에 적용이 된다.
학번은 1인당 1개씩 가질 수 있지만, 반은 겹칠 수 있다.
이렇게 그룹화 할 수 있는 선택자가 클래스 선택자다.
1. 태그 선택자로 li 태그의 폰트 속성을 정해주고, (색상 : 핑크, 오버라인 언더라인으로 꾸밈)
2. id 선택자로 #select를 선언해서 id 속성을 쓰는 라인에 이탤릭으로 꾸며주고,
3. 클래스 선택자로 .cancellation을 선언해서 같은 클래스를 공유하는 라인에 취소선을 그어줬다.
728x90