[CSS] StyleSheet스타일시트 및 선택자 사용법 정리

스타일(style) : HTML 문서에서 자주 사용하는 글꼴 및 색상, 정렬

각 요소의 배치 방법 등 문서의 겉모습을 표현 하는 내용이다.

 

스타일 시트(style sheet) : 스타일을 관리하기 쉽게 하나로 모은것이다.

---

CSS를 사용하는 이유는?

• 많은 웹페이지를 동시에 관리가 가능하다 (많은 일을 절약 가능)
• 웹 사이트의 스타일을 일관성 있게 유지할 수 있다. (유지 보수가 쉽다)
• 다양한 기기에 맞추어 반응하는 문서를 만들수 있다.

HTML에 CSS 적용방법은?

• 인라인 스타일 방법 (lnine Style Sheet)  => 권장하지는 않는다.
• 내부 스타일 시트 (lnternal Style Sheet)
• 외부 스타일 시트 (Linking Style Sheet)

인라인 스타일 방법
h1 { font-size: 20px; padding: 5px;}

내부 스타일 시트
h1 {
	font-size: 20px;
	padding: 50px;
}

외부 스타일 시트 style.css 파일을 만들어서 사용
h1
{
	font-size: 20px;
	padding: 5px;
}

선택자(selector) ⭐️⭐️⭐️⭐️⭐️

 

1. 선택자 기본 구조

선택_대상 {
/* 꾸며줄 효과 */
}

2. 태그로 찾는 방법

/* 모든 p 태그 선택 */
p {

/* p태그가 속한 글자색을 토마토로 변경 */
color: tomato;
}

/* 모든 p 태그 선택 */
body {
/* body 태그안에 있는 글자를 20x로 변경 */
font-size: 20px;

}

3. 클래스로 찾는 방법

/* 모든 grade 클래스를 선택 */
.grade {

/* 배경색을 붉게 */
background-color: Red;

}

4. id로 찾는 방법

/* id가 emp인 태그를 선택 */
#emp {

/* 글자를 두꺼운 볼드체로 적용 */
font-weight: bold;

}

5. 속성 id, name, class 비교

id	class	name
하나의 요소만 가능(페이지 내부 유일)	여러 요소 적용이 가능	여러 요소 적용이 가능
CSS에서 식별자로 사용 가능	CSS에서 식별자로 사용 가능	CSS에서 사용불가 하지만 Form태그에서 서버로 값을 넘길때 사용할 수 있다.

복합 선택자 ⭐️⭐️⭐️⭐️

 

1. 동시 선택하기

/* li 태그이면서 동시에 hobby 클래스인 것만 선택 */

li.hobby {
    color : Red;
}

2. 내부 선택하기

/* ul 내부에 있는 모든 li를 선택함 */
ul li {
     font-style: italic;
}

3. 상태별 선택

/* 모든 li태그 중에 마우스가 올려진 것을 선택함 */
li:hover {

    background-color: darkslateblue;
    color: blue;

}

캐스캐이딩(Cascading) ⭐️⭐️⭐️

여러가지 스타일이 적용 될때 위에서부터 아래로 단계적으로 적용이 된다.

 

하지만 원칙이 있다.!!!!!!!

 

1. 순위 인라인 스타일
2. ID 둘째 순위
3. 클래스
4. 태그 하나당 순위
5. 우선순위 같다면 마지막에 지정된 스타일로 적용된다.
6. !important 사용시에는 우선선위가 무시된다.

#example {
    font-size: 20px !important; 
}