2/22-2

Posted by:

|

On:

|

  • 태그의 혼합모드-mix-blend-mode
    • difference : 반전모드(혼합모드 스타일을 넣은 태그의 색과 그 외 색을 비교하여 색이 변한다. 예를 들어 혼합모드쪽의 배경색을 파란색, 그 외 태그의 색을 흰색으로 했다면 반전색인 노란색이 나온다.)
  • 사용자 인터페이스(UI) 속성
  • 다중 칼럼 레이아웃 : 신문과 같이 여러 개의 칼럼으로 구성되는 구조(column)
    • column-count : 나눌 열 수
    • column-rule : 칼럼 나누는 규칙을 두께,모양,색 지정
    • column-gap : 위의 rule에서 얼마나 떨어지는가
    • column-fill : 열 마다 채우는 방식(unser,balance,auto)
  • 플렉서블 박스 레이아웃 : 자동으로 1열로 배치된다 – 안에 있는 것들은 아이템(item)이 된다
    • display:flex (쓰기위한 기본 설정)
    • align-items : 아이템들의 위치 배열(flex 기본으로 설정하면 상하를 기준으로 한 배열)
    • flex-wrap : 길이나 높이가 부족 할 때 다음열(오른쪽)이나 다음 행(아래)으로 넘기는 기능이다 reverse가 붙으면 반대(왼쪽, 위)로 넘어간다
      justify-content 설정이 넘어간 곳에도 적용된다
    • 높이가 낮아서 아이템이 색보다 튀어 나간 경우 색 범위가 늘어나지는 않는다
    • 높이와 flex-wrap 설정까지 했다면 align-items가 적용이 되지 않는다. 그 때는 align-content를 써야 한다