# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다.
1. 스타일과 스타일시트
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= "외부 스타일 시트 파일 경로">
2. CSS 기본 선택자 알아보기
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 { 스타일 규칙 }
3. 케스케이딩(Cascading) 스타일 시트
- 스타일 끼리 충돌하지 않도록 막아주는 역할
- 우선순위에 따라 적용할 스타일을 결정
1) 스타일 우선순위
ⓐ 얼마나 중요한가 : 사용자 스타일 > 제작자 스타일 > 브라우저 스타일
ⓑ 얼마나 한정지을수 있는가 : !important > 인라인스타일 > id스타일 > 클래스스타일 > 타입스타일
ⓒ 소스 순서에 따라 : 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓴다.
2) 스타일 상속
- 자식 요소에서 별도로 스타일을 지정하지 않으면 스타일 속성들이 자식요소로 전달
- 모든 속성이 상속되는건 아님
'Frontend > Study' 카테고리의 다른 글
| [CSS] 08_레이아웃을 구성하는 CSS 박스 모델 (0) | 2021.07.02 |
|---|---|
| [CSS] 07_텍스트를 표현하는 다양한 스타일(텍스트 속성) (0) | 2021.07.02 |
| Web과 HTML (0) | 2021.02.05 |
| 자바스크립트 프로그래밍 입문 4장 (0) | 2020.08.12 |
| 자바스크립트 프로그래밍 입문 3장 (0) | 2020.08.12 |