TIL 작성 2021 9/7

(1) CSS 관련 사이트: CSS 관련 추천사이트

• 단위에 대해서좀 확인해보자.

(2) 와이어 프레임/ 목업/ 프로토타입/ 하드코딩

• 와이어 프레임: 화면 단위의 레이아웃을 설계하는 작업
  pinterest(와이어프레임 검색)
• 목업: 실제품을 만들어보기 전, 실물과 비슷하게 시제품을 제작하는 작업
• 프로토타입: 처음부터 종료까지 핵심동작이 기능하게 구현된 앱
• 하드코딩: 데이터를 코드 내부에 직접 입력하는 것.

(3) flex-direction

• flex-direction 메인축이 row(가로)일때

  • align-items(수직 정렬)
  • justify-content(수평 정렬)

• flex-direction 메인축이 column(세로)일때 (반대로)

  • align-items(수평 정렬)
  • justify-content(수직 정렬)

(4) 부모박스 속성 vs 자식박스 속성

• 부모 박스에 적용할 수 있는 속성들

  • display
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

• 자식 박스에 적용할 수 있는 속성들

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

(5)<hr> 박스 밑에 밑줄을 그어준다.

(6) hover

• 아이콘에 효과를 준다.

css
.icon.hover{
   background-color: red;
}

(7) flex 속성

• grow: 아이템이 늘어나서 여백을 채우는 늘어나는 비율에 대한 속성
• shrink: 공간이 부족할 때 각 아이템의 사이즈를 얼마까지 줄일 것인지에 대한 속성
• basis: 아이템의 기본크기