예전글



사실 5월 중에 기본적인 작업은 끝났고, 오픈소스 대회에 참여해 눈먼 돈 타먹을려고 했는데..

접수기간을 까먹는 통에 ㅠㅠㅠ


암튼 귀찮아서 미루고 미루다가 최근에 다듬고, 문서화 작업을 해봤습니다.



원리


쓸데없을 정도로 자세하게 설명해놨읍니다.


저번 글에도 설명했지만, 각도를 이용해 각 장치별 적합크기를 만들어줄 수 있습니다.


이때 필요한 정보는

  • 화면과의 거리(10cm)
  • 화면의 크기(Inch)
  • 가로 해상도(Pixel)
  • 세로 해상도(Pixel)

며, 친숙한 단위들이 기준입니다.


당연하지만 기본값들은 제공됩니다.

Phone Tablet Laptop Desktop High-resolution 총 5가지로 이루어져 있고요.

표준 기기를 정하기 애매하다보니 다음버전에 기본값의 변동이 생길 수 있겠습니다.

잘 아시는 분은 조언 좀.





그 후, 각 장치별 적합크기 사이는

  • calc(시작크기 + 계산된vw)

로 실시간 리사이징이 가능하도록 만들 수 있습니다.


사용방법

tag {

@include property($크기, $최대크기);

// 또는

@include property($크기, (옵션: 값));

}

처럼 쓰면 됩니다.

매우 간단해요.


예를 들어 다음처럼 바꿀 수 있겠네요.




옵션시스템도 간편합니다.

변수를 사용해 기본값을 설정하는 글로벌 옵션과,

함수의 인수 형태로 현재값을 설정하는 스코프드 옵션이 있어요.


현재 크기조절 방식(정적, 유동적), 기준장치, 결과 단위, 최소/최대 크기, 크기 제한 방식을 골라서 적용 가능합니다.

https://github.com/black7375/Fluid-Size/wiki/API#options




후기?

SCSS에 람다함수가 없고, 함수가 1급 객체에 속하지 않아서 힘들었...

마음에 들었으면 별이나 ㅎㅎ

만약 버그나 오류, 더 참고할 자료같은게 있다면 깃허브 이슈 열어주세요.


아마 폰트 위주로 적용하게 될텐데,

처음에 JS 접할때 만든 확장 프로그램(선명하게 만들어줌) 문서를 보면

저의 폰트에 대한 집착?을 알 수 있읍니다.