이미지가 변경될 가능성이 높은지? (header 배경)
-> 업데이트가 되는 부분은 마크업으로 들어가는 것이 훨씬 유리하다!
absolute로 지정된 요소는 flex items가 될 수 없다.
ㄴ 이 요소의 배경은 absolute로 지정되어, z-index: -1로 배경처럼 설정되어 있다.
그렇다면 flexbox를 적용하더라도 flexitems가 되지 않는다
. -- 사용해서 사이즈/색상 관리하기
:root {
--gap: 20px;
--color-primary : salmon;
--color-primary-light : seashell;
}
.section{
background-color: white;
border: 1px solid var(--color-primary);
padding: var(--gap);
margin: var(--gap);
}
aspect-ratio
- width / height 비율을 입력하여 해당 비율에 맞게 조정되는 것이다. (IE는 지원x)
ex) aspect-ratio : 16 / 9
ㄴ 16:9 비율로 이미지를 조정해준다.
object-fit: cover;
사진의 본래 크기를 보여주고 싶을 때
fill: container 에 맞춰 이미지를 보여준다.
none: width, height 값을 무시하고 이미지의 크기를 본래 크기대로 보여준다.
cover: 이미지의 비율을 해치지 않으면서 컨테이너에 꽉차게
scale-down: 이미지가 주어진 영역보다 작을 때는 none 속성 값처럼 작동하다가, 이미지가 주어진 영역보다 클 때는 contain 속성 값처럼 작동합니다.
media 쿼리로 가로 길이가 늘어날 때 가로 정렬하기
이 것을 media 쿼리로 변경하면 ?
.
.
.
ㄴ 헤더는 fixed, 컨텐츠는 margin-left : 50%를 줘서 중앙부터 배치
Grid를 통해 갤러리 레이아웃 정하기
기본적으로 Grid는 확장성을 갖추기 위해 (=식판)
레이아웃 시스템을 구축해야 한다.
grid layout 만들기
grid 클래스 단위로 만들고, 내가 쓰고싶을 때마다 활용을 한다. !
~~ >그리드는 12로 나누는 것을 좋아하고, 12로 나누었을때 6만큼 점유 -> 1행에 2열이 있다...
클래스만 교체하면서 원하는 것을 만들어 낸다.
=> media 쿼리에도 활용.
=> ex) 960보다 넓어질 때는 grid클래스를 추가하자!
<그리드 시스템 클래스>
.l_col_12_12 { width: 100%; }
.l_col_11_12 { width: 91.66666667%; }
.l_col_10_12 { width: 83.33333333%; }
.l_col_9_12 { width: 75%; }
.l_col_8_12 { width: 66.66666667%; }
.l_col_7_12 { width: 58.33333333%; }
.l_col_6_12 { width: 50%; }
.l_col_5_12 { width: 41.66666667%; }
.l_col_4_12 { width: 33.33333333%; }
.l_col_3_12 { width: 25%; }
.l_col_2_12 { width: 16.66666667%; }
.l_col_1_12 { width: 8.33333333%; }
'HTML+CSS' 카테고리의 다른 글
html/css #15-부족한 점 보충 (지그재그 풀이) (2) | 2024.01.03 |
---|---|
html/css #14-transform, 애니메이션 (0) | 2024.01.02 |
html/css #12-css variables 색상관리 (0) | 2023.12.21 |
html/css #11-vw단위, z-index 쌓임맥락, 벤다이어그램 (0) | 2023.12.20 |
html/css #9-flexbox 반응형 맛보기: 수도 엘리먼트, 네거티브마진 (insideout 과제) (1) | 2023.12.19 |