CSS (cascading Style Sheet)
Style sheet 언어
selector
어떤 태그를 고르고 싶은지 명시
괄호 안에 property를 넣고 value를 넣음
종류
Universal *
type Tag
ID #id
Class .class
State :
Attribute []
html 예제
Universal *
- 전체 색상을 black으로 지정
ID #id
- li와 #special을 각 blue, pink으로 지정
State :
- button에 마우스 갖다댈 시 글자색 green, background 색 beige로 지정
(:hover - 마우스를 올린 태그나 속성)
Class .class
- .red class의 background 색상을 yellow로, 크기는 30X30으로 지정
- .red class의 background 색상과 크기 등 지정해보기
Attribute []
- href 가 있는 부분의 색상을 red로 지정
([^] 시작하는 부분)
- naver로 시작하는 부분의 색상을 purple로 지정
([$] 끝나는 부분)
- .com으로 끝나는 부분의 색상을 green으로 지정
Flex box
-
container, box에 적용되는 속성 값 존재
dispaly
flex-direction
flex-warp
flex-flow
justify-content
align-items
align-content -
각각의 item들에 적용할 속성 값 존재
order
flex-grow
flex-shrink
flex
align-self
< 참고 예제 및 자료 >
https://youtu.be/gGebK7lWnCk
