nativescript 에서 height 옵션은 어떤 값일까? style class 로 적용이 가능한지에 대해서
NativeScript에서 height="40"은 DIP 단위다. TailwindCSS로 height를 설정하려면 h-12, h-40 같은 클래스를 사용하면 된다. DIP 변환은 코드 참고.
GGAMI
<GridLayout columns="NativeScript에서 height="40"은 DIP 단위다. TailwindCSS로 height를 설정하려면 h-12, h-40 같은 클래스를 사용하면 된다. DIP 변환은 코드 참고.
<GridLayout columns="이런 레이아웃이 있다고 치자. 그런데 height="40" 이 있다.
근데, 이렇게 입력하는 것 보다는 class에 tailwindcss 로 height 를 설정하고 싶을 때가 있다.
하지만, 도대체 height="40"이 무엇을 의미하는지 알 수가 없었다. rem? em? px? 도대체 뭐인지 궁금할텐데,
여기서 설정되는 값은 정확히 DIP 라고 한다.
그래서 https://github.com/NativeScript/tailwind/blob/main/src/removeUnsupported.js#L127 이 링크를 보면 알 수 있듯이.
// Convert em/rem values to device pixel values
// assuming 16 as the basis for rem and
// treating em as rem
if (decl.value.includes("rem") || decl.value.includes("em")) {
decl.value = decl.value.replace(remRE, (match, offset, value) => {
const converted = "" + parseFloat(match) * 16;
options.debug &&
console.log("replacing r?em value", {
match,
offset,
value,
converted,
});
return converted;
});
options.debug &&
console.log({
final: decl.value,
});
}rem 와 em 을 DIP 계산식에 맞게 수정하고 있음을 알 수 있다.
지금은 nativescript 에 대한 이해도가 낮기 때문에 height 를 입력하겠지만, 나중에는 h-12, h-40 같은 tailwindcss style class 로 사용할 것이다.