[내일의 집] scss - 모듈 Module

1. Placeholder

1. 무엇 : mixin과 비슷한 용도이지만, 전역에서 아무때나 불러내는 mixin과 다르게
   • (1)요소들의 공통 스타일을 선언해두고 각 요소에 삽입해 상속받는 식으로 사용
   • (2)css로 들어갈 때 공통 스타일만 따로 묶여서 들어감 (mixin처럼 각 요소 밑에 매번 적히지 x)
   • (3) 인자를 받을 수 없음
2. 문법
   1. 선언 : %이름 { //공통스타일// }
   2. 호출 : .요소 { @extend %이름; }

2. 자주 사용하는 components를 module로 만들기

1. 기본
   1. 분류별로 공통점을 먼저 파악해서 placeholder를 만들고, 특수하게 적용되어야 하는 style을 밑에 각각 선언
   2. inline요소들은 스타일이 깨지기 쉬우므로 적용하기 전 일단 display: block;으로 설정하기.
2. tags: 글씨 길이에 따라 유연하게 늘어나야 하므로 block이나 flex보다는 inline-block, inline-flexbox와 padding 활용
3. 별점: icon font를 이용해 별 다섯 개를 하나의 div로 묶고, 모두 적용되는 style과 별 각각이 .is-active일 때의 style 만들어주기
4. 프로필사진
   • img에 스타일을 줄 때는 뭐든 상위에 감싸는 요소를 두도록 하자. 예민해서 어떻게 틀어질 지 모르기 때문. 공식적으로는 inline이지만 inline-block처럼 행동함.
   • 상위 block에서 형태를 정한 뒤 overflow: hidden 으로 삐져나온 부분 숨긴 뒤, img에서 object-fit: cover 로 채우면 background-image 설정한 것과 같은 효과.
5. 가격: 가격처럼 특수한 텍스트들은 미리 constants로 선언한 폰트 규격과 안 맞을 수 있음. 꼼꼼히 체크해 특이사항은 placeholder 밖에서 선언하기
6. 버튼
   1. 보통 style / size / states(normal, hover, active, disabled) 에 따라서 바뀌므로 전부 체크해야 한다. 시안에서 버튼을 변화시키는 요인(연관된 요인)이 무엇인지 파악해 구분하고, style에 관한 placeholder를 선언할 때는 딱 style에 관해서만 넣기
   2. 버튼계의 김나박이: 스타일에 따라 fill, outlined, ghost 가 이름으로 자주 쓰임
   3. 상태에 따른 변화 : 스타일에 많이 의존하므로 스타일 placeholder에 가상선택자로( &:hover ) 지정. hover와 disabled 중복되어 하나가 덮어씌워지지 않도록 주의.
   4. +@ transition : background-color 200ms ease-in-out;
7. 폼(input, select)
   1. select 더보기 아이콘 설정
      
      1. user agent stylesheet가 기본적으로 appearance 속성을 넣어 둠. none으로 초기화.
      2. 아이콘폰트로 버튼 만든 뒤 position:absolute로 select상자 내부에 위치.
      3. pointer-events : none; 설정하면 클릭 시 select 옵션창 안 열리는 현상 제거 가능. 
   2. select 항목 이름이 길 때
      1. 이름이 더보기 아이콘 영역까지 침범하지 않도록 padding-right
      2. 이름이 똑 잘리지 않도록 text-overflow: ellipsis; 적용. (...으로 표기)
   3. select 선택순서 표기 (active) : js에서 선택이 필요한 사항을 순서대로 강조할 수 있도록 강조 style을 만들어 놓자
   4. input: &::placeholder로 내부 텍스트에 스타일 적용 가능
8. 페이지네이션
   1. 각 버튼별 공통 %placeholder 스타일 만들기. 앞으로/뒤로 버튼은 없을 수 있다는 것 고려하기.
   2. 버튼 display는 숫자가 커질 것을 고려해 inline-flexbox와 min-width의 조합 사용
   3. 각 숫자들끼리 flexbox, 앞으로/뒤로 버튼과도 다시 flexbox