zigzag 리뷰
▼ 기본 레이아웃 덩어리를 만드는 첫 번째 단계 (클래스 이름이 그 다음으로 제일 중요!!!!!!!!!!!!!!!!!!)
▼ 독립적인 틀인지 종속적인 틀인지 확인해보자
아직 내부에 뭐가 들어갈지 신경 쓰지 않는다
그런다음 section의 세부 구성을 한다.
▼ 배경색은 둘 다 서로 다르는걸 알기에 클래스명을 각각 purple과 white를 지정했다.
▼ 상단 제목 부분의 레이아웃 덩어리는 3개로 파악 할 수있다.
▼ 섹션 헤더에 div 덩어리 3개 있다고 볼 수있다.
▼ 하지만 이 방법보다는 title, description, controls를 한번 더 감싸주고 section과 별개인
아예 새로운 컴포넌트로 지정하여 작성해준다.
section header에서 flexbox 제거해주고
그 어떤 콘텐츠도 담을 수있는 확장성을 위해 , 그래고 하위에 section과 전혀 관계없는 별도 소속의 title을 만든다.
title로 새로운 컴포넌트가 시작되니, 클래스 구성이 좀 더 직관적이 되었다.
즉 의도적으로 section-header와 명확히 구분되는 새로운 컴포넌트로 나눈 것
title의 다시 내부구성을 다시 설정한다.
마크업이 복잡해질 수 있지만 좀 더 직관적이기 때문에 이러한 방법을 선호할 필요가 있다.
.section의 역할을 제한
1. 간격 100px 부여
2. 배경색 테마
3.title,description,controls의 종속( section header title과 독립적인 시각적 컴포넌트 )
▼ title의 사이즈 및 간격 조절
title을 flex 설정하여 가로배치하고
basis를 사용해 flex 아이템의 내부 타이틀 텍스트 만큼 너비가 조정되게 기본 크기를 자동으로 설정한다.
많은 텍스트가 추가될 가능성이 있으므로 가장 넓은 영역으로 잡고 커질 수 있는 크기 제한을 걸기 위해
p요소 grow를 1로 정하여 가득 채워 최대 넓이를 582px로 지정하고
controls를 오른쪽 정렬 margin-left auto를 지정해준다.
필요에 의하여 위쪽 title controls와 아래쪽 description 내용은 각각 뺴준다.
▼ 폰트 설정 후 색상과 사이즈 설정해주기 (root의 폰트 사이즈 기준 (rem)으로 설정가능하다.)
또한 각 title마다 내용물을 추가하여 basis가 잘 잘동하는지 확인하였다.
▼ 줄바꿈을 해결하기위해 <br>을 사용해준다
br 요소는 문단에 적합하지 않고 선호하지 않는 요소라고 설명 해준적이 있다.
하지만 줄 바꿈의 의도가 명확하기 보이기 때문에(?) br 요소를 사용한 것.
▼ hedings의 최소 사이즈 설정을 위해 피그마 시안을 확인하여
min-width 280px 적용하여 280px보다 더 작아지지는 않게 리미트 설정하고
줄높이는 피그마상에서 44px 이지만 기본적으로 폰트사이즈에 유동적인게 일반적이므로 1.1 지정
▼ 폰트 색상과 사이즈의 전역변수 설정해주기 (root의 폰트 사이즈 기준 (rem)으로 설정가능하다.)
▼ 우선 (body의 폰트사이즈) 웹사이트 전반에 걸친 기본 폰트사이즈를 14px로 설정해준다.
■ 첫번째 title 제작하기
▼ title의 p 요소 내용 추가 + 수도클래스
하위요소를 flex items로 지정하기위해 상위요소에 flex 설정하고 사이간격과 중앙정렬을 해준다.
가상요소는 하위요소로 생성하며 flex items로 지정되었다.
또한 shrink 초기값은 1, 그러므로 오른쪽 텍스트에 의해 width 90px이 유지되지 못하고
수축 될수있기에 0으로 지정하여 언제나 90px이 보장되게 하였다. (width나 shrink는 언제나 유동성이있는 값)
▼ title 글씨 뒤 강조 표시를 strong 마크업으로 적용해준다.
가상요소를 사용하지 않고 간단하게 box-shadow를 적용해서 표현 할 수있다.
▷ 첫번째 title 완성
■ 첫번째 section-contents 구성
▼ ul li를 사용하여 구성
ul li사용을 위해 초기화 작업을 하고 l_gap_row 는 오로지 panelitems들의 사이간격을 벌리기위한 gap 설정 전용이다.
레이아웃 구성에 작성하여 gap을 적용해준다.
또한 안정성을 추가해 그리드 아이템들을 columns minmax속성 적용해준다.
즉 min-width auto 문제를 컨테이너 관점에서 미리 해결해줌
▼ 각 패널 아이템들은 2개로 구성되어있는 것을 볼수있다.
▼ cover는 고정, contents는 가변인 것을 확인 할 수있다.
cover에는 고정너비 280px contents 가변이므로 grow 1 지정
▼ 내용을 추가해보면 고정으로 잡혀야하는 패널 커버가 사이즈가 작아지는 것을 확인 할 수있다.
고정값을 지정해줬지만 flex shrink (수축) 가능성이 있기에 기본값 1에서 0으로 설정해주거나
또는 패널 컨텐츠에 텍스트가 늘어나면 가지고있는 비중이 커지고 (물풍선처럼) 사이즈의 변화가 있기에
flex basis 값을 지정해준다. 초기값을 auto (내부 콘텐츠 기준)에서 0을 지정해준다
즉 컨텐츠와 관계없이 사이즈가 grow-row만 측정이 되는 것이며 컨텐츠를 압박하지 않는다.
예전 공부에서 basis와 함께 썼던 것이 min-width:0 이였다는 것을 기억했다면 (님은천재) 같이 적용해준다.
그러므로 min-width와 basis auto도 280px로도 계산된다.
▷ 정리
◎ basis는 내부 콘텐츠 크기(너비)와 관계없이 조정된다.
◎ grow는 basis 0이므로 grow비율만으로 너비 조정되었다.
◎ min-width auto가 내부 콘텐츠 크기로 min-width가 강제됨으로써 auto가아닌 0인 값을 지정한 것이다.
▷ 위 코드처럼 조합된 코드들을 외우면 안된다 이해하려고 노력해야한다
마치 ' 중앙정렬하려면 margin 0 auto 써야지! ' 가아니라
' 아 양쪽 마진을 여백화했구나' 라는것을 구체적으로 알고있어야 응용이 되고 공부가 된다.
▼ 이미지 cover는 contents 내용에따라 늘어나야하는게 맞다.
목록이 3개로만 끝나는 것이 아니라 늘어날 수박에없다. 그렇다면 이미지도 늘어나는게 맞는것
결국 전체높이는 contents 내용에 의해 늘어나므로 cover 이미지는 contents를 따라가야한다.
컨텐츠 내용을 먼저 추가해보고
▼ 패널 컨텐츠의 스타일링
▼ list의 구성 및 점을 만들어보기
li의 초기화로인해 새롭게 만들기 위해 가상요소를 생성하여 점을 만들어보기위해
너비 높이를 지정하기위해 display inline-block을 설정해준다.
또한 li의 상단 여백을 설정하여 간격을 벌려준다.
▼ 하지만 화면을 줄일때 이미지처럼 줄바꿈식이 일정하지않다. align이 일정하게 되게 하기위해서 방법이 필요하다.
방법이 두가지가 있는데 첫번째 방법은 flex를 적용해준다.
li에게 display flex 와 align center를 적용해주면 점이 작아지는 현상이 생긴다..
그렇다면 flex-shrink 0을 적용하여 점이 작아지지 않게 가능하다.
두번째 방법은 네거티브 마진 이다.
가상요소에서 점 왼쪽마진은 -24px주고, 전체 list 패딩 왼쪽을 24px 지정하면 flex 사용하지않고 적용 가능하다.
즉 점의 with + 점 오른쪽에 margin-right 값을 여유 공간으로 만들고
점의 width + margin-right 만큼 왼쪽으로 이동시켰다.
▼ 또한 list의 점이 언제든 유동적으로 변환이 가능할수 있게
type_square라는 두번째 클래스를 추가하여 하나의 옵션으로 만들어 점의 모양을 바꿔준다.
▼ 커버 이미지 넣고 이미지 기본스타일 초기화 - max-width 100% 설정
▼ 이미지 .panel-contents-bg 클래스에 포지션 속성을 넣어 글씨가 배경앞으로 오게하기위해 absolute 적용하고
부모클래스에 relative 적용한다. 컨테이닝 블록 기준으로 무조건 가득채우게 너비와 높이를 100%로 설정하고
이미지의 비율 유지위해 object-fit: conver 적용하고 이미지를 맨뒤로 보내기위해 z-index를 적용해준다.
스태킹 컨텍스트에서 가장 맨뒤에 위치하고 패널에 z-index auto가 아닌 값을 넣어
새로운 스태킹 컨텍스트가 되게 적용 하여 글씨가 앞으로 오게 만들었다.
▼ 패널의 문장을 이미지 기준 가운데 정렬을 하기위해 플렉스 아이템을 만들어 flex 설정하고
하위 텍스트 가로 세로 중앙 정렬을 한다.
부모가 플랙스 아이템이므로 높이 100%를 줘서 부모높이를 받아온것이기에 딱 맞게 적용 되었다.
▼ 화면을 줄일때 내부 콘텐츠가 있는 상태에서 커버 이미지와 비율이 맞으려면
미디어쿼리를 이용하는 방법도 있지만 contents에 basis를 auto를 주면 재각각 너비가 되므로 고정값을 준다
시각화를 제대로 보기위해 직접 적용해서 차이점을 보자
고정값을 500px 임의의 설정값으로 동작을 변경시켜 창 크기가 작아졌을때 적절한 시기에
커버와 280px width값을 shrink1에 수축 시킬 수있다.
flex-basis와 min-width를 지정하는 방법도있고 width 500px과 flex-grow 1을 적용해도 가능하다
(basis 500px = width 500px)
▼ 패널의 짝수 마크업을 반대로 적용하기위해 row reverse를 적용해준다.
▼ 미디어쿼리를 이용하여 반응형 적용해주기
display block을 설정하여 flexbox 해제하고 중앙정렬 코드를 작성해준다.
패널도 똑같이 중앙정렬해준다
▷ 상단 레이아웃 완성
■ 두번째 title 구성
▼ 글자색이 부모 색을 따라오게 적용하고 tite에 적용되는 오랜지색을 전역변수로 설정하여
오랜지 색을 사용하는 구간들에 각각 함수를 적용해준다.
▼ 또한 title의 테마를 각각 white와 purple을 만들어 title 클래스에 각각 추가해준다.
▲ 굳이 왜 따로 했냐면 section을 종속적으로 하지 않았으며 즉 section과 title이라고 아예 따로 나눴기 때문이다
(어차피 선택의 문제..)
▼ title의 버튼은 실제 마크업이 <button>이기에 div를 사용하지말고
우선 초기화 작업 후 스타일링 해준다.
▼ 또한 버튼의 상하단 마진을 적용하여 화면이 작아졌을때의 간격을 벌려준다.
■ 두번째 section-contents 구성
▼ 예시만 봐도 그리드를 사용해볼수있을 것 같고 ul li로 처리 할수있을 것이다.
클래스명 구성하고 카드 디자인 시작
▼ 전체 그리드를 지정하여 auto -fit으로 320px에 맞게 자동 줄바꿈되게 해주고 전체사이즈 1ft로 가득차게 설정해준다.
▼ card의 레이아웃은 3개로 나눠볼수있다
▼ 내용이들어가는 card-main에는 컨텐츠 양이 얼마가 있던간에 유연해야한다.
flex 방향을 column을 적용하였기에 저 빈 공간은 가용 공간이 되는 것!
이 가용공간을 메인이 최대치로 가져다 쓸수있게 하는 컨셉이다.
▼ 마크업 이미지 추가 하고 card-main내부는 3개의 덩어리로 나눠질수있다.
▼ 카드 메인 내부 h2와 p 스타일링 (피그마의 dev모드 적절히 사용!)
▼ tag는 클릭가능한 요소이기에 마크업을 a 요소로 사용해주고 inline으로 해도되지만
flexbox를 사용해보기로 한다.
a요소 기본스타일 초기화 깔끔하게 해주고 flex 적용하고 줄바꿈 방지 wrap 적용해주고 스타일링해준다.
▼ 푸터 레이아웃의 중간에 줄은 가상요소보단 border-top을 적용해도 무방하다
텍스트와 함께 스타일링 작업.
사람 아이콘을 넣어주기위해 people 클래스를 추가해주고 스타일링 작업.
flexbox사용해주고 오른쪽 정렬하기위해 margin-left 적용하고 네거티브 마진 사용해준다.
▼ 미적용된 나머지 card도 코드 적용해주면 완성
▼ sold out 띠 이미지를 적용해주기위해 두번째 카드에 is_soldout 클래스를 하나 추가했다.
position 속성과 가상요소를 사용해 추가해준다.
absolute를 적용하여 이미지의 뷰포트 기준으로 설정해주고 부모요소에게 relative도 적용해준다.
이후 위치 조정하여 왼쪽상단에 이미지가 들어가게 잘 적용해준다.
■ IR 기법 - image replacement
CSS IR기법(Image Replacement) 은 시각적으로는 이미지를 표시하되, 텍스트 콘텐츠를 제공하는 방법이다
이는 시각적인 결과물을 중시함과 동시에, 웹 접근성을 높이고 검색엔진 최적화를 개선하기 위해 사용된다.
◎ 웹 접근성 측면: 이미지가 로드되지 않는 경우나, 스크린 리더 등 웹 접근성 도구를 사용하는 사용자를 위해
텍스트 콘텐츠를 제공하는 것.
◎ 검색엔진 최적화 측면: 검색엔진은 이미지 자체만으로 100% 정확한 의미를 파악하기 어려움.
<span class="ir">시각적으로는 숨기고 싶은 텍스트 콘텐츠</span>
.ir {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
▼ 즉 ir기법을 을 이런식으로 도구처럼 활용가능하다.
'BootCamp Review' 카테고리의 다른 글
| 2024.09.04 (Day 3) -JavaScript Basic II (0) | 2024.09.04 |
|---|---|
| 2024.09.03 (Day 2) -JavaScript Basic I (0) | 2024.09.03 |
| 2024.08.23 (Day 18) - HTML/CSS [Forms(Form, Input, Textarea, Button) II ] (0) | 2024.08.29 |
| 024.08.22 (Day 17) - HTML/CSS [Forms(Form, Input, Textarea, Button) I ] (0) | 2024.08.23 |
| 2024.08.21 (Day 16) - HTML/CSS [ CSS Animation: transform, transition, animation] (0) | 2024.08.22 |