📓 교재: Do it! 웹표준의정석
✔ 작업중: In progress
🏷 태그: Dev, 웹&모바일, 웹프로그래밍기초
📆 학습일: 11/28/2022
- CSS
Cascading Style Sheet : HTML element 의 모양을 정의한다.
부모태그의 스타일이 자식태그에 상속되거나, 중첩되기도 하며,
상속되는 태그가 있는 것도, 아닌 것도 있다.
< CSS 의 핵심 >
- selector 사용법 !!
- 셀렉터 { 스타일:값; 스타일:값;… }
- 동일한 스타일을 넣으려니 반복이 귀찮아서 SASS 라는 변형을 사용하기도
- specificity : 스타일 적용 순서 !!
- box 다루는 방법 : 테두리, 여백, 박스 계산법
- 폰트 다루는 방법
- 색상 지정 방법
- 배경 다루는 방법
- 블록과 인라인 다루는 방법
- 위치 조정하는 방법
….. 그 이상은 CSS 고급에서 다룰 것
- 셀렉터 { 스타일:값; 스타일:값;… }
- 동일한 스타일을 넣으려니 반복이 귀찮아서 SASS 라는 변형을 사용하기도
| 종류 | 예시 |
|---|---|
| * { } | |
| 태그명 { } | body { } |
| 태그명, 태그명, 태그명 { } | img, ul { } |
| .그룹명 { } | .c1, .c2 { } |
| #태그아이디 { } | #content { } |
| -[속성명:값] { } | |
| -:상태명 { } pseudo selector | li:hover { } |
- 부모 태그와 자식 태그의 계층 구조 : UI는 아래와 같이 차곡차곡 계층화됨
body에 배경을 그레이로 설정
p까지 배경 색상이 상속 될 텐데, p에 다시 한번 배경색 설정?
이렇게 쓸데 없는 출력을 줄이는게 중요! 프론트앤드의 기술이다. =Virtual DOM????
li태그는 블록태그 : 한라인 독점
‘다음 태그’의 개념! ‘형제’, 자손x
