INCREDIBLE 인크레더블 예제
CSS Typography 섹션 관리font-size, font-family, line-height
font-family설정과 구글 웹폰트 적용
em과 rem
line-height 일괄 적용
◆ (day13/incredible)
▼ 레이아웃 구성
클래스명을 구성할때 l_wrapper와 그냥 wrapper의 차이는 공공재이냐 아니냐 그 차이다.
그 점을 인지하고 작명하자
▼ width auto와 max-width는 완전 별개이다.
▼ article ? section?
section 태그는 섹션(부분, 구역, 영역) 들을 그룹화 해서 분리하는 역할을 한다.
article 태그는 문서내에서 그룹화해서 분리하는 역할을 한다.
▷ article - 내용이 독립적이다.
article 태그는 section과 다르게 독립적으로 존재할 수 있으며 재사용 할 수 있다.
즉 article이 좀 더 구체적이다.
주로 블로그글, 포럼, 뉴스 기사 등을 article로 묶음
▷ section - 주제별로 구분한 그룹이다.
논리적으로 관계있는 요소 또는 문서를 분리할 때 사용한다.
다른 주제의 문서를 구분 짓기위해 사용 (주제별 영역들을 그룹화)
※ 논리적인 관계가 없는 요소들을 그룹화 할 경우에는 div를 사용한다.
▼ 배경설정
▼ :root 전역 변수를 사용하여 색상 만들기 (CSS Typography 섹션 관리)
▷ rgb 전역변수 사용법
▼ 두개의 레이아웃 잡고 시작
<main> 마크업은 전체 큰 덩어리를 담당하는 걸로 쓰기에 중요도가 높다
그러기에 신중히 사용해야 한다.
▼ 커버 이미지를 마크업으로 구성하고 이미지를 랜더링하지 않아도 미리 비율을 잡기위해 aspect-ratio 사용
(참고 - https://claude.site/artifacts/d0e2f904-5326-4d18-9bcc-8b24ffd4bf61)
▼ 고정높이가 아니기에 컨텐츠가 추가되면 언제든지 늘어날 수도 있다.
자식요소가 부모의 높이에 영향을 끼치지 않게 하기 위해 최소높이를 0으로 초기화한다.
▼ 또는, 앞서 배운 overflow hidden을 적용하면 min-height 컨트롤 하는것 말고
overflow 속성을 이용함으로서도 자식요소가 부모요소에 영향을 끼치는 것을 막을 수있다
▼ 이미지 사이즈 조절
▷ object-fit의 이해
object-fit 속성은 <img>나 <video> 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해
요소에 맞출 것인지 지정한다. (background-size 와 비슷한 결과를 가짐)
▽ fill
요소 콘텐츠 박스 크기에 맞춰 대체 콘텐츠의 크기를 조절한다.
콘텐츠가 콘텐츠 박스를 가득 채운다.
서로의 가로세로비가 일치하지 않으면 콘텐츠가 늘어난다.
▽ contain
대체 콘텐츠의 가로세로비를 유지하면서, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절한다.
콘텐츠가 콘텐츠 박스 크기에 맞도록 하면서도 가로세로비를 유지하게 되므로,
서로의 가로세로비가 일치하지 않으면 객체가 "레터박스"처럼 된다.
▽ cover
대체 콘텐츠의 가로세로비를 유지하면서, 요소 콘텐츠 박스를 가득 채운다.
서로의 가로세로비가 일치하지 않으면 객체 일부가 잘려나간다.
▽ none
콘텐츠의 크기를 조절하지 않는다.
▼ mask-image
포토샵에서 클리핑 마스크를 사용했던 것처럼 css에서이미지 편집을 하지 않아도
포토샵의 클리핑 마스크와 같은 효과를 낼 수 있다.
mask-image는 이미지 파일이나 그라디언트를 활용해 사용할 수 있다.
▼ 하지만 우리는 전문가가아니기에 연습하기위해 가상요소 추가해서 해보겠다..
상위 요소의 컨테이닝 블록(article-cover)을 기준으로 절대 위치 배치되어야 하므로
가장 가까운 상위요소의 새로운 컨테이닝 블록을 생성한다.
▼ 가상요소 위치를 조정해주고 높이를 반응형으로 잘 보여지게끔 %로 설정한다
▼ 그라디언트 적용 - https://www.colorzilla.com/gradient-editor/
▼ rgb 전역변수적용하여 코드 간편화 및 유지보수 대비
상단 완성
▼ main contents 작업
▼ 피그마상 padding 적용
▼ 컨텐츠는 양이 늘어날 수도있고 사이드바는 내용 변함이 없으니 가변과 고정을 파악하고 코드 작성해야한다.
▼ 사이드바의 고정값을 주고
grow를 추가하여 가용공간의 크기를 자신의 너비로 가져가게 하고 (초기값 0)
basis값은 내부 텍스트 너비는 버리고 grow로만 너비 책정 가능하게 함 (초기값 auto)
gap으로 사이간격 조절
▼ 문장이 지나치게 길거나 이미지가 줄바꿈이 안될때 되게끔 설정하기위해
이미지가 최대로 커길 수 있는 너비를 제한하기위해 (컨테이닝 블록의 너비로) max-width 100%를 지정하고
문장또는 컨텐츠가 내부 콘텐츠 너비에 의해 해당 요소 (부모)의 너비가 결정되지 않게 하기 위해 0으로 재설정
See the Pen Flex Items와 min-width: 0 지정하기 by VEAMCAMP (@veamcamp) on CodePen.
▲ 부모콘텐츠가 내부콘텐츠 너비에 따라 달라지지 않게끔 일단 한거고,
내부콘텐츠 자체를 조절하는 건 이미지의 경우 max-width: 100%로 하고 텍스트의 경우 줄바꿈 등으로 하는 것
▼ flex-wrap 속성을 사용하지 않으면 기본값 즉, flex-wrap:nowrap; 이 적용되므로,
이 정렬된 (나열된) 요소들의 넓이는 부모 넓이에 맞게 모두 자동 축소 또는 확장 되게한다
하지만 wrap이 늦게 적용되므로(화면 크기를 줄일때) basis값을 지정해준다
basis 값 기준으로 flex-wrap이 동작된다. (300px만큼 줄어들어 자동 줄바꿈되게)
▼ 네거티브 마진을 윗박스에 마진 바텀을 준다.
position reative가 이미 적용한 상태에서
article-cover를 뒤따라오는 main이 cover를 덮을 수 있도록 네거티브 마진을 -40px 적용
▼ 하지만 커버거 맨위로 메인을 덮혀진다
이것은 나중에 작성된 마크업이 먼저 나오므로 z-index를 적용해준다.
스태킹 컨텍스트 상위요소 article 기준으로 -1
▼ article를 새로운 스태킹 컨텍스트를 만들고 (z-index)
z-index는 단독으로 동작되지않으므로 static이 아닌 값이 들어가야하므로 relative 적용
▼하단 마진을 컨테이닝 블록 너비 기준으로 설정(%)하여 작업의 안정성을 높인다.
창을 늘렸다가 줄여보면 차이가 보인다.
▼ 내부 컨텐츠 구성하기위해 article-main의 마크업 작성
▼ 각 추가한 마크업들 폰트 설정하고 초기화진행
▼ title 스타일 적용 및 new 배지 작업
▼ p문단 스타일 작업
p와 p사이의 문단과 문단 사이의 간격은 한 줄이기 때문에 폰트 크기에 종속 되어야한다.
그러면 한 줄의 높이는 line height이므로 실질적인 수치로 입력하기 위해 1.6으로 적용
그렇게 되면 하단 마진도 1.6 em단위로 적용 후 최종 문단 하단은 마진 x
▷ 한글 관련 유용한 Typography
word-break
overflow-wrap
■ font-family 설정과 구글 웹폰트 적용
▼ 폰트 설정할 떄 폰트css 파일 자체를 만들어서 불러오는 작업을 한다
(로컬네트워크 폰트 불러오기 설정 또는 구글에서 불러오기 설정)
▼ 폰트는 지정해주지 않으면 시스템에서 가져온다
▼원하는 폰트를 가져오기위해 https://fonts.google.com/ 접속
▼ 오른쪽 하단에 폰트 가져오기 클릭 하고 get embed code 클릭
▼ html 파일 상단 link 자리에 복붙하고 루트와 p요소에 폰트 작업
■ line-height 일괄 적용
▼ line-height는 특별히 지정하지 않아도,
normal값 자체가 폰트 디자이너의 의도를 잘 표현하는 값이기 때문에 문제가 없다.
하지만 실제 작업 단계에서는, 하나의 웹사이트에서 여러개의 폰트를 같이 사용하기 때문에
일반적으로, 관리의 효용성을 위해서 :root 요소에 일괄 적용 한다.
폰트사이즈는 동일하지만, 기본으로 제공되는 line-height가 다르니
한 베이스라인에 두개의 각기 다른 폰트가 배치 되게 된다면 해당 요소의 높이가
어떻게 책정되는지 직관적인 파악이 어렵게 되기 때문이다.
전체 시스템의 줄 높이가 1.6으로 잡혔기 때문에 이후
다른 요소들의 줄 높이가 개별적인 조절이 필요할 경우가 있으므로 컨트롤 및 체크해줘야한다.
■ rem 단위
▼ 최상위 루트의 폰트 설정 기준
:root에 폰트 사이즈를 설정 하는 것은 전체 사이트의 폰트 사이즈를 결정해주기 위함이아니라
'전체 폰트 사이즈 설정의 기준 값' 을 정해주는 것이다.
그렇다면 rem 단위로 폰트 사이즈를 설정하게 된다면
:root 기준 폰트 사이즈에서 1.4배로 설정 하는 것
결국 접근성 때문에 , 즉 옵션을 만들어서 컨트롤을 하기 위해 적용 한 것이다.
웹 브라우저에는 사용자가 직접 기본 폰트 크기를 설정할 수 있는 설정 메뉴가 존재한다.
이 부분의 "글꼴 크기" 설정을 바꾼적이 없다면 16px로 셋팅 되어있을 것이며
사용자는 자신의 상황에 맞게 기본 폰트사이즈를 조절 할 수 있다.
이러한 기본 폰트사이즈의 변경에 맞춰, 전체 웹사이트의 폰트사이즈가 변경되는것이
웹 접근성 차원에서 권장된다.
하지만, 앞서 이야기한 :root { font-size: 10px; } 지정은
이러한 사용자의 기본 폰트사이즈 설정과 관계없이 무조건 10px로 강제된다.
즉, 브라우저는 웹 접근성 차원에서 옵션을 제공하였지만,
웹 개발자가 이러한 옵션을 의도적으로 비활성화 시킨 것이다.
이 문제를 대응하기 위해 font-size: 62.5% 지정을 하기도 한다.
rem단위에서 활용하기 쉬운 10px을 만들어 내면서도 고정값이 아닌 상대적인 %단위를 사용한 것이다.
이제 사용자가 16px에서 기본 폰트사이즈를 키운다면
1.4rem의 최종 계산값은 브라우저의 기본 폰트사이즈 조정에 비례하여 커질 수 있게 된다.
■ 사이드바 스타일 작업(템플릿)
■ 사이드바 스타일 작업(genre)
▼ 각 a링크를 적용하여 클래스 tag 사용하고 스타일 작업
■ 사이드바 스타일 작업 (ratings)
▼ 가상요소 사용 하고 최종적으로 background position 사용하여 너비 크기마다 별 조정
이 별점을 보는 순간,
우리는 별점 3점을 고정으로 만드는게아닌 템플릿을 만드는 입장이므로
실질적인 데이터를 기반으로 별점이 표시되는 작업을 해야한다는 생각을 가져야한다.
HTML 마크업으로 시각적인 효과를 주어서는 안된다 우리는 템플릿을 만드는 입장이다.
(딱 3점을 만들라는 것이 아님)
▼ 별점은 0점으로 시작한다 (width:0 상태로 작업)
▼ 별점추가할때 클래스 기반이 아닌 커스텀 어트리뷰트 방식으로 적용 가능하다
▷ 속성 셀렉터 기법
■ 사이드바 스타일 작업(casts)
<img> 태그의 alt 속성은 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시한다.
이러한 alt 속성은 사용자가 느린 네트워크 환경이나 src 속성값의 오류, 시각 장애인용 스크린 리더의 사용 등
어떤 이유로든 사용자가 이미지를 볼 수 없을 때 이미지 대신 제공할 대체 정보를 제공한다.
▼ 네거티브 마진 사용하여 스타일 작성
▼ title 속성도 사용하여 마우스 호버 하면 추가적인 정보를 줄 수도 있다.
■ 비디오 넣어보기
RESULT
See the Pen Untitled by 윤형섭 (@mixrecgm-the-encoder) on CodePen.
'BootCamp Review' 카테고리의 다른 글
| 2024.08.19, 20 (Day 14~15) - HTML/CSS [grid 그리드 레이아웃 II] (0) | 2024.08.20 |
|---|---|
| 2024.08.19 (Day 14) - HTML/CSS [grid 그리드 레이아웃 I] (0) | 2024.08.20 |
| 2024.08.13~14 (Day 11,12) - HTML/CSS [Position] (0) | 2024.08.18 |
| 2024.08.12 (Day 10) - HTML/CSS [Flexbox III] (0) | 2024.08.18 |
| 2024.08.08 (Day 9) - HTML/CSS [Flexbox II] (0) | 2024.08.18 |