• UI, 화면을 만드는 작업도 중요!!
• 화면 설계의 기본

<aside> 💡 content-box, box-sizing p+a 인접 : 형제가 아니어도 되는지 sprint reference 코드 보기

</aside>

Before You Learn

아래 내용은 지난 유닛에서 학습한 내용입니다. 잘 이해하고 있는지 점검하세요.

• CSS의 기본적인 셀렉터 #와 .의 차이를 이해하고 있다.

  • : id

  • . : class
• 절대 단위와 상대 단위를 구분할 수 있다.
  • px
  • rem, vw, vh
• CSS 박스 모델에 대해 이해하고 있다.
  1. inline, inline-block, block
  • block : width, height / inline: 콘텐츠의 너비
  • display: inline-block으로 너비, 높이 설정해줄 수 있다
  1. 박스 모델
  • margin-border-padding
  • margin : 음수값 가능
  • top right bottom left
  • autoflow : auto (스크롤), hidden(보여주지 않을 수 있다)
• 박스 측정 기준(content-box, border-box) 두 가지의 차이를 이해하고 있다.
  • content-box : 콘텐츠
  • box-sizing: border-box
    • 모든 박스에서 여백과 테두리를 포함한 크기로 계산된다
    • html 문서 전체에 적용

Achievement Goals

• 다양한 CSS 셀렉터 규칙을 이해할 수 있다.
  • 후손 셀렉터와 자식 셀렉터의 차이는 반드시 알아야 합니다.
• 레이아웃을 위한 HTML을 만들 수 있다.
• Flexbox를 이용해 레이아웃을 만들 수 있다. (다음 속성에 대한 이해가 있어야 합니다)
  • 방향: flex-direction
  • 얼마나 늘릴 것인가?: flex-grow
  • 얼마만큼의 크기를 갖는가?: flex-basis
  • 수평 정렬: justify-content
  • 수직 정렬: align-items

CSS 중급