flex-direction의 다양한 활용
디바이스 툴바의 사용
메타 요소 viewport
커스텀 프로퍼티의 활용
말줄임표
텍스트 줄바꿈 제어
line-height
flex 공부 하는 사이트 - https://flexboxfroggy.com/#ko
◆ (day10/flex-direction/frog)
forg 요소가 3개일때 display flex 하면 왼쪽부터 flex 정렬된다.
flex-basis auto를 사용하여 아이템의 기본크기를 설정하고
auto 해줌으로써 아이템 자신의 width 또는 height 속성의 값을 사용한다.
또한 가용 공간을 활용 하는 기법이 2가지가 있었다.
여백으로 쓰거나 너비로 쓰거나..
여백화는 클래스 frog 옆에 클래스 추가해서 가용 공간을 활요한다.
다른 방법으로 flex-grow를 사용하여 flex-item의 basis에 남은 가용공간의 값을 합친 만큼의 넓이를 활용한다.
basis를 내부 컨텐츠와 관계없이 고정픽셀이나 0으로하고 grow로 사이즈를 측정되게 함으로써
내부 컨텐츠 양과 관계없이 크기가 일정하게 적용된다.
모든 frog에 widh 100% 설정 = basis, grow
flex아이템 3개이므로 3개다 100%으로 커지는 게아닌 다 같은 크기로 shrink로 수축된다.
그렇기 떄문에 3등분으로 보이는 것
이미지로 바꿀경우 basis 값을 200으로 설정할경우 다 크기가 맞지 않으니 shrink로 수축시킨다
요소를 계속 추가하다보면 어느순간에 shrink가 동작 되지않고 컨텐츠의 최소한의 크기 때문에 빠져나간다.
width 100퍼 기준으로 맞춰주거나 최소 너비(min-width)를0 으로 적용해주거나 overflow:hidden으로설정해준다,
overflow는 넘쳐흐르는 요소를 어떻게 할 것인지 정해준다.
flex-wrap을 사용하면 공간이 모자를때 주줄 바꿈 시켜준다. shrink는 적용되지 않는다.
이상태에서 flex-grow를 적용해주면 각각 가용 공간을 차지해준다.
여기서 flex 관련 단축 속성이 두가지가 있다.
가용공간이 부족할때 부모에게 justify-content를 사용하는 방법도 있다.
가용공간이 없을때 메인축 기준으로 내부 요소를 정리 할 수있는 기능이 있다.
만약 텍스트가 적혀있는 이미지를 playground 밑마닥 기준으로 딱 맞추고 싶을때 align-self를 사용한다.
row-reverse는 축 방향이 바뀌는 속성이다.
cloum으로 바뀌게되면 두 축이 서로 바뀐다.
자체적으로 align-items가 stretch가 되어있고
justify-content가 center 일때 메인 기준으로 적용되므로 축이 즉 세로 기준 정렬이다.
그렇기에 두 속성을 작성해도 차이가 없는 것으로 보여진다.
높이를 결정하는 속성은 flex-basis이다. 기존 너비를 담당하였지만 높이를 담당하게 된다.
역시 또한 basis값이 auto이고 grow로 늘려주면 세로기준으로 늘어난다.
basis가 0인데 컨텐츠 양을 늘리면 요소가 늘어나는 이유가 min-height내부 컨텐츠 만큼으로 (높이) 잡힌것
즉 min-height 가 basis 0을 막고있기 때문이다.
overflow 초기값이 visible인데 스크롤이 생긴게 컨텐츠양때문에 스크롤이 생긴거라 보면 되는것
이토록 방향만 바뀌었지 속성들의 특징이 바뀐것은 없다.
이미지가 요소를 벗어날때?
부모에게 align-items:center가 있을때 두번째 요소에 이미지를 추가하면 playground의 요소가 정해진 이미지 크기보다
벗어날 경우
align-self를 stratch 적용하여 정렬 위치를 조정해주었다.
flex-start는 시작점을 바꿔주는 것이므로 햇갈리지 말자
◆ (day10/flex-direction/buckts)
buckets 예제를 했었을때 마진으로
적용하는 부분과 차지하는 부분이 서로 직관적이지 않다.
마진적용된 해당요소는 차지하는 요소가 보여지는것과 사뭇다르게 나오고 있다.
그래서 서로 띄우기위해 해당 방법으로 마진을 적용해 사용했지만
flex column을 사용하여 갭을 넓히면 마진 적용한거와 같이 똑같이 적용 되는 것을 확인 해 볼 수있다.
◆ (day10/flex-direction/cover)
커버의 높이 400px을 적용한 상태에서 이미지와 p요소를 중앙 정렬 하기위해 flex column를 사용해보자
display flex하면 자동적으로 strach가 되므로 (grow가아님) 늘어난 것을 볼 수가있다.
direction cloumn하면 마찬가지로 strach 때문이다.
만약 이미지가 추가될경우 이미지와 커버를 다시 재정렬 한다.
이제 상하단 패딩으로 중앙정렬 할 필요없다!
◆ (day10/flex-direction/insideout)
해당 요소들을 display flex 정렬 하고
내부 컨텐츠가 늘어날경우 이미지랑 같이 strach된다.
div로 만들고 그안에 이미지로 만들어서 덩어리를 생성해도되지만
align-items을 center나 flex-strat를 하면 strach를 막는다. (또는 center)
컨텐츠를 늘려 사이공간 확보하기위해 column과 gap을 추가해준다.
이미지를 오른쪽으로 변경하고싶을때 마크업 위치를 바꾸는 것보다
방향을 바꿔서 (direction의 row-reverse) 적용하는게 안정성에 더 좋다.
◆ (day8/veamflex)
주어진 모니터 환경이 각자 다르다보니 화면이 줄을경우 요소들이 일정하지가 않는 경우
.card 높이를 100%주어서 어느 콘텐츠가 생성 되어도 맞춰서 늘어나게 끔 설정
하지만 버튼 밑에 가용공간이 생기므로 버튼 라인이 일치하게끔 적용하기위해
카드에 display:flex 적용하면 하위에 모든 요소들이 strach되므로 column 적용
정리(pdf)
◆ (day10/favorite-foods-m)
https://www.figma.com/design/2j1HGzgvM0oV5oMyhotY0K/My-Favorite-Food/duplicate
- 레이아웃구성 (header)
* 제목부분은 h1 마크업 이미지는 백그라운드로 설정
* flex구성
※주의
▲▼마진병합발생. 사용자 에이전트 스타일 초기화
▼ 헤더의 flex 적용
▼이미지 오른쪽에 가용공간이 생긴걸 볼수있는데
이미지 쪽 마진을 주는 방법도 있으나 h1에 flex-basis와 grow를 설정하여 레이아웃을 잡을 수 있다.
▼ 헤더 디자인 마무리
▼ 또한 창크기를 줄이거나 늘릴때를 대비해 wrapper에 max-width값을 지정해준다. (패딩적용해서 안정성 추가 센스)
width 고정값 대신에 max-width:고정값, 좌우패딩까지 적용
- 레이아웃구성 (contents)
* 그리드 설정
* flex구성
* ul, li 초기화
● 그리드 구성 형태
▼ 그리드 및 초기화 기초작업
▼그리드 마크업을 추가
레이아웃의 작명 - 이미지 관련 특성에 대해 이름을 짓는게 아니다.
▼flex 작업을위해 flex 아이템에게 width %개념을 적용하고 내용을 추가하게되면 줄바꿈이 되질않으므로
row에 wrap로 감싸주고 각 사이를 늘리고 col에 패딩값을 준다.
▼border-box을 사용하여 width 값에 좌우 패딩 값이 포함되게 적용한다.
row에 네거티브 마진 값 까지 적용
l_col에 그리드 시스템 코드를 가져와서 적용해본다.
▼l_row의 사이 간격 늘리는 다른방법
▼창크기 줄였을때 적용 @미디어 쿼리
▼ 준비되어있는 클래스들을 활용해보자
▼ 메타 요소 viewport
크롬은 화면이 최소 500px 까지 줄어드는데 만약 모바일 환경을 480px로 줄이는 작업을 할때,
검사창에서 디바이스 모양클릭하면 조절이 가능하다.
미디어 쿼리 동작하게 하기위해 뷰포트 즉 메타요소를 html에 넣으면 된다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
▼미디어쿼리 모바일 화면상 디자인을 적용하기위해 기존에 있던 인라인형태에서 flex direction으로
텍스트와 이미지를 역방향 시킨다.
■ card 레이아웃 구성
▼음식 이미지 삽입은 다양한 케이스가 있지만
시작적으로 보이는 부분과 마크업을 일치시키는게 제일 효율이 좋다.
▼클래스 작명 및 타이틀 정보 포함 헤더 추가
▼블록레벨 요소인지라 각 요소들의 높이가 다르다.
카드에 높이를 고정값으로 적용해준다.
▼ flex 와 column, grow을 적용해준다.
■ header 구성
▼이미지와 텍스트 요소들을 넣어준다.
음식 이미지는 공간을 차지하는 것이 아닌 전체 배경이미지 처럼 해줘야한다. 그래야 그 위에 글씨를 덮을수 있다.
아니면 마크업으로 이미지 넣고 글씨를 네거티브 마진으로 넣을 수 있기는 하다.
▼상하단 마진 제거를 위해 초기화하고 이미지에 max-width를 적용해
이미지의 컨테이닝 블록 너비 기준으로, 해당 이미지가 커질수 있는 너비의 제약을 부여해준다.
▼ h1에 너비를 fit-content 설정
이후 스타일 작업
▼네거티브 마진을 쓸 수 밖에없는 h1은 무조건 한줄이란 개념이기에 높이를 고정값을 준다.
근데 배경색이 사라지기 때문에 position 이라는 속성을 사용한다. 해당 속성은 다음에
▼ 커스텀 프로퍼티 - :root를 이용한 요소의 색상 지정 point-color
가상클래스를 이용하여 --point-color라는 속성을 사용한다. 전역변수를 생성함으로써 color 속성값을 지정할 수있다.
1. 특성
마크업 구성을 기준으로 한 변수의 유효 범위를 지닌다.
재사용성: 동일한 값을 여러 곳에서 사용 가능하다.
유지 보수: 값 변경 시 모든 관련 요소에서 동시에 반영 가능하다
2.변수 정의
변수명은 반드시 --로 시작 / 대소문자를 구분
:root 가상 클래스는 문서의 최상위 요소인 html요소를 의미하며, 전역 변수로서 활용 할 수 있다.
앞으로 색상 지정할때 유지보수하기 편리한 가상클래스의 전역변수를 사용한 색상을 지정하도록 해야한다.
▼ 만약 h2의 컨텐츠를 추가하게 되면 문제가 생긴다.
무조건 한 줄로 나오게 하기위해 말 줄임표를 사용한다 (접근성 자체에선 좋지않다.)
width fit-content는 우리가 내부의 컨텐츠 크기만큼 fit 되는 것이라고 알고있다.
그런데 fit되고있다가 컨텐츠 양이 늘어나 헤더에 막혀 줄바꿈이 되는것
fit content를 지우면 width auto이므로 현상황에 맞지않다.
▼nowrap으로 띄어쓰기 관계없이 무조건 한줄로 나오게 강제시키고 overflow 사용하여 넘쳐흐른 텍스트 숨김처리 시키고
잘린 부분 기준으로 ...처리한다.
▼ :root 사용하여 폰트 적용
▼카드내용 디자인 수정
▼ 내용 강조 추가 <strong>
▼ 만약 컨텐츠 내용이 딱 5줄만 나오게 설정하기위해
카드 콘텐츠에 눈대중 정도 높이를 지정하고 작업
한 줄의 높이는 (line-heigh) 폰트마다 다르므로 폰트 설정후 작업해야하며
높이는 line-height 에서 * 5줄에 해당하는 {em}단위 로 설정해야한다.
▼이러한 방법도있고 text-overflow: ellipsis로 (...) 나오게 할 수있지만 한 줄만 적용된다.
5줄 이후 적용 되어야하므로 이 방법을 사용하면된다.
https://publish.obsidian.md/csscovery/CSS+Typography/%EB%A7%90%EC%A4%84%EC%9E%84%ED%91%9C
말줄임표 - FE11 - Obsidian Publish
말줄임표 - FE11 - Powered by Obsidian Publish.
publish.obsidian.md
line-height와 calc 사용하여 em 으로 적용하는건 예전방식이다.
벤더 프리픽스 (Vendor Prefix)
- 벤더 Vendor: 각 브라우저 제조사
- 프리픽스 Prefix: 접두어, (단어 앞에 붙히는)
일부 실험적인 CSS 속성 또는 값 (벤더 프리픽스는 속성에게도 붙을 수 있지만, 특정 값에도 붙을 수 있습니다.)은 벤더 프리픽스와 함께 사용해야만 적용됩니다. 실험적인 속성 또는 값이란 아직 완전히 표준화되지 않은 기능을 의미합니다. 브라우저 제조사들은 이러한 속성을 조건부로 공개하여 개발자들이 테스트하고 피드백을 제공할 수 있게 합니다. 벤더 프리픽스는 일종의 조건부 뱃지로, 해당 속성 사용 시 주의가 필요하다는 것을 명시적으로 나타냅니다. 이는 향후 브라우저 업데이트에 따라 이 속성이나 값의 사용법 또는 효과가 변경될 수 있음을 의미합니다.
벤더 프리픽스 종류
- -webkit-: Chrome, Safari, 최신 버전의 Opera
- -moz-: Firefox
- -ms-: Internet Explorer
- -o-: 구 버전 Opera
벤더 프리픽스 사용 주의 사항
표준 속성을 항상 마지막에 작성: 만약 표준 속성이 벤더 프리픽스 속성보다 먼저 작성되면, 벤더 프리픽스 버전이 표준 버전을 덮어쓸 수 있습니다. 이는 최신 브라우저에서도 구형 구현(벤더 프리픽스 버전)이 사용되게 할 수 있습니다. 표준 속성을 항상 마지막에 작성함으로써, 브라우저가 표준을 지원할 경우 항상 표준 구현이 사용되도록 보장합니다.
벤더 프리픽스는 시간이 지나면 최종적으로는 제거하는 것이 좋습니다. Can i use의 사이트에서 벤더 프리픽스가 필요한 브라우저 버전을 자주 확인 해야 합니다.
최근에는 브라우저의 빠른 발전으로 벤더 프리픽스를 붙혀야 하는 속성 또는 값이 많이 줄어 들었습니다.
하지만 아직 존재합니다.
▼ 전역변수를 만들어 좀더 유연하게 줄 제한을 적용한다
▼푸터 해시태그 꾸미기
▼ 전역변수를 사용하여 색상지정한다
▼해시태그를 삭제하고 가상요소 content를 넣는다.
▼인라인 요소이기에 크기 조절이 안되므로 flex박스를 사용하거나 인라인블록을 적용하면된다.
flex박스는 부모요소가 필요한데 없으므로 a태그들을 한번 감싸서 하면된다. (귀찮아서 인라인블록쓸예정)
좌우패딩과 고정높이를 지정하여 스타일적용
▼ 입체감을 주기위해 카드에 그림자와 radius, overflow hidden을 적용 한다.
■ 여기서 잠깐 line-height의 정리
이 사항들은 무조건 한줄일때만 해당된다.
▼문장을 살펴보면
▼ 작업물 이어서) 태그가 많아지는 상황
띄어쓰기가 있어도 한줄이 유지되게끔 white-space: nowrap; 적용하고 overflow hidden 했으나 요소가 가려진다.
이런경우 max-width 고정크기랑 boxsizing, ellipsis를 처리해줘야한다.
▼ overflow:hidden은 마진병합때 사용했었다.
인라인 블록 에서는 overflow:hidden은 부모와자식간관계를 끊어내고 독립적인 개념으로 시작하기에 적용한것
원래 이미지는 고정픽셀로 박아놓는게 맞는데 그렇게되면 반응형이 적용이안된다.
그래서 쓰는 코드가 aspect-ratio이다.
aspect-ratio는 특히 반응형 웹에서, img 요소에 aspect-ratio 속성을 사용하는 것이 매우 유용하다
이 속성은 요소의 너비와 높이의 비율을 지정하여, 콘텐츠가 로드되기 전에도
안정적인 레이아웃을 유지할 수 있게 도와준다.
주로 이미지가 많은 공유사이트나 동영상이 들어가있는 사이트에 적용되기도 한다.
▼ footer 디자인
RESULT
'BootCamp Review' 카테고리의 다른 글
| 2024.08.15,19 (Day 13~14) - HTML/CSS [INCREDIBLE] (0) | 2024.08.19 |
|---|---|
| 2024.08.13~14 (Day 11,12) - HTML/CSS [Position] (0) | 2024.08.18 |
| 2024.08.08 (Day 9) - HTML/CSS [Flexbox II] (0) | 2024.08.18 |
| 2024.08.07 - Figma(특강) (0) | 2024.08.18 |
| 2024.08.06 (Day 8) - HTML/CSS [Flexbox] (0) | 2024.08.18 |