[HTML/CSS] 영역 배치 및 flex 단축 속성

[ flex-basis ] 

 // 기본값이라 생략되어 있는 상태

.section--visual .summary {

  /* 기본값 */

flex-basis: auto;

}

flex-basis : auto; (default)

 

🔥 problem 🔥
-  summary 영역이 넓게 차지하는 바람에 form 양식 영역이 어그러진 상태
-  summary 영역의 속성 flex-basis: auto; (기본값)을 가지고 있기 때문에 일어난 현상

💡 solution 💡
-  flex-basis: 0;

 

// summary 영역이 좁아진다.

.section--visual .summary {

  flex-basis: 0;

}

flex-basis : 0;

 

---

[ 가변하는 영역 만들기] 

🔥 problem 🔥
-  .section--visual #sign-form 영역은 가로너비를 지정했다.
- .section--visual .summary 영역의 가로 너비를 지정하지 않았다.

💡 solution 💡
-  전체 영역에서 너비를 지정하지 않은 summary 영역을 가변하는 형태로 만들어야한다.

.section--visual .summary {

 

// 글자를 나타내는 .summary가 나머지 영역을 1의 비율로 차지

  flex-grow: 1;  

  flex-basis: 0;

}

 

---

- # [ flex 단축 속성 ]

Flexible box 컨테이너에 해당하는 아이템에 부여해주는 속성

flex : flex-grow  flex-shrink  flex-basis ;

flex :          0                     1                  auto  0;  (default)

 

(3) flex-basis : auto가 기본 값이지만

flex 단축 속성을 사용하는 순간,  flex-basis의 auto값은 0으로 바뀐다.

flex : 0  1  0; 

  .section--visual .summary{

 

//   flex : 1 1 0; ( 기본 값 생략 )

// summary 영역이 1의 비율로 나머지 영역을 차지하라 'flex-grow : 1; '

 / flex-shrink 생략

/ flex-basis 생략 : 기본값이 단축속성을 사용하면서 원하는 값인 0으로 바뀌니까 기재할 필요❌

    flex : 1;

 

// summary와 form 요소 간격 조절

    margin-right: 90px;

  }

 

 

flex 단축속성으로 만든 같은 결과화면

 

---

 

- # [<br> 말고 ! 줄바꿈 특수기호 &nbsp; ]

 

Q) 자연스러운 줄바꿈을 원한다.

 

// 띄어쓰기 되면서 두 단어가 연결 된 상태

build&nbsp;software

and&nbsp;work

 

두 단어를 묶어서 줄바꿈해준 형태

 

빈공간이 한단어만 들어갈 여유공간만이 남아있는 상황에서
단어와 단어를 연결해서

ex / build software => build&nbsp;software

두개의 단어가 합쳐진다면 
다음줄로 넘어가서 합쳐진 두개의 단어가 작성 될 것이다.

충분히 한단어가 올 수 있는 자리가 있음에도 
디자인상 보기 좋게 하기 위한 줄바꿈을 진행한다.  

 

&nbsp;를 통해서 특정한 단어를 연결하고 연결된 텍스트를 자연스럽게 줄 바꿈하는 구조

 

- # [ <br> 태그를 사용하지 않는 이유 ]  ❔

 

 반응형 페이지로 만들기위함이다. 

반응형일경우, 자연스러운 줄바꿈이 되야하는데
`<br>태그`를 사용하면 무조건 해당 부분에서 줄바꿈된다는 내용이 fix 되니까 !