본문 바로가기

Programming/FrontEnd14

[CSS] Vanilla Extract 사용방법 💡 시작하며 현재 사이드 프로젝트를 진행하고 있는데, 프론트엔드 CSS 아키텍처를 선택할 때 Vanilla-Extract를 사용하기로 해서 사용 방법을 공부하고 정리해두려고 한다. 👍🏻 Vanilla Extract 장점 우선 Vanilla Extract는 아래와 같은 장점이 있다. 빌드타임에 ts 파일을 css 파일로 만든다. (CSS Modules-in-TyepScript) type-safe하게 theme을 다룰 수 있다. 프론트엔드 프레임워크에 구애받지 않는다. Tailwind처럼 Atomic CSS를 구성할 수 있다. Sttitches 처럼 variant 기반 스타일링을 구성할 수 있다. ⚙️ Vanilla Extract 사용 방법 0️⃣ 설치 vanilla-extract를 설치한다. npm ins.. 2023. 7. 31.
[OpenAI] 음악 추천 서비스 만들어보기 (React) 2.5부 오늘은 2부에 이어서 가볍게 2.5부로 리팩토링을 진행해보도록 하겠습니다. 원래 다음 포스팅은 3부로 기분 / 날씨 / 장르 등 키워드를 선택하여 노래 추천받는 기능 및 디자인까지 마무리 지으려고 했는데, 중간점검할 겸 조금이나마 정리된 코드를 공유하려고 합니다. 2부 포스팅은 아래를 클릭하면 볼 수 있습니다. [OpenAI] 음악 추천 서비스 만들어보기 (React) 2부 오늘은 저번에 이어서 OpenAI 를 사용한 서비스를 만들어보겠습니다. 1부 포스팅은 여기에서 볼 수 있습니다. 1부: https://bolob.tistory.com/entry/OpenAI-%EC%9D%8C%EC%95%85-%EC%B6%94%EC%B2%9C-%EC%84%9C%EB%B9%84%EC%8A%A4-%E bolob.tistor.. 2023. 3. 21.
[OpenAI] 음악 추천 서비스 만들어보기 (React) 2부 오늘은 저번에 이어서 OpenAI 를 사용한 서비스를 만들어보겠습니다. 1부 포스팅은 여기에서 볼 수 있습니다. 1부: https://bolob.tistory.com/entry/OpenAI-%EC%9D%8C%EC%95%85-%EC%B6%94%EC%B2%9C-%EC%84%9C%EB%B9%84%EC%8A%A4-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0-React-1%EB%B6%80 [OpenAI] 음악 추천 서비스 만들어보기 (React) 1부 오늘은 ChatGPT에 사용된 OpenAI를 사용해서 음악 추천 서비스를 만들어보려고 합니다! 어떻게 만들면 되는지 과정을 기록해보고 공유해보겠습니다. OpenAI 가이드를 따라서 하면 어렵지 않게 서비스 bolob.tistor.. 2023. 2. 22.
[OpenAI] 음악 추천 서비스 만들어보기 (React) 1부 오늘은 ChatGPT에 사용된 OpenAI를 사용해서 음악 추천 서비스를 만들어보려고 합니다! 어떻게 만들면 되는지 과정을 기록해보고 공유해보겠습니다. OpenAI 가이드를 따라서 하면 어렵지 않게 서비스를 만들 수 있습니다. 아래 OpenAI 링크에서 가이드를 확인할 수 있어요. OpenAI 링크: https://platform.openai.com 0. 먼저 Api Key를 발급받아 저장해둡니다. 첫 번째 발급받을 때에는 영구히 유지할 수 있는데, 두 번째 발급부터는 기간이 있다고 하니 나중에 만료일자 신경쓰지 않아도 되도록 잘 저장해두어야겠어요. 저는 메모장과 노션에 따로 저장해두었습니다. 1. 먼저 저는 빠른 세팅을 위해서 CRA로 React 프로젝트를 생성해주었습니다. 음악 추천 서비스이니 이름은.. 2023. 2. 18.
[CSS] Flexbox의 여러 활용법 정리 Flexbox란? 뷰포트의 요소의 크기가 불명확하거나 동적으로 변할 때에도 유연하고 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃으로, 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다. Flexbox의 구성 Flex container(부모 요소)와 Flex item(자식 요소)로 구성된다. Flex container(부모 요소) 속성: flex-direction, flex-wrap, justify-content, align-items, align-content Flex item(자식 요소) 속성: flex, flex-grow, flex-shrink, flex-basis, order .flex-container { display.. 2021. 8. 31.
[HTML] <table>의 row index와 cell index 구하는 법 백오피스 웹페이지 등에서 태그를 써서 테이블 / 표 UI를 구현하였을 때, 특정 항목의 row가 몇 번째인지 값을 가져와야 할 때가 있다. 그런데 어떻게 가져오면 될까? 테이블에서 방금 클릭한 row가 몇 번째인지 구해보자 tr rowIndex const clickTableItem = (e) => { const rowIndex = e.target.closest("tr").rowIndex; ... } ... onClick={(e) => clickTableItem(e)} ... 방금 클릭한 항목의 row Index를 구해보았다. 잘 나오는 것을 확인해보자. 테이블에는 row도 있지만, column도 있다. 그렇다면 특정 항목의 column이 몇 번째인지는 어떻게 알 수 있을까? 테이블에서 방금 클릭한 cel.. 2021. 7. 23.
[CSS] 크로스 브라우징 시 필요한 css 접두어 webkit, moz, ms, o 의 의미 크로스 브라우징을 위해 필요한 CSS 접두어 정리 -webkit-: 구글, 사파리 -moz-: 파이어폭스 -ms-: 익스플로러 -o-: 오페라 2021. 7. 23.
[CSS] 한 걸음 더 CSS: 코딩가나다 오버플로우(overflow) index8.html blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah style8.css body{ background-color: #ddd; } .box{ background-color: white; /*float된 left,right는 위에 떠있기 때문에 box는 float된 요소의.. 2019. 12. 17.
[CSS] 한 걸음 더 CSS: 코딩가나다 상속(Inheritance) style7.css /*상속이 되는 color, 상속이 안 되는 border 웹 초창기때부터 a태그의 글씨색은 기본 보라색으로(읽음표시) 노출됨 색을 바꾸려면 지정된 색으로 만들어줌. */ a{ text-decoration: none; /* 밑줄 없애기 */ color: inherit;/* 부모로부터 상속! 주의점: 인터넷 익스플로러 6,7버전에선 호환 안됨*/ } button{ font: inherit; } .box h1{ color: firebrick; } .box h1:before{ content: ' '; display: inline-block; background-color: currentColor;/*주의점: 인터넷 익스플로러 6,7,8버전에선 호환 안됨*/ width: 20px; height.. 2019. 12. 17.
[CSS] 한 걸음 더 CSS: 코딩가나다 버티컬 얼라인(세로 정렬, vertical-align) 예제1. index6.html style6.css body{ background-color: #999; } .wrapper{ background-color: blanchedalmond; width: 960px; height: 400px; line-height: 400px; /*한 줄 height를 전체 height로 잡아주면 vertical-align 세로 middle 성공!*/ text-align: center; /*여기서 text-align으로 좌우 center로도 만들어주기*/ margin: 0 auto; } .box{ display: inline-block; /*inline 속성을 포함해야 vertical-align의 middle이 의미 있어짐*/ background-color: green; wi.. 2019. 12. 16.
[CSS] 한 걸음 더 CSS: 코딩가나다 마진 병합(Margin Collapsing) index5.html Kim Lee Park Section #1 Section #2 Kim Lee Park's Profile style5.css .header h1{ background-color: #999; color: white; } .section { background-color: white; border: 1px solid #999; margin: 20px; padding: 20px; } .footer{ background-color: #eee; text-align: center; padding: 10px; color: #999; } 마진 병합 현상 인접해있는 block 요소끼리만 일어난다. 상하단으로만 일어난다. 문제가 될 수 있는 상황 예시 a b .parents{ background-col.. 2019. 12. 16.
[CSS] 한 걸음 더 CSS: 코딩가나다 라인하이트(줄 간격, line-height) index4.html Let's code! Coding is fantastic. I love it. style4.css .cover{ background-image: url(code.jpg); background-size: cover; background-color: #336699; height: 50vh; } .contents h1 { text-align: center; line-height: normal; /*폰트 종류에 따라 다르다.*/ color: white; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size: 80px; margin-top: -1em; /*font-size에 따라 맞춰 달라지게 하려면.. 2019. 12. 16.

티스토리툴바