css 선택자 우선순위
- @important
- 인라인 스타일 시트
- id 스타일
- class 스타일
- style 태그에 태그 이름 직접입력
2022-10-18 강의 내용
- css란 무엇인가?
- css 스타일 시트 적용 하는 법과 종류
- 스타일 시트 우선순위
- 선택자 (selector)
- 결합 선택자
- 가상 클래스 선택자
- id 선택자
- class 선택자
- 그룹 선택자
CSS (Cascading Style Sheet)
- HTML 문서의 색이나 모양 등 외관을 꾸미는 언어
- CSS로 작성된 코드를 스타일 (style sheet) 라고 부른다.
- 대소문자의 구분은 없지만 HTML과 마찬가치로 통일성을 주는게 좋다.
css3의 기능
- 색상과배경
- 텍스트
- 폰트
- 박스 모델
- 비주얼 포맷 및 효과
- 리스트
- 테이블
- 사용자 인터페이스
CSS적용 방법
| 종류 | 적용방법 |
| 인라인 스타일(Inline style) | <p style="color: red;"> 태그자체에 직접 입력한다. |
| 내부 스타일 시트(Internal style sheet) | head > style 태그 작성 |
| 외부 스타일 시트 (External style sheet) | link 태그를 사용하여 외부파일을 연결해준다. |
외부 스타일 시트
가장 보편적으로 사용하는 방법이다.
<head>
<link href="style.css" type=" text.css" rel="stylesheet">
<head/>| href | style.css 파일을 불러올 것을 지시한다. |
| type="text/css" | 불러오는 파일이 어떤 언어로 작성된 파일인지 알려준다. |
| rel | 스타일시트 라는 것을 삽입 |
※기타방법 @import
이하 3가지 방법모두 유효한 방법이다.
<style>
1 @import url(style.css);
2 @import url("style.css");
3 @import "style.css";
</style>자식, 자손 선택자
자식 선택자 >
- 부모자식 관계인 경우 > 기호를 사용하여 선택해준다
<div>의 직계 자식인 p를 선택할때 = div > p
<div>
<p>
<a><a>
</p>
</div>
자손 선택자 (띄어쓰기)
- 자손관계인 태그를 선택할때 사용
<div>의 자손인 a를 선택할때 = div a
<div>
<p>
<a><a>
</p>
</div>가상 클래스 선택자
선택한 HTML 요소의 상태를 명시, 변경할 때 사용, 3가지 종류가 있다.
- 동적 가상 클래스
- 상태 가상 클래스
- 구조 가상 클래스
동적 가상 클래스
- 링크의 상태에 따라 각각의 스타일을 별도로 설정한다.
| :link | :visited | :hover | :active | focus |
상태 가상 클래스
- 입력 양식의 상태에 따라 각각의 스타일을 별도로 설정한다.
| :checked | :enabled | :disabled |
input 태그중에 checked라는 태그를 가진 input을선택하고 가장 근접한
바로 다음에 오는 요소 형제태그인 span을 선택해라.
css
input:checked+span {color: red;}
HTML
<input type="checkbox" checked="checked"><span>HTML</span>
<input type="checkbox"><span>CSS</span>
<input type="checkbox" checked="checked"><span>JAVA</span>구조 가상 클래스
- HTML 요소중 특정 위치에 있는 요소를 선택할 수 있다.
| :first-child | :last-child | :nth-child | :nth-last-child |
가상 요소 선택자
- HTML 요소의 특정 한 부분만을 선택할 때 사용
속성 선택자
- HTML 태그의 특정 속성이나 특정 속성값을 가지고 있는 태그 선택가능
<input> 태그의 type 속성값이 “text”인 태그만이 선택됨
CSS
input[type=text] { color : red; }
HTML
<body>
<input type="checkbox">
<input type="text">
<input type="checkbox">
</body>
새싹 DT 기업연계형 프론트엔드 실무 프로젝트 1주차 블로그 포스팅
'CSS' 카테고리의 다른 글
| 2022-10-24 [새싹 프론트엔드] 테이블, CSS 레이아웃 강의정리 (0) | 2022.10.24 |
|---|---|
| 2022-10-21 [새싹 프론트엔드] 강의정리 (0) | 2022.10.21 |
| 2022-10-21 box-sizing[새싹 프론트엔드] (0) | 2022.10.21 |
| 2022-10-20[새싹 프론트엔드] 강의정리 (0) | 2022.10.20 |
| 2022-10-19 [새싹 프론트엔드] 강의정리 (0) | 2022.10.19 |
