HTML

• 박스모델로 생각하는 것 중요

박스모델로 나누면 좋은점

• 박스별로 분류 하기가 좋다.

태그의 종류

박스

header, nav, aside, main, footer

main→ section → article

div, span, form

아이템

a, button, input, label, img, video

audio, map, canvas, table

사용자에게 보여지는 아이템들

block 레벨의 element

충분한 공간이 있어도 다음줄로, 한줄에 하나

inline 레벨의 element

공간이 허용하면 다른 태그 옆에 배치 가능

Box vs Item

a

<a href="주소" target=_blank>Click</a>

Block vs Inline

<p>태그 - 문단을 작성

Inline 레벨 - <b> <span></span>

Block 레벨 - <div></div>

ol, ul, li

ol>li*n 입력하면 원하는 개수만큼의 li 자동으로 입력

list 타입 설정해줄수 있음

input and type

보통 label과 같이 사용

id를 줘서 고유한 식별값을 부여

둘다 inline element

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의 %로