TIL 검색 결과

해당 글 108건

2022-10-04 TIL Flex break line, word-wrap && word-break, scrollbar width

이런식의 flex 1 - 2 - 2 짜리 Flexbox면서, flex item이 overflow했을때 line break해주는 것을 구현했었는데 생각보다 애를 먹었었다. overflow가 되지 않고 flexbox 자체가 깨졌기 때문... 이렇게 되는 이유는 flex-item의 기본 min-width는 auto인데, auto인 경우에는 기본적으로 content의 min-width가 되기에 더 작아지지가 않음. 그래서 깨졌던 것인데, min-width를 0으로 설정해주면 width가 줄어들수 있으므로 overflow가 정상적으로 된다. 혹은 word-break:break-all 속성을 사용해도 된다. 조심해야할점은 word-wrap 속성을 사용하면 의도대로 되지 않을수도 있다는 것 work-wrap: bre..
TIL 2022. 10. 5. 00:15

TIL 2022-09-04 TailwindCSS Svelte

Svelte 프로젝트에 Tailwind CSS를 적용하기로 하였다. 가장 큰 이유는 Svelte의 inline style에서의 하위 컴포넌트로의 상속이 안되는데, Tailwind에서는 classname만 넘겨주면 알아서 style를 적용해주기 때문... 뭐 Tailwind 식 스타일링의 장점이라고 하면 - 클래스 이름을 의미있게 지을 필요 없음 - HTML, CSS 오갈 필요 없음 - 빠르게 쓸수 있음 등이 있겠지만.... 물론 클래스네임 시맨틱하게 적는게 상당히 머리 아픈 일이긴 한데, 최근에 많이 사용하고 있는 css module 같은 경우에는 모듈 단위로 나누면 되니 그렇게까지 긴 클래스 네임을 가지는 일은 드문거 같다. HTML CSS가 한번에 붙어있는것은 솔직히 양날의 검인데, 한눈에 볼수 있다..
TIL 2022. 9. 4. 23:26

TIL 2022-08-30 Svelte SVG styling Best Practice?

SVG를 붙이는 작업을 하고 있었는데, SVG안에 CSS를 적용할 일이 생겼다. (사실 적용 안할 일이 적을거 같지만...) 기존에 나는 SVG를 .svelte 파일로 선언해 컴포넌트처럼 사용하고 있었다. 따라서 해당 SVG svelte 파일에 ~~~ 이렇게 class를 인자로 받을수 있도록 설정해준 뒤 이런 구조를 통해서 스타일링을 적용하려고 했는데 불가능했음! 정확히는 class는 적용되지만 그에 맞는 CSS는 적용되지 않는 상태 이는 Svelte 에서는 자식 컴포넌트에 CSS를 보내주지 않기 떄문에 일어남. 왜 안보내주는가? 자식 컴포넌트가 하나의 루트 요소로 둘러쌓여있을 필요가 없기 떄문임. 그래서 자식 컴포넌트로 보내는 CSS는 unused가 떠서 제거됨. 그러면 어떻게 해야하는가? 위의 구조로..
TIL 2022. 8. 30. 23:54

TIL 2022-08-30 Svelte 어제 궁금증 해결 및 디자인 고민

어제의 궁금증 div Posts +each('posts as post') a(href="{post.url}") {post.title} 이렇게 lang 을 일일히 작성해주는게 귀찮은데 default로 불러올순 없을까? https://github.com/sveltejs/svelte-preprocess/issues/362 Svelte-preprocess에서 있었으나 Deprecated 된 내용 왜 Deprecated? 이거 설정하면 Editor SCSS code Syntax highlight에서 맛이 가버리는 경우가 잦아서 오히려 손수 작성하는거보다 디버깅하는데 시간이 오래 걸릴거 같음. Deprecated하기 전에도 어지간해선 쓰지 말라고 했었음. It is generally not recommended t..
TIL 2022. 8. 30. 00:15

TIL 2022-08-05 가변폰트, Svelte 한숟가락

가변 폰트 가변폰트 이전에는 각 스타일은 다른 폰트 파일로 나눠져 있었음(Font-Bold, Font-Light 등등...) - 각 파일을 받는데 페이지 렌더링 및 지연 시간 가변폰트 있으면 이제 하나의 파일에서 Import하기만 하면 됨 굿 가변 폰트에서는 Weight, Width 등의 축으로 조절해 폰트를 가꿀수 있음.... Italic 여부, 글자 기울기 등도 Axis로 사용하기도 함 Svelte Html 상에서 Variable 반복 {#each cats as cat} {cat.name} {/each} https://svelte.dev/tutorial/each-blocks each 문으로 해결할수 있음 Logic / Each blocks • Svelte Tutorial Logic / Each blo..
TIL 2022. 8. 27. 23:21

TIL 2022-08-14 Chrome Extension V3

Chrome Extension V3 Chrome Extension이 V3로 올라오면서 manifest를 작성하는 방식이 바뀌었다. - 네트워크 요청 수정하는 방법을 새로운 NetRequest API가 대체함 직접 요청을 수정하는 대신 크롬이 요청을 평가하고 수정하도록 함. Extension이 수정할 요청의 pattern rule을 설정하고 이 요청에 따라서 크롬이 네트워크 요청을 수정함. 이런 방식으로 host permission을 써야할 필요를 없애줌. - Promise 지원 잘해줌 - browser_action -> action - tabs.executeScript()로 임의의 코드를 실행할수 있었는데 이제 임의 코드 실행을 허용하지 않고 scripting.executeScript() static f..
TIL 2022. 8. 14. 22:59