[TIL] CSS 정렬, 반응형

✍ Today I Learned

• 오늘도 내비게이션 바와 아웅다웅하며 알게 된 것들
  • 내비게이션 바 오른쪽 정렬하면 콘텐츠 내용 계속 바뀌던 거 <li>에 display: inline; 설정으로 해결
  • 내비게이션 바의 height이 정해져 있으면 line-height 똑같이 설정해서 수직정렬
  • 높이를 굳이 지정하지 않았으면 padding으로 수직정렬
  • <img>에 vertical-align: middle; 설정
• vertical-align은 오로지 inline과 table-cell element에만 적용된다. (block level element에 사용 X)
  • 예를 들면, img element를 text element 라인 속에서 정렬할 때 쓰인다. (참고자료)
• float으로 한쪽 정렬을 하지 않으면 아주 미세한.. 이상한 마진이 생긴다.. 왜지?
• 수직 정렬에 대해 정리한 내용 (2022.03.28 - [CSS] - [CSS] 수직정렬의 3가지 방법(padding, line-height, position))
• 모바일 페이지를 먼저 만들고 데스크톱으로 가면 min-width / 데스크톱 페이지를 먼저 만들고 모바일로 가면 max-width
• 요즘은 모바일 화면을 먼저 만든다. (Mobile Firtst)
• 모든 웹 페이지는 다음과 같은 뷰포트 요소를 반드시 포함해야 한다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• gird-view는 화면을 12개의 열로 나눈 것을 의미한다.
• break-point는 3개 정도가 적당하다. (데스크톱 > 태블릿 > 모바일)
• device의 세로 모드는 portrait, 가로 모드는 landscape