CSS

Cascading Style Sheet

의미, 정의

! important - 가장 우선되는 순위 (가능하면 쓰지 않는게 좋음)

Author Style

User Style

Browser

선택자(selectors)

• Universal - *
• type - Tag
• ID - #id
• Class - .class
• State - :
• Attribute - [ ]

스타일링

• margin
• padding
• border

CSS 레이아웃 정리(display, position)

Display

• block - 한줄에 한개의 상자
• inline-block - 한줄에 여러개 블럭 단위로 컨텐츠 사이즈 상관없이
• inline -컨텐츠 자체만을 꾸며준다. 안에 있는 값만

Position

• static - 기본값, HTML에 정의된 순서대로 브라우저에 자연스럽게 보이는것
• relative - 원래 있어야되는 자리에서 준 값만큼 이동
• absolute - 내 아이템이 담겨있는 상자안을 기준으로 준 값만큼 이동
• fixed - 상자 안에서 완전히 벗어나서 윈도우 기준으로 준 값만큼 이동
• sticky - 원래 있어야 하는 자리에 있고, 스크롤링 되어도 그자리에 붙어있는것

Flexbox

float

left, center, right

container

• display : flex - flexbox라고 선언? 하는방법
• flex-direction - box 방향
• flex-wrap - 기본값 nowrap - 무조건 한줄안에, wrap - 한줄이 꽉차면 다음줄로 바뀜
• flex-flow - direction과 wrap을 한번에 묶은것
• justify-content - 중심축에서 아이템들을 어떻게 배치할지. 기본값 flex-start, flex-end : 오른쪽으로 붙여서, center : 가운데, space-around : 같은 간격으로 띄어서
• align-items - 반대축에서 아이템들을 어떻게 배치할지, baseline : 아이템크기와 상관없이 텍스트를 같은 줄로 맞추는방법
• align-content - 반대축의 아이템들을 어떻게 배치할지, space-between 양쪽끝은 딱붙이고 사이에 간격

container 안에 있는 item

• order - order: 기본값0, order을 이용해서 item들의 순서를 변경, 잘 사용X
• flex-grow -기본값0일때는 변화가 없지만 값을 주면 container를 채우려고 늘어난다. 주어진 값에 따라상대적인 비율
• flex-shrink - container가 점점 작아질때 줄어드는 비율. flex-grow의 반대.
• flex-basis - 아이템들이 공간을 어떻게 차지해야하는지 더 자세하게 세부적으로 정해줌. 기본값 auto
• align-self - container에 지정된걸 벗어나서 특정 item의 위치만 변경해주고 싶을때

main axis(중심축) & cross axis(중심축의 반대축)

100% vs 100vh(viewport height)

• 100% - 부모의 100%
• 100vh - 부모에 상관없이 보이는 viewport의 %로