분류 전체보기390 [컴포넌트 소개] flex VS grid VS hstack #layout 지난 포스팅에서 가장 기본적인 wrapping component인 rx.box와 rx.fragment를 소개했습니다. 하지만, 기본적인 스타일(예를 들면 가운데정렬이나 컴포넌트 간격 조절 등?)만 적용하려고 해도 코드라인이 길어집니다. reflex에서는 이런 작업의 편의를 위해 rx.flex, rx.container, rx.center, rx.stack, rx.vstack, rx.hstack, rx.grid 등 다양한 컴포넌트를 다양하게 제공하고 있습니다. rx.center rx.center는 rx.box의 자식컴포넌트를 중앙으로 정렬해주고 flex-box가 적용되며, 아래의 CSS가 기본적으로 적용되어 있습니다. { display: -webkit-box; display: -webkit-flex; dis.. 2023. 9. 24. [컴포넌트 소개] rx.box vs rx.fragment #layout rx.box는 가장 기본적인 태그와 같습니다. 특정 컴포넌트를 태그로 한 겹 감싸주는 기능 외에 아무 스타일도 적용되지 않습니다. rx.box와 거의 동일한 컴포넌트로 rx.fragment가 있습니다. rx.box와 rx.fragment의 차이는 딱 한 가지입니다. rx.box는 로 변환되어 그 안의 컴포넌트들을 한 겹 감싸주는 데 반해, rx.fragment는 (렌더링 후를 보면) 어떤 태그로도 감싸져 있지 않다는 점입니다. 그래서 rx.fragment에는 (당연히) 어떤 prop이나 이벤트 트리거도 적용되지 않습니다. rx.box의 렌더링 결과 rx.fragment의 렌더링 결과 그밖에 rx.box와 유사한 컴포넌트들 rx.box에 아주 조금씩 스타일이 추가적용된 컴포넌트들로 rx.center, rx.. 2023. 9. 24. [컴포넌트 소개] rx.span #typography 1. rx.span이란 rx.span 컴포넌트는 줄바꿈을 하지 않고 라인 내 특정 텍스트에만 스타일을 적용할 수 있습니다. 렌더링 후에는 기본적으로 요소로 바뀝니다. 또한 rx.span 대신 rx.text("text", as_="span")으로 을 구현할 수도 있습니다. 2. 이전에 소개한 컴포넌트 2023.09.22 - [REFLEX 튜토리얼] - [컴포넌트 소개] rx.text #typography [컴포넌트 소개] rx.text #typography 1. rx.text란 rx.text 컴포넌트는 파이썬의 문자열을 웹에 표시하기 위한 기본 단위입니다. 렌더링 후에는 요소로 변환됩니다. 특정 속성을 부여하고 싶지 않다면 index 함수 내에서 rx.text("Hello world!") martinii... 2023. 9. 22. [컴포넌트 소개] rx.heading #typography 1. rx.heading이란 rx.heading 컴포넌트는 파이썬의 문자열을 "제목(heading)"으로 표시해줍니다. 렌더링 후에는 기본적으로 요소로 바뀝니다. 2. 크기조절 rx.heading 또한 rx.text와 마찬가지로 font_size 파라미터로 크기를 조절할 수 있으며, as_ 파라미터로 부터 까지 태그 변환도 가능합니다. 또한 내부적으로 rx.box 컴포넌트와 동일하게 작동하므로, rx.box에 부여할 수 있는 속성을 동일하게 rx.heading에도 적용할 수 있습니다. 3. 특정 라인수를 넘어갈 때 자르고 싶다면? 위의 예시에서 보시다시피 rx.heading에도 (rx.text와 마찬가지로) no_of_lines라는 속성(prop)이 있어서 (noOfLines로 사용해도 됩니다) 긴 제목.. 2023. 9. 22. [컴포넌트 소개] rx.text #typography 1. rx.text란 rx.text 컴포넌트는 파이썬의 문자열을 웹에 표시하기 위한 기본 단위입니다. 렌더링 후에는 요소로 변환됩니다. 특정 속성을 부여하고 싶지 않다면 index 함수 내에서 rx.text("Hello world!") 대신 "Hello world!" 라고 사용하셔도 결과는 (거의) 동일해 보이기는 합니다. rx.text로 렌더링한 결과 Hello world! 일반 문자열로 렌더링한 결과 Hello world! 2. 크기조절 rx.text는 font_size 파라미터로 크기를 조절할 수 있습니다. 3. 특정 라인수를 넘어갈 때 자르고 싶다면? rx.text에는 no_of_lines라는 속성(prop)이 있습니다. 긴 텍스트를 표현해야 할 때, 레이아웃이 깨지는 것을 방지하기 위해 특정 라.. 2023. 9. 22. [원데이클래스 안내] 9.2(토) 동대구역 앞 보고서 작성 자동화 원데이 클래스 처음으로 공지포스팅을 올려봅니다. 9월2일 토요일 오후 2시 동대구역 인근에서 보고서 작성 관련 업무자동화 튜토리얼로 원데이클래스를 진행하게 되었습니다. 이번까지만 오프라인으로 진행하고, 앞으로는 줌 등으로 온라인 과정도 개설하겠습니다. 접수는 온오프믹스 플랫폼을 활용하오니, 관심 있으신 야근러 분들의 많은 참여 바랍니다^^ 입문자를 대상으로 커리큘럼을 짰지만, 참석하신 분들의 수준을 고려하여 유연하게 커리큘럼 수정 예정입니다. 2023. 8. 31. 파이썬으로 avif 이미지를 png로 변환하는 방법 # %pip install pillow-avif-plugin Pillow from PIL import Image import pillow_avif img = Image.open("input.avif") img.save("output.png") 2023. 8. 16. 지극히 개인적인 파이콘2023 참석 후기입니다. HTML 삽입 미리보기할 수 없는 소스 2023. 8. 15. wsl에서 파이참 터미널 열 때 가상환경 자동 활성화하는 방법 오랜만에 포스팅을 남깁니다. 최근 reflex(구:pynecone) 관련 스터디를 하면서, 파이참 - 윈도우 터미널에서는 자동으로 가상환경이 활성화되는데 wsl 환경에서는 터미널을 열 때마다 가상환경을 직접 activate 해줘야 하는 부분이 불편했습니다. 다행히 스택오버플로와 젯브레인스 블로그 등을 참고해서 wsl터미널을 열 때마다 가상환경을 자동 활성화하는 방법을 찾아 적용하기 쉽게 정리해보았습니다. 아래 세 단계만 따라하시면 됩니다. 1. (당연하지만) 가상환경을 생성합니다. 저는 ~/.virtualenvs/venv 안에 가상환경을 만들어보았습니다. 2. ~/.pycharmrc 파일을 생성합니다. (파일명은 중요하지 않습니다.) 내용은 아래와 같이 두 줄을 입력합니다. source ~/.bashrc.. 2023. 8. 15. 이전 1 2 3 4 ··· 44 다음
