뉴렉처 과정 기록 (Frontend)/HTML _ CSS

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

yeonee3219 2021. 3. 24. 16:33

 

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

Box alignment in grid layout The Box Alignment specification details how alignment works in various layout methods. On this page we explore how box alignment works in the context of CSS Grid Layout.  As this page aims to detail things which are specific t

developer.mozilla.org

 

 

 

수평 : inline / 수직 : block

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이런모양으로 만들어봐라

 

 

box별로 align-self 적용

 

 

 

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

 

 

 

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

 

 

 

 

 

 

 

 

 

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

 

 

 

 

 

 

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

 

 

 

 

 

 

 

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

 

 html 부분

 

css

 

 

 

 

 

 

body 방 꾸미기

 

 

 

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

 

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

 

 

 

 

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

 

중첩 ->

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