[FE - ConnecTo] DAY13 TIL👩🏻‍💻

22.07.27 수업에서 배운 내용과 깨달은 점을 정리하였습니다 😊
피드백은 언제나 환영입니다! 🍊

✔오늘 수업 내용

---

어제에 이어서 Sass를 이용한, 웹페이지 레이아웃 및 디자인 작업을 완료하였습니다.

어제까지는 강사님과 함께 코드를 짜며 Sass를 조금 더 익숙하게 익히는 작업이었다면,

오늘은 직접 코드를 짜보며 Sass의 기능들을 익혔습니다.

오늘 수업 속도가 조금 빠른 듯 했지만, CSS 작업을 저희가 1차로 해봤던 상황이고,

CSS를 Sass로 변경해서 적용하는 작업이라, 재밌었습니다! 😉

• 여태 버튼을 만들 때, 높이를 지정하는 듯 규격화 하지는 않았지만,
  버튼을 사이즈 별로 규격화 할 때는 사이즈 지정해서 사용해도 좋다.
• 색상을 재할당 할 때, 한 번만 할당해서 사용해야 되는 줄 알았는데, 컴포넌트 별로 구별해서 색상을 지정하여 사용하면 훨씬 사용이 편해진다.
• import는 use보다 먼저 사용할 수 없다.
• Sass를 사용할 때, 가독성을 신경쓰는 편이 좋다

  .twitter{
    &__userProfile{
      shape-outside: circle(50%);
      float: right;
      width: 20%;
      max-width: 110px;
      height: 110px;
  
  	  &__Image{
  	    border-radius: 50%;
  	    width: 100%;
  	    height: 100%;
  	    object-fit: cover;
  	    object-position: 30% 40%;
  	  }
  	}
  }

  twitter__userProfileImage 라는 클래스명을 위와 같이 줘도 되지만, 깊이가 너무 깊어지기에… 가독성이 떨어질 수도 있어서, 가급적 아래와 같이 사용하는 것이 좋다! 다만, 아래와 같이 사용할 경우, 연결되어 있는 속성을 근처에 기입하여, 누구나 코드를 이해하기 쉽게 작성하는 것이 좋다! 🙂
  

.twitter{
  &__userProfile{
    shape-outside: circle(50%);
    float: right;
    width: 20%;
    max-width: 110px;
    height: 110px;

    // &Image{} 이렇게 쓰면 너무 깊어져서 가독성이 떨어질 수 있음
  }

  &__userProfileImage{
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% 40%;
  }
}

🤔추가 학습이 필요한 내용

---

• Viewport에 따라서 폰트 사이즈 크기 조절하는 방법
• : focus-visible, :focus-within 관련 속성
• font-smothing 속성

💡 내일은, 간단한(?) 팀별 프로젝트가 진행됩니다 ㅎㅎ 1주차 팀원들과의 넷플릭스 클론 이후, 2주차가 되면서 새로운 팀원들과 함께하는 작업이라 기대가 됩니다! 😊 🥰

공부하다 추가할 내용이 있으면 추가하겠습니다! 🚙