CSS란?
CSS는 구체적으로 어떤 스타일로 요소가 표시 되는지를 정하는 규격이다.
HTML이 웹페이지의 정보를 표현한다면, CSS는 HTML을 보기 좋게 디자인하는 역할을 하는 언어이다.
사용법
- HTML 태그의 style 속성을 이용
- <style> 태그를 통해 HTML 문서 내부에 기술 (<style> 태그는 주로 <head>태그 내부에 사용합니다)
- .css 파일로 분리하여 HTML 문서에 연결
<!-- 1번 방법 -->
<div style="color: red"> this is red text </div>
<!-- 2번 방법 -->
<html>
<head>
<style type="text/css">
.my-text{ color: blue }
</style>
</head>
<body>
<div class="my-text">
this is red blue
</div>
</body>
</html>
<!-- 3번 방법 -->
<head>
<link rel="stylesheet" href="경로.css" type="text/css">
</head><!-- 3번 방법(css파일) -->
@charset "utf-8";
h1{
font-size: 30px;
font-weight: normal;
margin: 0;
margin-bottom: 10px;
}선택자
태그 선택자: 해당되는 태그 전부에 스타일을 적용
h1 { color:#F00; }
id선택자: #을 맨 앞에 붙여 사용하며, 원칙적으로 하나의 객체에만 적용할 수 있습니다.
#m_box{ width:500px; height:300px; }<div id="m_box">m_box 아이디</div>
class 선택자: . 을 맨 앞에 붙여 사용하며, 여러 객체에 적용할 수 있습니다.
.box{ background-color:blue; }<div class="box">box 클래스</div>
전체 선택자:문서에서 모든 요소 적용
* {margin: 0; padding: 0}
부모자식 선택자: 부모 태그 하위에 있는 태그에 스타일을 적용시킵니다.
- 공백 이용
div span{ text-align:center; padding:10px; }
div.yellow_box span { background-color:yellow; }<div class="yellow_box">
<span>
yellow_box div 클래스 내의 span 입니다.
</span>
</div>
- > 이용
.aa > .cc{ background-color: red }<div class="aa">
<div class="cc">
sec1
</div>
</div>가상 클래스 선택자: 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 합니다.
- :link - 방문한 적이 없는 링크
- :visited - 방문한 적이 있는 링크
- :hover - 마우스를 롤오버 했을 때
- :active - 마우스를 클릭했을 때
- :focus - 포커스 되었을 때 (input 태그 등)
- :first - 첫번째 요소
- :last - 마지막 요소
- :first-child - 첫번째 자식
- :last-child - 마지막 자식
- :nth-child(2n+1) - 홀수 번째 자식
