'CSS' 카테고리의 글 목록

CSS

나이많은 초보 2022. 9. 13. 11:10

2022. 9. 13. 11:10

이미지를 td안에 넣었더니 처음 주었던 300px에 오바가 되서 엄청 크게 나온다.

style값을 주었다.

줄어 들었다.^^

나이많은 초보 2022. 8. 27. 13:33

2022. 8. 27. 13:33

flex박스로 화면정렬 진행...

flex-direction : row : 기본값 왼쪽에서 오른쪽

flex-direction: row-reverse: 오른쪽에서 왼쪽

flex-direction: columㅜ-reverse: 아래에서 위쪽 반대순이다.

flex-wrap : nowrap ;그냥 한줄에 다 붙여라....wrap으로 하면 자동 줄빠꿈해라...

wrap-reverse하면 반대로 밑에서...아래로..

flex-flow는 direction와 wrap 를 합친것이다. column nowrap로 하면 세로정렬로 연결계속된다.

justify - countent : flex-strat 왼쪽에서 시작....end는 순서는 유지 오른족에서 시작

justify-content: space-around; 중앙정렬을 하는데 아이템에 감싸는 빈공간이 있다.

evenly 는 똑같은 간격이 생겨나고 between은 화면에 맞게 배치하고 간격조정

align - items : center;는 수직축으로 중앙 정렬

align-content: 자동으로 아이템을 줄 배치하게된다..

space -between : 화면 맨위, 맨아래는 붙어 있으면서 중간아이템을 기준으로 공간이 생겨 정렬된다.

center;센터에 모여서 정렬된다.

모질라에 확인볼수 있다.

- 아이템에따란 속성값을 다르게 줄수 도 있다.

plex-grow :화면크기 변경에 따라 컨테이너를 채울려고 자동으로 커지거나 작아지거나 한다...

plex-shrink: 화면크기가 작아져서 자동으로 작아지는데 순서에 따라 다르게 지정가능하다.

plex-basis: auto; 화면에 따라 자동으로 변화하게 하는데 width에따라 100,,80,,60,,,%로지정가능

align-self: center;....아이템 한개만 위치를 변경할수 있다.

flexboxfroggy연습게임...