l_wrapper vs wrapper
- l_wrapper : 재활용 가능성 높은 것
❗️ 공통적으로 나오는 레이아웃을 공공재로 만든 것
(여러 섹션에 공통적으로 나오는 것)
- wrapper: 한번만 나오는 것
(크게 전체를 묶는 것)
.wrapper {
margin: 60px auto; // 상하 60px 가운데 정렬
padding: 0 30px; //
width: auto; // 컨테이닝 블록 기준으로 가득 차려고 시도
max-width: 1200px; // 가득 차는 상황에서 최대치로 커질 수 있는 너비를 제한
}마찬가지로 그리드에 사용했던 l_row, l_col 도 공공재로 만들고 여러번 사용한다.
aspect-ratio
웹 성능을 위해 미리 공간을 확보해둬서 블록레벨 요소의 비율을 유지할 수 있도록 한다.
aspect-ratio: 16 / 9 : // 비율을 유지하는 블록 레벨 요소를 만듦
// min-height가 내부 콘텐츠 높이만큼 강제 (auto가 그렇게 계산됨)
min-height: 0; // auto가 아닌 값으로 만들어서 내부 콘텐츠 높이와 관계없이 aspect-ratio가 유지되게 함over-flow
자식요소가 부모요소에 영향 줄 수 없게 격리시키는 것
➡️ 자식 요소의 높이가 커져도 스크롤로 표시되고 부모요소의 높이가 늘어나지 않음
// min-height가 컨트롤하는 것 말고, overflow 속성을 이용해서도
자식요소가 부모요소의 높이에 영향을 끼치는 것을 막을 수 있음
overflow: hidden;💡
aspect-ratio와over-flow를 이용하여 자식요소의 높이를 제한할 수 있다. (부모요소에서)
object-fit
object-fit: cover
.header-image {
width: 100%; // 그 어떤 이미지가 들어가더라도, 안정적으로 16 / 9 비율로 강제되도록 하기 위함
height: 100%; // 비율이 원본 이미지의 비율과 다르므로 강제한 비율 --> 찌그러진다
object-fit: cover; // background-size:cover 처럼 동작
}object-fit: contain
object-fit: cover
// background-size:cover처럼 동작
object-fit: contain
// background-size: contain처럼 동작
// 컨테이너 기준으로 해당 이미지를 무조건 포함하게끔 연출
❗️ 비율은 유지! & 사이즈는 조정그라데이션 (가상요소)
이 부분을 지정하는데에 참 애를 먹었는데 처음에 나는 헤더 이미지에 그라데이션을 줄 수 있을거라는 생각을 못하고 Incredible이라는 h1 태그에 스타일링을 해야된다고 생각해서 어려움을 겪었다.
하지만 가상요소(::after)를 사용하면 쉽게 그라데이션 지정이 가능하다. 여기서도 내가 헷갈렸던 점이 있었는데
header {
**position: relative;**
}
.header-image {
}
.header::after {
content: " ";
**position: absolute;**
left: 0;
right: 0;
bottom: 0;
height: 30%;
background-image: linear-gradient(
to bottom,
rgba(17, 17, 17, 0) 0%,
rgba(17, 17, 17, 1) 100%
);
}이렇게 div 요소에 가상요소를 적용해야하는데 나는 .header-img에 가상요소를 추가해서 계속 적용이 안되는 오류가 생겼었다.
💡 가상요소
일반적으로 컨텐츠를 담는 블록 요소 또는 인라인 요소에 사용
부모 요소의 레이아웃 및 스타일에 종속
❗️ 이미지(img)는 자식 요소를 가질 수 없는 자체적인 콘텐츠 요소이므로 가상요소 사용이 안됨
➡️ 가상요소는 이미지 자체가 아닌, 이미지가 포함된 컨테이너 요소에 적용해야 함
++ 영어 문장에서 띄어쓰기가 없으면 줄바꿈 진행되지 x
br
원하는 곳에 br태그 넣어서 보기 쉽게 줄바꿈을 할 수 있지만 이 방법을 사용하면 창을 바꾸면 줄 바꿈이 되는 곳의 위치가 달라져서 어색하게 보일 수가 있다.
➡️ 되도록 br 작성 안하는 것이 좋음
✔️ before
<p>
"은퇴 후의 슈퍼히어로 가족"이라는 독특한 소재를 다루어 </br>
일반인처럼 살아가야 하는 그들의 고뇌와 함께 역경을 딛고 다시금 </br>
슈퍼히어로와, 일반 시민으로서도 재기해내는 모습을 담아냈다.
</p>✔️ after
<p>
"은퇴 후의 슈퍼히어로 가족"이라는 독특한 소재를 다루어
</p>
<p>
일반인처럼 살아가야 하는 그들의 고뇌와 함께 역경을 딛고 다시금
</p>
<p>
슈퍼히어로와, 일반 시민으로서도 재기해내는 모습을 담아냈다.
</p>Typography
:root {
word-break: keep-all // 한글의 어절이 유지되게 함
overflow-wrap: break-word; // 한글의 어절이 너무 길 때 (컨테이너의 너비를 넘어갈 때)
}rating
-
html 마크업으로 진행하면 안된다! ➡️
background-image로 진행 -
템플릿을 만드는 개념이므로 별점 3점을 만드는 것을 만드는 것이 목표가 아니라 0점부터 5점까지 실제 데이터를 받아와 표시되도록 만들어야 함
내가 만들어야 하는 페이지는 이렇게 생겼는데 내가 받은 img는 밑에와 같은 형식이다. 이럴 때는 잘라서 쓰는 것이 절대~ 아니고 코드를 짜서 조정하는 것이다.
1 vs 1em (line-height)
.description p {
line-height: 1.6;
margin-bottom: 1.6em;
}
line-heihgt: 1em은 현재 폰트사이즈 기준으로 계산되는 값이다. 1em이 있는 곳 (부모)에서 값이 계산되어 (line-heihgt: 20px) 그대로 자식에게 상속된다.
➡️ 자식의 line-height: 20px
현재 폰트 사이즈에 정확하게 사용되는 값일 때
상속이 되는 곳에서 계산된다고 생각하면 된다. 부모에게서는 line-height: 1이므로 20px이고 자식은 line-height값이 상속되어 line-height를 받아 자신의 공간에서 계산하여 line-height: 10px이 된다.
➡️ 자식의 line-height: 10px
자식에 font-size 지정이 안되어있다면 부모요소에서 가져온 다음 1em(100%), 자식에 font-size가 지정이 되어있다면 자식 요소 크기 사용
한글 사용 시 어절
word-break, overflow-wrap 한글을 사용하는 경우 어절의 줄바꿈이 어색하지 않도록 이 두개를 같이 작성한다.
:root {
word-break: keep-all // 한글의 어절이 유지되게함
overflow-wrap: break-word;
// 한글의 한 어절이 너무나 커서, 컨테이너를 넘어가면 break-word 한다.
}