CSS 4차시

- white-space : content의 공백을 어떻게 처리할 것인지

• normal: 연속 공백을 하나로 합치며 자동으로 줄바꿈
• nowrap: 연속 공백을 하나로 합치며 줄바꿈은 br요소에서만 일어남
• pre-wrap: 연속 공백 유지. 줄 바꿈은 개행 문자와 br요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿈.
• pre-line: 연속 공백을 하나로 합침. 줄바꿈은 개행 문자와 <br> 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿈.break-spaces다음 차이점을 제외하면 pre-wrap과 동일
  • 연속 공백이 줄의 끝에 위치하더라도 공간을 차지
  • 연속 공백의 중간과 끝에서도 자동으로 줄을 바꿀 수 있음
  • 유지한 연속 공백은 pre-wrap과 달리 요소 바깥으로 넘치지 않으며, 공간도 차지하므로 박스의 본질 크기(min-content, max-content)에 영향을 줌

 

- position : element를 어떻게 위치시킬 것인가

• static: element를 자연스러운 흐름에 맞춰 위치시킨다.
• relative: element의 원래 위치에 상대적으로 위치한다.
• absolute: relative속성을 지닌 부모 element를 기준으로 절대값을 갖는다.
• fixed: viewpoint를 기준으로 위치한다.navigation 구현 등 화면 상단, 측면, 하단 등 고정시키기 위해 사용

 

- float: element를 left 또는 right로 띄운다.

이미지나 컨테이너를 글과 함께 어울리도록 배치할 때 사용

 

-  FLEX CONTAINER 속성

• flex-direction(row): item의 배열 방향
  row / row-reverse / column / column-reverse / initial / inherit

<style>
    .container {
          display: flex;
    }
    .flex-row {
          flex-direction: row;
    }
    .flex-col {
           flex-direction: column;
    }
</style>

• flex-wrap(nowrap): item을 감쌀 것인지 결정
  nowrap / wrap / wrap-reverse / initial / inherit
  • nowrap: default값. flex-container 영역을 벗어나더라도 flex-item은 한줄로 배치된다.
    overflow가 발생하지 않고 item이 수축한다.
  • wrap: overflow가 발생하면 여러 행에 걸쳐서 배치된다.

 

• flex-flow(row nowrap): flex-direction flex-wrap

 

• justify-content(flex-start): item의 수평정렬(row), 수직정렬(column)
  flex-start / flex-end / center / space-between / space-around / space-evenly / initial / inherit
  - flex-direction을 설정하지 않으면 row가 기본값
  • flex-start: 왼쪽정렬
  • center: 가운데 정렬
  • space-between: 사이 공간을 일정하게 배분하여 양쪽 배분정렬
  • flex-end: 오른쪽 정렬
  - flex-direction: column
  • flex-start: 상단정렬
  • center: 중간 정렬
  • space-between: 사이 공간을 일정하게 배분하여 위아래 배분정렬
  • flex-end: 하단정렬

 

• align-items(stretch): item의 수직정렬(row), 수평정렬(column) - 교차정렬
  stretch / center / flex-start / flex-end / baseline / initial / inherit
  - flex-direction을 설정하지 않으면 row가 기본값
  • stretch: 부모 element의 높이(height)에 맞게 늘어난다.
  • baseline: container의 시작점에 배치
  • center: 수직상 중간부분에 배치
  • flex-end: container의 하단에 배치
  - flex-direction: column
  • stretch: 부모 element의 길이에 맞게 늘어난다.
  • flex-start: container의 왼쪽에 배치
  • center: 수평상 중간부분에 배치
  • flex-end: container의 오른쪽에 배치