TIL

CSS중급

Flexbox로 레이아웃 잡기

• flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법이다.

• display: flex; => 부모 박스요소에 display: flex를 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성방법이다. 기본값으로, display: flex가 적용된 부모 박스의 자식 요소는 왼쪽부터 차례대로 이어 배치된다.
  

• Flex요소에 방향 지정하기 (flex-direction)
  flexbox는 박스가 수직으로 분할되는 것이 기본값이다. 방향을 설정해주면, 수평으로도 분할할 수 있고, flex-direction 속성은 부모 박스요소에 적용한다. 자식 박스에 특별한 속성을 주지 않아도, 부모 요소에 의해 자식 요소가 영향을 받는다.
  
  여기서 flex: 0 1 auto;는 순서대로 grow(팽창 지수), shrink(수축 지수), basis(기본 크기)이다. flex 속성에 적용되는 세 가지 영역은, margin이나 padding에서 띄어쓰기를 기준으로 의미하는 바가 구분되는 것과 동일하다. 그러나, flex 속성에 적용되는 세 가지는 기본 크기를 바탕으로 필요에 따라 늘리거나 줄일 수 있는 값이 적용된다. grow, shrink 속성은 단위가 없고, 비율에 따라 결과가 달라진다.

• grow: 자식박스의 크기를 늘리는 것 이다. flex-grow 속성의 값을 1로 변경할경우 자식박스는, 부모 박스의 길이 중에서 남은 빈 영역만큼 늘어난다.
  
  만약 다른크기로 조정하고 싶은 경우 이 처럼 비율에 따라 변하기 때문에 숫자를 변경해 주어서 조정하면 된다.

• shrink: grow와 반대로 설정한 비율만큼 박스 크기가 작아진다. 그러나, flex-shrink 속성은 width나 flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기가 어렵기 때문에 flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방하다.

• basis: 이 박스의 기본 크기이다. 자식 박스가 flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기이다. flex-grow가 0일 때, basis 크기를 지정하면 그 크기는 유지된다.
  

  width와 flex-basis를 동시에 적용할 경우, flex-basis가 우선된다.
  콘텐츠가 많아 자식박스가 넘치는 경우, width가 정확한 크기를 보장하지 않는다.
  (flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있다.

• 콘텐츠 정렬 방법

1. 콘텐츠 수평 정렬 (justify-content)
   부모 박스에 justify-content 속성을 적용하면, 자식 박스를 수평으로 정렬할 수 있다.

   flex-start: 요소들을 컨테이너의 왼쪽으로 정렬한다.
   flex-end: 요소들을 컨테이너의 오른쪽으로 정렬한다.
   center: 요소들을 컨테이너의 가운데로 정렬한다.
   space-between: 요소들 사이에 동일한 간격을 둔다.
   space-around: 요소들 주위에 동일한 간격을 둔다.

2.콘텐츠 수직 정렬 (align-items)
부모 박스에 align-items 속성을 적용하면, 자식 박스를 수직으로 정렬할 수 있다.

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

웹 앱 화면 설계하기

• 와이어프레임(Wireframe)
  웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 한다. 와이어프레임은 말 그대로 "와이어로 설계된 모양"을 의미하며, 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것이다. 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도이므로 전환 효과나, 애니메이션, 사용자 테스트같은 스타일링 요소나 UX(사용자 경험, User Experience)를 판단하는 것이 아니다.
• 목업(Mock-up)
  대부분의 산업에서 목업은 실물 크기의 모형을 뜻한다. 웹 또는 앱을 제품이라고 할 때, 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성한다. 예를 들어, 트윗 작성자, 트윗 내용, 작성한 날짜 등을 HTML 문서 내에 하드코딩하는 방식이다.
• 하드코딩
  
  변수를 사용하지 않고 구구단처럼 보이기 위해서는, 각 숫자의 단을 소스코드에 모두 출력하는 방법뿐이다.

check

• '>' 사용
  
  
  '>'표시는 자식 선택자 라고 불리고, 그냥 스페이스(띄어쓰기)는 하위 선택자라고 불린다. 하위 선택자는 내 자식을 포함해서, 손주, 증손주, 100대, 1000대, 10000대 자손까지 영향을 끼치지만, 꺽새표시는 위에서 보면 p 요소들 중에 자식인 p 요소에 대해서 빨강색을 적용한것 처럼 자식에게만 영향을 끼친다.

• CSS 링크(a:link, a:visited, a:hover, a:active)

4가지 링크상태

1. 사용자가 링크를 방문하기 전의 상태 (a:link)
2. 사용자가 링크를 방문했을 때의 상태 (a:visited)
3. 사용자가 마우스를 링크 텍스트 위에 올려 났을 때의 상태 (a:hover)
4. 사용자가 마우스로 링킁 텍스트를 클리한 순간의 상태 (a:active)

Tomorrow