새로운 개념

🎮🐸 게임으로 알아보는 flex

✏ Flex

부모에 display – flex가 있어야한다.
플랙스를 쓰면 그 자식이 인라인이라도 바로 꾸밀수있음

가로 / 중심축 수정

◼ justify-content

flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
center: 요소들을 컨테이너의 가운데로 정렬합니다.
space-between: 요소들 사이에 동일한 간격을 둡니다. -> 더 자주씀
양끝을 붙인상태에서 요소들 사이 간격 일정
space-around: 요소들 주위에 동일한 간격을 둡니다.
외부 간격이 일정

space-evenly(FireFox Only): 첫번째로 오는 정렬 대상 전에 두개 의 인접한 정렬 대상 사이의 간격과 마지막 정렬 대상 이후의 간격이 같도록 항목분산 됩니다.

세로 / 교차축 수정

◼ align-items

flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
stretch: 요소들을 컨테이너에 맞도록 늘립니다.

row,column방향설정

◼ flex-direction

row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
시작점이 오른쪽으로 이동
column: 요소들을 위에서 아래로 정렬합니다.
column-reverse: 요소들을 아래에서 위로 정렬합니다.

태그 순서 변경

◼ order

-1 0 1로 좌우로 이동가능
-1은 맨왼쪽 0은기본 1은 맨오른쪽
.선택자 { order : }

상/하축 이동

◼ align-self

.선택자 { align-self: }
flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
stretch: 요소들을 컨테이너에 맞도록 늘립니다.

◼ flex-wrap

내가 지정한 수치에서 좁게 계속 꾸겨서 넣으니까 써서 (다음줄) 밑으로 떨궈줘야함
nowrap: 모든 요소들을 한 줄에 정렬합니다.
wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

◼ flex-flow

flex-direction과 flex-wrap 속성을 합쳐놓은 약식속성
flex-flow: column wrap;

◼ align-content

여러줄의 교차축 정렬과 줄 사이 간격 제어

flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

여백

◼ gap

display:flex를 부모에서 주고, flex:1로 width에 각각 div들이 들어 갈 수 있게 함
부모에서 gap을 지정해줘서 좌우 공백을 준다 (사이 공백)
margin: 0;padding: 0;

---

flex 실습

1. 

📝 주요 특징

• 왕따 선택자

.box2 div+div{ margin-left: 10px; }

• width를 줄 수 있는 두가지 방법

.box4 div{
       1. flex: 0 0 calc(50% - 5px); 
          -> 자라나지 않고 width만 주겠다
       2. width: calc(50% - 5px);
          height: 200px;
          background: #f00;
        }

flex: 1;

• flex grow - 자라나다, 증가될때의 비율
• flex shrink - 수축됐을때 비율, 줄어들때의 비율
• flex basis - 값을 합친거, 중심축기준 위드 높이
  -> 자식들이 1대1대1로 먹겠다는거
• ex) flex : [grow], [shrink], [basis]

---

2. 

📝 주요 특징

header{
            position: fixed;
            top: 0;left: 0;
            width: 150px;
            background: #f00;
            height: 100vh;
        }

100% - 부모 태그의 100%를 사용한다는 의미

vh - 사용자의 눈에 보이는 스크린 범위에 영향을 받는다.

• 1vh는 1/100 viewport-height
• 즉 뷰포트(스크린) 기준 100분의 1이다. 따라서 100vh는 뷰포트 전체 높이가 된다.

vw - 사용자의 눈에 보이는 스크린 범위에 영향을 받는다.

• 1vw 역시 1/100 view-width
• 즉 뷰포트 기준 100분의 1이다. 100vw는 뷰포트 전체 너비와 같다.

.box5 div+div{
                flex: 0 0 100px;
                /* 늘리지 않고 with만 100px로 지정*/
                background: #00f;
                margin-left: 10px;
            }
.box6 div{
                flex: 0 0 30%;
                /* 늘리지 않고 with만 30%로 지정*/
                height: 200px;
                background: #f00;
            }

---

3. 

📝 주요 특징

✏ ✨blind

<h1 class="logo">
    <a href="">
        <span class="blind">토스</span>
    </a>
</h1>

웹 접근성을 고려하여 스크린 리더기로 읽힐 수 있게 도와준다.

.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px; /*영역에서 제외시킴*/
  clip: rect(0 0 0 0);
  /*현미경으로 확대했을 때 보일까봐 .으로 셋팅*/
  overflow: hidden;
}

🚫 웹 접근성을 고려하지 않은 속성들 / 성능저하

❌display: none; -> 리더기가 읽지 않음
❌opacity: 0; -> 리더기가 읽지 않음
❌visibility: hidden; -> 한국 리더기만 읽는다
❌width:0, height:0-> 가로세로가 없기땜에 못읽음
❌absolute: top:0,left:0
❌absolute: top:-9999px,left:-9999px
-> 홈페이지가 글을 위에서부터 읽을 때 천천히 내려오다가 absolute를 읽으려고 저 왼쪽 갔다가 다시 돌아오기 때문에 성능이 안좋음
❌text-indent: -9999px; ->텍스트를 맨뒤나 맨앞으로 땡기지만 잘 안씀

🔑 clip속성을 이용하기 위해서는 position: absolute, fixed일 때 가능하므로 position을 잡아준 후, width와 height가 0인 컨텐츠는 읽을 수 없으므로 최소 1px씩 주고 clip으로 잘라서 margin: -1px, overflow: hidden을 걸어주면 된다.

-> blind는 나중에 common(공통)에 넣어주자!

<section class="sc-event">
<ul>
   <li>
       <a href="">
          <img src="https://s.pstatic.net/static/www/mobile/edit/20220427/cropImg_728x360_92967740989307176.jpeg" alt="">
          <p>Lorem ipsum dolor sit amet.</p>
       </a>
   </li>
<ul>
...

.sc-event ul a{
               display: block;
               padding: 10px;
               background: #f00;
                }

a태그는 인라인이기 때문에 display: block;을 줘야한다.

---

4. 

📝 주요 특징

<link rel="stylesheet" href="./css/style.css">

html에 css를 직접적으로 쓰는게 아닌 link로 연결시켜준다.

<div class="bottom">
   <ul class="left">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
   </ul>
   <div class="right">right</div>
</div> 

.bottom {
          display: flex;
          background: #fff;
          padding: 10px;
  }
.bottom .left {
                display: flex;
                flex: 1;
                flex-wrap: wrap;
                justify-content: space-between;
                align-content: space-between;
                height: 200px;
}

• flex: 1;를 이용하여 가로 사이즈를 잡는다
• justify-content: space-between;요소들 사이에 동일한 간격주기
• align-content: space-between;줄사이에 동일한 간격

.bottom .left li {
                  flex: 0 0 calc((100% - 20px) /3);
                  background: #000;
                  height: calc(50% - 5px);
}
.bottom .right {
                flex: 0 0 150px;
                background: #000;
                margin-left: 10px;
}

• clac를 이용하여 여백값빼고 자동으로 계산하기

---

5. 

📝 주요 특징

<section class="sc-box3">
   <div class="wrap">
       <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
       </ul>
   </div>
</section>

.sc-box3 ul li:nth-child(1){flex: 0 0 calc(80% - 5px);}
.sc-box3 ul li:nth-child(2){flex: 0 0 calc(20% - 5px);}
.sc-box3 ul li:nth-child(3){flex: 0 0 calc(30% - 5px);}
.sc-box3 ul li:nth-child(4){flex: 0 0 calc(70% - 5px);}

각각 가상선택자를 이용하여 여백값을 뺀걸 계산해준다.

💡🤔 inline사이에 여백이 생겨요

<section class="sc-box4">
	<strong>공지사항</strong>
		<div class="navi">
			<a href="">이전</a>
			<a href="">다음</a>
		</div>
</section>

.sc-box4 .navi{display: flex;}
.sc-box4 .navi a{
	background: #fff;
	width: 50px;height: 50px;
	border: 1px solid #000;
	}
.sc-box4 .navi a:nth-child(1){margin-right: -1px;}

❗ 첫번째 사진에서 자세히 보면 이전과 다음이 떨어져있다.

💬 내가 생각한 해결방안
a태그에 display혹은 flex를 주지 않아 발생한거 같아 부모에 flex를 줬다.
해결된듯 보였지만 두번째 사진처럼 겹치는부분이 두꺼워진다
-> 해결 못함ㅠ

👌😆 해결방안

1. 이전 다음이 떨어져있는 이유는 코드에서 inline인 a태그가 엔터쳐져있기때문이다.
2. a태그 두개가 겹쳐있어서 두줄로 보이는 이유는 border: 1px값이 들어가 있기때문
   ->margin-right: -1px;를 주면 된다!

오답✍(◔◡◔)✧

justify-content: space-between;로 인해 여백이 생겼지만 밑에 줄은 떨어지지 않았다.

💬 내가 생각한 해결방안
1. 가상선택자를 이용해야한다.nth-child1,2,3...
-> css가 너무 길어진다.
2. 두번째 줄에 있는애들한테 클래스 이름을 준다.
-> 번잡하다

👌😆 해결방안

flex는 gap이 있다!!
부모에 gap: 10px;을 주면 좌우 위아래 여백이 생긴다.