variables, object-fit, aspect-ratio, Grid System with flexbox 렛츠고
variables
CSS에도 변수가 있다. (이럴수가)
사용자 지정 속성은 문서 전반적으로 재사용할 임의의 값을 담는다.
/* 변수 선언 */
:root {
--main-color: red;
}
/* 변수 사용 */
body {
background-color: var(--main-color);
}variables 장점 1. 빠른 작업
프로젝트를 진행하다보면 CSS 양이 정말 정 ~ 말 많다.
특히 이때, 메인 컬러나 헤딩 폰트 사이즈, 여백 등 반복해서 사용되는 값이 있다.
CSS 변수로 반복되는 값을 설정하면 빠른 작업과 멋진 유지보수 두 마리 토끼를 잡을 수 있다.
빠른 작업 & 멋진 유지보수 -> 한번에 스타일 부여 및 수정 가능 !
variables 장점 2. 일관적인 스타일링
여러 페이지에서 자주 사용하는 연한 회색(예: #ccc)이 있다고 생각해보자.
--gray-color 변수를 설정하면 전 페이지에 회색을 #ccc로 사용하기 상당히 편리하다.
따로 시안이 없는 경우, 변수는 작업자가 만든 스타일 가이드가 된다.
메인 페이지에서 어떤 회색을 썼는지 확인하러갈 필요 없이 변수명을 입력하면 된다.
시안이 있지만, 페이지마다 묘하게 다른 회색이 사용되는 경우도 있다. 경험담 ㅎ;
변수로 회색을 지정한 멋진 프엔은 이것을 잡아낼 수 있다.
이 경우엔, 디자이너에게 달려가 어떤 걸 쓰면 되는지 (상냥하게) 물어보면 된다.
variables 장점 3. 범위 제한
위의 이미지를 살펴봐보자. 음식의 정보를 담고 있는 3개의 카드가 있다.
문제는 카드마다 사용되는 주컬러가 다르다.
이런 디자인을 많이 마주할텐데 우린 !! 변수를 사용하면 된다 ! (두둥)
아래처럼 변수 사용을 하면, 코드가 상당히 간결해진다.
범위를 제한한 변수 사용을 통해 광명 찾자 ~
/* 변수 사용 전 */
.card.type_green .card-description h2, .card.type_green .card-strong { color: #17A651; }
.card.type_green .card-hashtag { background: #17A651; }
.card.type_blue .card-description h2, .card.type_blue .card-strong { color: #0075FF; }
.card.type_blue .card-hashtag { background: #0075FF; }
/* 변수 사용 후 */
.card.type_green {
--main_color: #17A651;
}
.card.type_blue {
--main_color: #0075FF;
}
.card-strong {
color: var(--main_color);
}비율이 유지되는 요소
1. aspect-ratio
이전글에서 비율이 유지되는 요소를 만들기 위해 vw, padding: n% 사용을 언급했다.
여기에 무진장 신세대 ~ 캡숑 ~ 짱인 aspect-ratio을 더 알아보자 !
aspect-ratio요소의 가로 세로 비율 설정초기값auto ,상속X주의점width와 height를 동시에 지정하는 경우, aspect-ratio가 적용되지 않음
.box {
aspect-ratio: 16 / 9;
}만약 요소의 너비를 100px로 지정하고 aspect-ratio: 3/1로 설정하면,
높이는 33.33px이 된다.
사용방법
부모에 aspect-ratio로 비율을 정하고, 자식 요소에 아래 나올 object-fit을 사용하면 비율을 유지하는 멋진 img/video을 만들 수 있다.
-
aspect-ratio: 3 / 1- width / height 지정- 너비 3, 높이 1
-
aspect-ratio: 3- 한 개의 값 지정- 한 개만 지정할 경우, 높이를 1로 간주
- 너비 5, 높이 1
-
aspect-ratio: auto 1 / 1- 두 개의 값 지정- auto와 /을 동시에 사용 가능
- 요소가 고유한 종횡비를 가지면 해당 종횡비를 따름
- 요소가 고유한 종횡비를 가지지 않으면 지정한 비율을 따름
예외
아래의 경우에는 aspect-ratio가 적용되지 않으니, 주의가 필요하다.
- 너비와 높이가 모두 지정된 경우
- min-width 또는 min-height가 지정된 경우
- 콘텐츠가 넘치는 경우
브라우저 호환성
23.12 기준, IE를 제외한 브라우저에서 모두 사용이 가능하다.
2. object-fit
aspect-ratio과 함께 사용하면 금상첨화 그 자체인 !
object-fit은 이미지나 비디오 요소를 background-size 처럼 사용할 수 있게 한다.
object-fit이미지나 비디오 요소의 콘텐츠 크기를 어떤 방식으로 조절하여 요소에 맞출 것인지 지정초기값fill ,상속X
.header-cover {
object-fit: cover;
}사용 가능한 값
fill초기값, 요소 콘텐츠 박스 크기에 맞춤, 가로세로비가 일치하지 않으면 콘텐츠가 늘어남contain가로세로비를 유지하며, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절cover가로세로비를 유지하며, 요소의 콘텐츠 박스를 가득 채움, 객체 일부가 잘릴 수 있음none크기 조절을 하지 않음scale-downnone과 contain 중 콘텐츠 크기가 더 작아지는 값을 선택
브라우저 호환성
23.12 기준, IE를 제외한 브라우저에서 모두 사용이 가능하다.
Grid System with flexbox
이제 flexbox를 꽤나 배웠다.
그렇다면 실무에서 자주 마주치는 그리드를 flexbox로 구현해보자 !
아래 화면에 3개씩 표시되는 그리드가 있다.
/* 완성 코드 */
.l_row {
display: flex;
flex-wrap: wrap;
margin: 0 -20px;
row-gap: 40px;
}
.l_col {
box-sizing: border-box;
padding: 0 20px;
}
.l_col_4_12 {
width: 33.33333333%;
}gap이 아닌 padding, margin으로 여백 만들기
flexbox이기 때문에 gap으로 여백을 만들 수 있다. 하지만 gap을 사용하면, flex items에 직관적으로 그리드를 파악할 수 있는 width: 33.33333% 사용이 어려워진다.
.l_row의 너비가 1000px 이라고 가정하면, .l_col은 333.33px이다.
여기에 20px의 gap이 더해지면 부모 크기인 1000px보다 크기가 커진다.
333.33px+여백(20px)+333.33px+여백(20px)+333.33px= 1040px
이때 padding과 margin으로 여백을 만들면, 100%가 초과하는 것을 방지할 수 있다. 아래처럼 각각 요소에 padding과 margin을 설정한다.
.l_row {
margin: 0 -20px;
}
.l_col {
box-sizing: border-box;
padding: 0 20px;
}class로 레이아웃 조정하기
작업을 하다보면, 한 줄에 3개씩 들어가는 레이아웃 외에도 2개, 4개 등 다양한 레이아웃을 만들어야 하는 순간이 찾아온다. 이때 클래스마다 미리 스타일을 부여해두면 작업 속도에 날개를 달 수 있다.
/* 종찬 스승님 코드 감삼다 ~ */
.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%; }display: grid 활용하기
flexbox로 그리드를 만들어 보면 !
아 ,, grid가 정말 필요해서 나온거구나 ~ 하는 생각이 절로 든다.
그리드는 ... 플렉스 말고 그리드로 만들자 !
얼른 그리드 배웠으면 ~
