* CSS (Cascading Style Sheet)
- HTML 문서의 색이나 모양 등 외관을 꾸미는 언어
- CSS로 작성된 코드를 스타일 시트(style sheet)라고 부름
- 색상과 배경, 텍스트, 폰트, 사용자 인터페이스 등의 기능을 한다
* HTML 문서에 CSS3 스타일 시트 적용하는 방법
① 인라인 스타일 (Inline style)
② 내부 스타일 시트 (Internal style sheet)
③ 외부 스타일 시트 (External style sheet)
* 인라인 스타일
<태그이름 style= "속성이름:속성값">
- HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법
- 해당 HTML 요소에만 스타일을 적용할 수 있음
- 하나의 요소에 여러 개의 스타일 적용 시, 각각의 값은 세미콜론(;)으로 구분함
* 내부 스타일 시트
- <head> 태그에 <style> 태그를 사용하여 CSS 스타일을 적용
- <style> 태그는 여러 번 작성 가능
- 하나의 스타일 시트로 합쳐져서 적용됨
- 해당 HTML 문서에만 스타일을 적용할 수 있음
* 외부 스타일 시트
- 확장자가 .css인 파일에 스타일 시트 저장
- 웹 페이지에서 CSS3 스타일 시트 파일을 불러서 사용
- 동일한 스타일 시트를 웹 페이지마다 중복 작성 해소
- 웹 사이트의 전체 웹 페이지 모양의 일관성 확보
- <style>태그를 사용하지 않음
* CSS3 스타일 시트 파일을 불러오는 방법
- <link> 태그 이용
- href
"mystyle.css" 파일을 불러올 것을 지시
- type="text/css"
불러오는 파일이 CSS 언어로 작성된 텍스트 파일
- rel="stylesheet"
스타일 시트를 삽입
* CSS 적용 우선 순위
!important > 인라인스타일 > id 스타일 > 클래스 스타일 > 태그이름 스타일
* 전체 선택자
- 와일드 문자(*)를 사용하여 모든 태그에 스타일을 적용시키는 선택자
* 태그 이름 선택자
- 태그 이름의 선택자로 사용되는 유형
- 선택자와 같은 이름의 모든 태그에 CSS3 스타일 시트 적용
- 각 선택자는 콤마(,)로 구분
* id 선택자
- #으로 시작하는 이름의 셀렉터
- HTML 태그의 id 속성으로만 지정 가능
* class 선택자
- 점(.)으로 시작하는 이름의 선택자
- HTML 태그의 class 속성으로만 지정 가능
* 결합 선택자
- 자식 선택자 (child selector)
부모 자식 관계인 두 선택자를 '>' 기호로 조합
ex) div > b { color : blue }
<div>의 직계 자식인 <b>에 적용되는 스타일 시트
* 가상 클래스 선택자
- 선택하고자 하는 HTML 요소의 특별한 '상태'를 명시할 때 사용
- 콜론(:) 앞뒤에 빈칸을 두면 안됨
ex) li: hover, li :hover
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 1주차 블로그 포스팅
'새싹 프론트엔드' 카테고리의 다른 글
| [새싹 프론트엔드] 22.10.24 (0) | 2022.10.24 |
|---|---|
| [새싹 프론트엔드] 22.10.21 (0) | 2022.10.21 |
| [새싹 프론트엔드] 22.10.20 (0) | 2022.10.20 |
| [새싹 프론트엔드] 22.10.19 (0) | 2022.10.19 |
| [새싹 프론트엔드] 22.10.17 (1) | 2022.10.17 |
