8/19 (월)
em, rem
em과 rem은 둘 다 font-size 속성값에 비례해서 결정되는 상대 단위이다. 하지만 정확히 어디에 있는 font-size 속성값인지에 따라 차이가 발생한다.
💡
em
해당 단위가 사용되고 있는 요소의 font-size 속성값이 기준
💡rem
r은 root, 즉 최상위 요소를font-size 속성값 의미
❗️ HTML에서 최상위 요소는 html 이므로 rem 경우, html 요소의 font-size 속성값이 기준
❗️ rem 단위를 사용하면 해당 요소의 font-size 속성값은 전혀 중요하지 않다.
❗️ 글꼴 크기 설정을 바꾼적이 없다면 16px로 셋팅
:root {
font-size: 16px;
}
div {
font-size: 20px;
width: 10em; /* 200px */
}
div {
font-size: 20px;
width: 10rem; /* 160px */
}✔️ 해당 요소에 font-size 지정 안되었을 때
:root {
font-size: 16px; // 실제 모든 요소의 font-size를 10px 수치로 지정 하는 것이 주 된 목적이 아니라, rem 단위의 기준을 형성하기 위한 의도
}
div {
width: 10em; /* 160px */
}
div {
width: 10rem; /* 160px */
}rem은 원래부터 해당 요소의 폰트 사이즈를 무시하므로 상관 없고 em은 해당 요소에 폰트 사이즈 지정이 안되어 있으므로 상속을 받아 부모 요소의 상대적인 크기로 지정이 된다.
:root {
font-size: 16px;
}
header {
font-size: 18px;
}
header div {
width: 10em; /* 180px */
}
div {
width: 10rem; /* 160px */
}이렇듯 em은 해당 요소의 부모를 찾아서 상대적인 크기를 지정해야하고, 부모에도 em으로 폰트 사이즈가 지정되어 있다면 부모의 부모를 찾아가야 한다.
그러므로 em을 사용해서 스타일된 요소의 경우 재사용이 어렵고 유지보수가 힘들어지는 경향 때문에 rem을 사용하는 것이 더 좋을 것 같다.
:root {
// 전체 폰트 사이즈 설정의 기준값이 된다
--> 사용자 설정에 따라 값 달라짐
font-size: 62.5%
// 16px의 62.5% --> 10px
// 지정 안하면 16px이 기본 사이즈 이므로 62.5%을 적용하여 10px로 만든다. --> rem 사용 하면 쉽게 배수로 적용 가능
}
div {
font-size: 1.6rem; /* 16px */
}동영상
<video
class="article-cover-src"
src="images/cover.mp4"
autoplay
muted
loop
controls8/20 (화)
8/21 (수)
그리드 레이아웃 시스템
.l_row {
display: grid;
grid-template-columns: repeat( 12, 1fr );
gap: 10px;
}
.l_row_thin { gap: 4px; }
.l_row_wide { gap: 20px; }
.l_col_12_12 { grid-column: auto / span 12; }
.l_col_11_12 { grid-column: auto / span 11; }
.l_col_10_12 { grid-column: auto / span 10; }
.l_col_9_12 { grid-column: auto / span 9; }
.l_col_8_12 { grid-column: auto / span 8; }
.l_col_7_12 { grid-column: auto / span 7; }
.l_col_6_12 { grid-column: auto / span 6; }
.l_col_5_12 { grid-column: auto / span 5; }
.l_col_4_12 { grid-column: auto / span 4; }
.l_col_3_12 { grid-column: auto / span 3; }
.l_col_2_12 { grid-column: auto / span 2; }
.l_col_1_12 { grid-column: auto / span 1; }레이아웃
현재까지는 l_wrapper를 이용하여 흰색 배경처럼 레이아웃을 진행하였는데 만약 푸터나 헤더 등 나머지는 다 l_wrapper에 레이아웃이 되지만 밑 사진과 같이 특정 부분에서 더 넘치는 경우가 있다.
이 때 사용할 수 있는 방법은 다음과 같다.
- 네거티브 마진
- 그리드
레이아웃 - 네거티브 마진
💡 목표
l_wrapper를 사용하고 네거티브 마진을 주어 특정 부분만l_wrapper를 강제로 늘리자
✔️ 고정값 사용
margin-right: -100px
하지만 이 속성을 고정 값으로 주면 언제나 같은 값 만큼 네거티브 되기 때문에 창의 크기가 작아지거나 커져도 동일한 값이 네거티브 마진으로 작동한다.
✔️ max-width 값 사용
margin-right: calc ( ( ( 100vw - 960px ) / 2 ) * -1 )
이렇게 max-width인 960px을 빼주게 되면 만약 창의 크기가 최대 크기가 아니어서 960px 보다 작다면 내가 원하는 크기보다 더 마이너스 되게 된다.
✔️ 컨테이닝 블록 너비의 백분율 사용
margin-right: calc ( ( ( 100vw - 100% ) / 2 ) * -1 )
➡️ 마진 값을 변수로 지정
:root {
--wing: calc ( ( ( 100vw - 100% ) / 2 ) * -1 );
}
.section {
margin-right: var(--wing);
}❗️ calc 함수에서는 연산자 앞 뒤로 띄어쓰기 꼭 필수!
레이아웃 - 그리드
💡 목표
l_wrapper대신 그리드를 이용해 세칸으로 나누어 레이아웃을 해보자
❗️ <div class="l_grid_wrapper"> </div> 만으로도 칸이 생겼기 때문에
<div class="l_grid_wrapper"> // 그리드 칸을 만들어줌
<div></div>
<div></div>
<div></div>
</div>이렇게 섹션을 나눌 필요가 없다.
<div class="l_grid_wrapper"> // 그리드 칸을 만들어줌
<div calss="l_grid_wrapper-inside"> 컨텐츠 </div> // 컨테이닝 블록과 컨텐츠 작성하여 컨텐츠를 저 세칸 중 이동 가능하도록 한다.
</div>
✔️ 최종 코드
:root {
--wrapper-width: 960px;
}
.l_grid_wrapper {
display: grid;
grid-template-columns: 1fr minmax( 0, var(--wrapper-width) ) 1fr;
}
.l_grid_wrapper-inside {
grid-column-start: 2;
grid-column-end: 4;
}➡️ 1fr 은 margin-left: auto margin-right: auto 와 같다 ( 가용 공간을 같은 비율로 나눠갖는 개념)
➡️ wrapper-width
➡️ 0은 min 값에 auto를 넣어주면 컨텐츠의 크기에 따라서 부모의 크기가 달라지기 때문에 auto가 아닌 값을 넣은 것
++)
이름 짓기 (그리드 라인 말고)
.grid_wapper {
grid-template-columns:
[start]
1fr
[wrappper-start]
minmax( 0, var(--wrapper-width))
[wrapper-end]
1fr
[end]
}
++ grid-column: wrapper-start / end;++ 검사에 들어가서 (행 이름)을 체크해야 내가 지은 이름 볼 수 있음
0 말고 최솟값 패딩으로 지정
:root {
--wrapper-width: 960px;
--wrapper-padding: 20px;
}
.l_wrapper {
max-width: var(--wrapper-width);
padding: 0 var(--wrapper-padding);
margin: 0 auto;
}
.l_grid_wapper {
display: grid;
grid-template-columns:
[start]
minmax( var(--wrapper-padding), 1fr ) // 최소 값은 꼭 줘야하는 패딩 만큼 ( padding-left 처럼 동작 )
[wrappper-start]
minmax( 0, var(--wrapper-width))
[wrapper-end]
minmax( var(--wrapper-padding), 1fr )
[end]
}💡
l_wrappervsl_grid-wrapper
l_wrapper- 일반 용도
l_grid-wrapper- 까다로운 사장님 대응 용도
애니메이션
tooltip
figure
이미지에 대해 설명하거나 적을 세부사항이 많을 때 사용 한다.
<figure class="casts-icon">
<img src="image.png"/>
<figcaption>두아리파</figcaption>
</figure>
❗️ figure에도 초기화를 해야한다.
💡 이미지 초기화
컨테이닝 블록 기준으로 크기 제한을 걸어 이미지가 너무 커지지 않도록 함
max-width: 100%tooltip
.casts-icon {
position: relative;
}
.casts-icon figcaption {
position: absolute; // 일단 공간을 없애줘야 함!! --> 원래 공간이 없다가 마우스 오버되면 나오게 할 것이기 때문에
left: 50%: // 좌표를 컨테이닝 블록 너비 기준으로 이동 --> 왼쪽 상단 꼭지점이 기준이라 오른쪽으로 쏠려보인다.
// left: 0 right:0 margin: 0 auto --> 이 방식으로 진행하면 아예 너비로 꽉 차게 됨
top: 0;
white-space: nowrap; // 오른쪽으로 쏠렸는데 컨테이닝 블록 너비가 제한되어있어 줄 바꿈 현상이 일어남 --> 툴팁은 한줄에 나오므로 한줄에 뜨도록!!
transform: translateX(-50%); // 자기 자신의 너비의 절반을 translateX 이동 개념으로ㅗ
💡 white-space: nowrap - 줄 바꿈 현상 안일어나도록 하는 속성
8/22 (목)
💡
position: absolute에서 가운데 정렬하는 법
inset: 0&margin: autoleft: 50% top: 50%&transform(translate(-50%, -50%)
애니메이션
이 피아노 사진이 애니메이션으로 오른쪽 대각선 위로 가도록 하고 싶으면 어떻게 해야할까?
```
.piano {
transform: rotate(45deg) translateY(-200px);
}
```
➡️ 먼저 피아노를 45도 돌리면 진행 방향도 같이 회전한다.
이렇게 진행방향과 사진을 돌려논뒤 돌린 방향축으로 y축만큼 이동하면 맨 위의 사진 처럼 나온다.
❗️rotate ➡️ translate 순서가 중요함
❗️ rotate는 진행 축(방향)까지 회전시킴
만약에 위치는 이동시키고 방향은 이동시키고 싶지 않다면 이동 후 다시 방향을 원상복구하면 된다.
.piano {
transform: rotate(45deg) translateY(-200px) rotate(-45deg);
}