[TIL : 8] CSS중급

🤓 Today result

4일차에 만들었던 계산기를 꾸며보았다! 은근 만질수록 점점 나아지는 모습에 눈이 빠져라 꾸몄다...! 아잇 신나신나😆 원래 있던 틀이 내가 만든 게 아니라 해석하는데 쫌 오래걸렸다. 그래도 조금식 수정하면서 내가 생각했던 디자인이 나오니까 뿌듯했다.🐣🐣🐣

👩‍💻 Before You Learn

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

  (HTML)id -> (CSS)#
  (HTML)class -> (CSS). 이렇게 접근해서 예쁘게 만들어준다!

• 절대 단위와 상대 단위를 구분할 수 있다.

  절대 단위: px pt cm in
  상대 단위: em ewm % vw vh

• CSS 박스 모델에 대해 이해하고 있다.
• 박스 측정 기준(content-box, border-box) 두 가지의 차이를 이해하고 있다.

  yes! 👌

👩‍💻 Achievement Goals

• 다양한 CSS 셀렉터 규칙을 이해할 수 있다.

  • 셀렉터
    h1 { } , div { }
  • 전체 셀렉터
    * { }
  • Tag 셀렉터
    section, h1 { }
  • ID 셀렉터
    #only { }
  • class 셀렉터
    .widget { }
  • attribute 셀렉터 (암기x)
    a[href] { }
  • 후손 셀렉터
    header h1 {}
  • 자식 셀렉터
    header > p { }
  • 인접 형제 셀렉터
    section + p { }
  • 형제 셀렉터
    section ~ p { }
  • 가상 클래스
    a:link { }
  • 요소 상태 셀렉터
    input:checked + span { }
input:enabled + span { }
input:disabled + span { }
  • 구조 가상 클래스 셀렉터 (암기x)
    p:first-child { }
ul > li:last-child { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
div:nth-last-child(2) { }
p:first-of-type { }
div:last-of-type { }
p:nth-last-of-type(1) { }
  • 부정 셀렉터
    input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }
  • 정합성 확인 셀렉터
    input[type="text"]:valid { }
input[type="text"]:invalid { }

• 후손 셀렉터와 자식 셀렉터의 차이는 반드시 알아야 합니다.

  • 자식 셀렉터 : 직계 자식만 선택한다. header > p {}
  • 후손 셀렉터 : 자식을 포함, 손자 외 모든 후손을 선택한다. header h1 {}

• 레이아웃을 위한 HTML을 만들 수 있다.

  yes! 🙌 (! + Enter를 누르면 기본적인 틀이 저절로 만들어진다!)

• Flexbox를 이용해 레이아웃을 만들 수 있다. (다음 속성에 대한 이해가 있어야 합니다)

  display : flex; 이렇게 부모 셀렉터에 선언하여 사용한다.

• flex-direction 방향

  row (기본 가로) column (세로), row-reverse (오른쪽에서부터 시작 왼쪽으로), column-reverse (아래에서 시작 위로)

• flex-grow 얼마나 늘릴 것인가?
• flex-basis 얼마만큼의 크기를 갖는가?

  flex: <grow> <shrink> <basis>;이렇게 쓰이는데, grow는 비율이라고 생각하면 편하고, shrink는 보통 1로 두며, basis는 보통 auto로 하고 크기가 꼭 유지되어야 하는 거라면 특정 크기를 지정한다.

• justify-content : main axis 기준으로, 기본 값 row(수평) 정렬이다.

  flex start (컨테이너 최상단 정렬)flex end (컨테이너 최하단 정렬) center (컨테이너 중앙 정렬) space-between (요소들 사이에 간격 동일하게)

• align-items: main axis와 수직을 이루는 cross axis 기준으로, 수직 정렬이다.

  : flex start (컨테이너 최상단 정렬)flex end (컨테이너 최하단 정렬) center (컨테이너 중앙 정렬) stretch (컨테이너에 맞게 늘림)

📚 그 외

• 휴파님이 알려주신 사이트에서 게임으로 공부했다! 이 것 외에도 많이 알려주셨는데 시간이 나면 해봐야겠다! 재밌는데 안풀리면 은근 열받는다...😡😡😡

  CSS Diner
  Flexbox Defense
  Flexbox Froggy
  Grid Garden

• CSS는 정말 알면 알수록... 조금씩 바꾸다가 아주 망가져버린다. 계속계속 해보면서 알아가야겠다.
• 그래도 오늘 CSS를 배우면서 4일차에 만들었던 계산기를 예쁘게 꾸며보았다! 그때는 아리송했던 글자들이 이젠 좀 형식이 갖춰져서 보였다! 조금씩 다듬을수록 좀 봐줄 만하다. 아주 시간이 금방 가버렸다. 예히-!😁 마저 마무리 하고 포스팅해야겠다.