Styled Components
styled component 공부 css 랑 비슷하지만 compnent구성으로되어있어 재사용 편함.
css 복습 공부
flex box 를 사용하기 위해서는 부모 container 안에 item 이 들어가있는 형태를 갖고있어야함.
flex 는 부모 컨테이너가 적용하는 속성과 자식 아이템이 적용하는 속성으로 나뉨.
부모 컨테이너 속성
display: flex; flex 를 적용하면 아이템들이 가로로 배치되고 각자 가지고 있는 '아이템' 의 width(폭) 만큼 공간 차지함. main axis 가로 cross axis 세로.
Flex-direction : 아이템의 배치를 방향을 설정
Flex-wrap : 아이템 줄넘김
flex-flow 를 써서 flex-direction 과 flex-wrap 을 둘다 쓸수있음.
ex) flex-low: row wrap;
justify :가로축 이동 / align 세로축 이동.
justify-content: main axis (가로축으로) 아이템 정렬
align-items : cross axis (세로축으로) 아이템 정렬
flex-basis 는 아이템의 기본크기 설정!!
Css 단위부터 다시봄
단위에는 rem, vh,vw,vmin,vmax,ex,ch 가있음.
기본적으로 쓰는 px 는 픽셀을 뜻하며 1px 는 1픽셀을 갖는 폰트의 크기
em
현재의 폰트사이즈를 기준으로하여 폰트 사이즈가 바뀜 (현재폰트 em)
부모 태그의 폰트사이즈가 기준이여서 자식 폰트가 em 일경우 부모 폰트사이즈 자식폰트사이즈
ex(
<Title>hello</Title>
</Container>
container 는 30px title 은 2em title 의 폰트 사이즈는 60이다.
)rem
root(em) 이다. 태그에 영향을 끼치지 않고 root 태그의 폰트사이즈를 기준으로하여 폰트 사이즈가 바뀐다.
vh & vw (Vertical height & vertical width)
사용자의 기기에 맞는 화면의 높이와 가로에 맞게 계산이 되어진다.
예를들어 나의 핸드폰 화면의 높이가 900Px 이고 가로가 500px 라고할때
1vh 를 사용하면 1vh 는 9px 이고 가로는 5 px 가된다.
즉 기기의 화면의 기준에서 100분의 1의 단위이다.
text-align 텍스트의 정렬 방향
기본 레이아웃
display 는 뭘 어떻게 보여줄꺼냐 결정하는 녀석.
4가지 타입이있음
none: 안보임
block : 박스형태 = 가로줄을 다 먹어야함 그래서 block 태그를 쓴 다음 태그들은 줄바꿈이되는데 공간을 넘어서서 다음줄로 넘어가는거임.
inline 인라인박스 = 줄바꿈안되고 사이즈 수정 불가
inline-block block 과 inline 중간형태 = 줄바꿈안되고 사이즈 수정가능
내일 레이아웃 연습해야함
Typescript
새 게시물작성하는 페이지에서 제목과 내용물을 입력하기 위해 input 태그를 이용
input 태그에 type 이 다양하다. 우리는 글만 입력하는 부분이 필요하여 text를 사용
input 태그에서 autofocus 를 사용하면 커서를 자동으로 표시하게해줌.. ex)
