03/24 HTML/CSS grid item정렬, 방 꾸미기

 

Grid 아이템 정렬

 

 

developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout

Box alignment in grid layout - CSS: Cascading Style Sheets | MDN

 

 

 

수평 : inline / 수직 : block

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이런모양으로 만들어봐라

 

 

box별로 align-self 적용

 

 

 

justify 와 align에서 기본값은 stretch이다

 

 

 

flex-start, flex-end 도 쓸 수는 있지만 적용이 되지 않는 것들이 있기 때문에 start, end로 쓰자

 

 

 

 

 

 

 

 

 

content 정렬을 할 때에는 부모 여백을 더 크게 해줘야 하겠다

 

 

 

 

 

 

item정렬은 그 아이템이 부여받은 영역의 안에서 이뤄진다

 

 

 

 

 

 

 

뉴렉처 공지사항 사이트  적용하기

 

 html 부분

 

css

 

 

 

 

 

 

body 방 꾸미기

 

 

 

잘보면 그라데이션이다 -> 그라데이션 벽지 발라야 해

 

라운드 형태의 그라데이션... -> css에서 불가능해서 이미지파일로 입혀야 한다

 

 

 

 

배경이미지는 두 개가 들어갈 수 없어서

 

중첩 ->

  body 그라데이션 + aside에 따로 배경이미지