CSS: Cascading Style Sheet
Universal *
type Tag
ID #id
Class .class
State :
Attribute []
구체적으로 더 세부적인 값을 조정할수록 그 값(작은selector)이 적용된다(중복시)
padding은 content안에 포함되고 margin은 content밖을 의미한다.
display
block: 한줄을 다 사용.
inline: content만 사용.
inline-block: 한줄에 다 들어가지만 블록레벨로(사용자지정 사이즈)
position
기본값 static
position: relative => 원래 있어야하는자리를 기준으로..
position: absolute => 내 아이템이 담겨있는 박스(부모)안에서 위치변경이 일어난다.
position: fixed => winodw(최상위)안에서 움직인다.
position: sticky=> 원래 있어야하는 자리에 있으면서 스크롤해도 계속 그자리에 붙어있음.
Flexbox
container에 꾸며줄 수 있는값과 item에 꾸며줄 수 있는 값이 존재한다.
container
- display
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
item
- order
- flex-grow
- flex-shrink
- flex
- align-self
main axis와 cross axis를 어디에 두냐에 따라 값이 달라진다.
display:flex 적용시 위와같이 적용이된다 Main Axis축 — — — — — — →
Responsive CSS Unit
Absoulte vs Relative
PX vs EM
px: 모니터에서 나타낼수있는 가장작은 단위. absolute unit => 컨테이너 사이즈가 작아져도 사이즈가 고정. 브라우저 폰트사이즈 설정을 바꿔도 반응하지 않는다.
em: relative unit, em, rem, vw, vh, %
em => 지금 폰트사이즈를 나타내는 단위. 어떤 폰트family를 사용하느냐에 따라서 px사용시 크기가 달라지지만, em은 무슨 폰트를 쓰더라도 같은 크기를 나타낸다. html기본폰트가 16px이다. 1em을 사용하면 그 픽셀에 맞게 된다 2em을 사용하면 32px이 적용. em은 그 부모의 크기에 비례해서 맞춰지게된다.
rem=>relative to root element. em과 비슷하지만 부모에 상관없이
정리: 부모요소의 사이즈에 따라서 사이즈가 변경되야된다면 em,%
brower의 요소에 사이즈에 따라서 사이즈가 변경되야된다면 rem,vh,vw
box size=> %, v* font => em,rem
