[CSS] 06_CSS의 기본

Frontend/Study

BeNI 2021. 6. 29. 15:12

728x90

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다.

1) 스타일 형식

선택자 { 속성1: 속성값1; 속성2: 속성값2 }

- 선택자 : 스타일을 어느 태그에 적용할 것인지 알려줌

- 중괄호 사이에 스타일 정보를 넣음

ex) <p> 태그에 스타일 적용하기

p {
  text-align: center;
  color: blue;
  }

* 한 줄로 작성해도 되고, 여러 줄로 작성해도된다. (세미콜론만 붙이면!)

- 스타일 주석 : /* 주석 할 내용 */

* ctrl+ ? : 주석처리

2) 스타일 시트

- 스타일 규칙을 한눈에 확인하기 위해 한 군데 묶어놓은 것

- 브라우저 기본 스타일과 사용자 스타일로 나뉠 수 있다.

- 사용자 스타일은 인라인, 내부, 외부 스타일 시트로 나뉜다.

① 브라우저 기본 스타일

- css를 사용하지 않은 웹문서라고 하더라도, 웹 브라우저에 표시할 때는 기본 스타일을 사용함

② 인라인 스타일

- 스타일 시트를 이용하지 않고 적용할 대상에 직접 표기하는 것

<p style="color: blue;"> 안녕하세요 </p>

③ 내부 스타일 시트

- 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것

- <head>태그 안의 <style> 태그 사이에 작성

④ 외부 스타일 시트

- 여러 웹문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 사용하는 것

- 외부 스타일 시트를 연결할 때는 <link> 태그를 이용함

<link rel = "stylesheet" href= "외부 스타일 시트 파일 경로">

1) 전체 선택자 : *(별표)

* { 속성: 값; .... }

2) 타입 선택자 : 특정 부분에 스타일 적용

① class 선택자 : 문서 내 여러번 적용 가능

.클래스명 {
    	스타일 규칙;
	color: red;
    }

* 특정부분 적용 <span class="redtext"> 태그 이용

② id 선택자 : 문서 안에서 한 번만 적용할 수 있음

#아이디명 { 스타일 규칙 }

ex) containter에 스타일 적용하기

<style>
  #container {
  width: 500px;
  margin : 500px;
  padding: 10px;
  porder: 1px solid #000;
}
</style>
...
<div id = "container">
...
</div>

3) 그룹 선택자 : 여러 선택자에 같은 스타일 규칙 적용

선택자1, 선택자2 { 스타일 규칙 }

- 스타일 끼리 충돌하지 않도록 막아주는 역할

- 우선순위에 따라 적용할 스타일을 결정

1) 스타일 우선순위

ⓐ 얼마나 중요한가 : 사용자 스타일 > 제작자 스타일 > 브라우저 스타일

ⓑ 얼마나 한정지을수 있는가 : !important > 인라인스타일 > id스타일 > 클래스스타일 > 타입스타일

2) 스타일 상속

- 자식 요소에서 별도로 스타일을 지정하지 않으면 스타일 속성들이 자식요소로 전달

- 모든 속성이 상속되는건 아님

728x90