유형
실습문서
주제
css기본문법
순번
1
태그
설명
01. 내부스타일시트
head 태그 사이에 style 태그로 작성하는 방식
‣
‣
02. 외부스타일시트
‣
head 태그 사이에 link 태그에 css 문서의 주소를 링크하는 방식
‣
‣
03. @import
교재98p
css 문서에 다른 css 문서를 넣는다
@charset 'UTF-8'; 로 css 문서의 언어가 한글임을 표시한다
‣
‣
04. 인라인
html 태그안에 작성
‣
‣
04. 선택자 표 #MDN참고
cssSelector1.html53.8KB
Selector
05. 태그선택자
태그의 이름을 선택한다
태그{ }
‣
‣
06. 아이디선택자
태그에 아이디를 부여하고 선택
#아이디{ }
‣
‣
07. 클래스선택자
태그에 클래스를 부여하고 선택
.클래스{ }
‣
‣
BEM.pdf2062.2KB
08. 전체선택자
모든 요소를 선택
*{ }
‣
‣
09. 하위선택자
자손 태그를 선택
요소 요소{ }
‣
‣
10. 자식선택자
자식요소 선택
요소>요소{ }
‣
‣
11. 인접선택자
동위관계의 요소 하나만 선택
요소+요소{ }
‣
‣
12. 형제선택자
모든 동위요소 선택
요소~요소{ }
‣
‣
13. 그룹선택자
여러 요소에 같은 속성적용
태그,선택자{ }
‣
‣
형성퀴즈 1
‣
형성퀴즈 2
14. 속성선택자
속성을 선택해서 스타일 지정
태그[속성]{ }
속성 | 의미 | 예문 | |
^ (캐럿) | 시작 | [속성^=”망고”] | 속성의 값이 “망고”로 시작 |
$ (달러) | 끝 | [속성$=”망고”] | 속성의 값이 “망고”로 끝남 |
* (애스터리스크) | 포함 | [속성*=”망고”] | 속성의 값에 “망고”가 포함 |
= (이퀄) | 일치 | [속성=”망고”] | 속성의 값이 “망고”와 일치 |
‣
😺 속성을 지정하기
‣
😺 속성을 특정하기
‣
16. 가상선택자
하이퍼링크에 스타일 부여
둘이상 사용시 순서중요
- :link
- :visted
- :hover
- :active
‣
‣
17. 가상요소선택자
선택자 없이 선택할수 있음
‣
18. :nth-of-type
nth-child VS nth-of-type
:nth-child(n) | :nth-of-type(n) |
부모의 모든 자식요소 중 n번째 | 부모의 자식 중 특정요소의 n번째 |
‣
19. 우선순위
‣
‣
20. 상속관계
‣
‣
형성 퀴즈3
‣
형성 퀴즈4
‣