GINS WIKI 긴스 위키

문서의 이전 판입니다!

---

주석

/* 한줄 주석 */
/*
  여러줄 주석
*/

기본문법

선택자 { 선언부 }

선언부에는, 속성명과 값을 써서 CSS를 설정한다.

선택자 { 속성명: 속성의값; 속성명: 속성의값; }

• 속성명 : Property
• 속성의 값 : Value

선택자

<div>hello</div>
<p>hello2</p>

• { color: blue; }

선택자를 *로 해두면 모든 요소를 선택하는 것이 된다.

태그 요소 선택자

<div>hello</div>
<h2>hello2</h2>
<p>hello3</p>

h2 { color: red; }

선택자 h2를 사용한 부분만 선택된다.

아아디 선택자

• 아이디 선택자 in CSS : #

<div>hello</div>
<h2>hello2</h2>
<p id="hello">hello3</p>

#hello { color: red; }

html 태그에 id를 사용해서 값을 설정하고 css 에서는 아이디 선택자 #를 사용해서 요소를 선택한다.

• ?? : id는 여러개 쓰게 되면 어떤게 선택되는걸까?

클래스 선택자

• 클래스 선택자 in CSS : .

<div class="first">1번 그룹</div>
<div class="first">2번 그룹</div>
<div class="second">3번 그룹</div>
<div class="second">4번 그룹</div>

html에서 class를 사용해서 속성 값을 부여한다. CSS 에서는 . 기호를 붙여 해당 클래스를 사용하는 요소를 선택한다.

.first { color:red; }
.second { background-color: green; }

다중선택자

• 선택자를 ,를 사용해서 여러개를 선택자에 같은 스타일을 지정할 수 있다.

h1,
#hello,
.first {
  color: red; 
}