Tistory Cyworld Minihompi UI Skin 개발예전 싸이월드 미니홈피의 UI 를 비슷하게 구현해본 스킨입니다. 이번이 3번째 스킨 개발이네요. 싸이월드 미니홈피를 스킨 개발 대상으로 고른 이유는?다들 예전에 싸이월드 미니홈피를 많이 이용하셨을 거라 생각됩니다. 하지만 예전에 기억하고 있던 그 미니홈피의 모습으로는 이제 운영되지 않는 걸로 알고 있어서, 예전 미니홈피의 모습대로 유사하게 티스토리 블로그 스킨을 만들면 이것 역시 재밌을 것 같아 스킨 개발을 진행해보게 되었습니다. 스킨 특징자체 개발한 [@wisdomstar94/torytis](https://github.com/wisdomstar94/torytis) 프레임워크를 사용하여 개발되었습니다.개발시 scss 와 [TailwindCS..

Tistory Discord UI Skin 개발Discord 느낌을 최대한 살리면서 개발한 티스토리 스킨입니다. Stroke 스킨에 이어 이번이 두번째로 만든 티스토리 스킨이네요. 왜 스킨 개발 대상으로 디스코드를 골랐나?제가 예전에 세븐나이츠 라는 모바일 게임을 엄청 즐겨 했었는데, 아쉽게도 최근에 서비스 종료를 하게되었습니다. 그런데 세븐나이츠가 세븐나이츠:리버스 라는 이름으로 리메이크 되고 있다는 소식을 접했고 해당 커뮤니티가 디스코드로 운영되고 있었습니다. 디스코드 UI 를 보고 나니 이걸 티스토리 스킨으로 만들면 재밌을 것 같단 생각에 스킨 개발을 시작하게 되었습니다. 스킨 특징이전에 공개했던 Stroke 스킨의 특징과 크게 유사합니다. 한가지 차이점이라고 한다면 Stroke 는 현재 화면 사이..

회사 내에서 운영되는 여러 프로젝트에서 공통으로 사용되는 패키지 같은 경우는 별도 저장소에 배포하여 각각의 프로젝트들이 해당 저장소에서 패키지를 내려 받아 사용하게 하는 것이 좋을 수가 있습니다. 직접 저장소를 구축할 때 여러 방법이 있겠지만, 여기서는 Nexus 를 이용하여 저장소를 구축 및 환경 설정 하는 방법에 대해 공유 드리고자 합니다. Nexus 도커 이미지 빌드 및 컨테이너 실행Nexus 를 직접 서버에 설치하고 환경 설정을 해주는 방법도 있겠지만, 여기서는 도커 이미지를 활용하는 방법을 공유드리겠습니다. 1) https://github.com/sonatype/docker-nexus3/blob/main/Dockerfile위 Dockerfile 을 다운로드 받습니다.2) 터미널을 실행 후, 위 ..

안녕하세요. 이번에는 원형으로 휠을 하며 항목을 선택할 수 있는 컴포넌트를 개발해 보았습니다. 패키지 설치 방법 npm i @wisdomstar94/react-circle-wheel-select-box 테스트 영상 및 사용 예제 확인 https://github.com/wisdomstar94/react-circle-wheel-select-box 의 README.md 파일을 참고해주세요. 개발 시 참고 UI 아래와 같이 네이버에서 사용중인 원형 UI 를 참고하여 비슷하게 직접 구현해보았습니다. 고려 사항 포인터가 시작된 지점과 휠 컨테이너 중앙 지점에 대한 좌표와 역탄젠트 함수를 이용하여 각도를 계산하고 그 각도만큼 항목들을 회전 시켜주어 휠을 구현하였습니다.

[ utility class 란? ] 각각의 클래스들을 정적으로 하나 하나씩 작성하는 것이 아니라, 하나의 코드로 여러 클래스들을 동적으로 생성하는 방식을 유틸리티 클래스라고 할 수 있습니다. CSS 프레임워크인 TailwindCSS 가 이러한 유틸리티 클래스 방식을 사용하고 있는 대표적인 사례라고 할 수 있습니다. [ 예시 ] 1. 다음과 같이 scss 파일을 작성합니다. -- index.scss $alignments: ( "center", "space-between", "space-around", "space-evenly", "flex-start", "flex-end" ); @each $align in $alignments { .justify-#{$align} { justify-content: #{$..

최근에 제가 만든 티스토리 "Stroke" 스킨이 2023년 8월에 v0 으로 처음 공개되었고, 2023년 10월에 v1 이 릴리즈 되었습니다. 이번 글에서는 Stroke 스킨을 만들면서 겪었던 과정들을 소개해드리고자 합니다. 티스토리 스킨을 만들어보고 싶다! 티스토리 블로그를 운영하면서 계속 아쉬웠던 부분이 스킨이었습니다. 이용자 제작 스킨 페이지에서 다른 분들이 만들어주신 스킨들을 쭉 탐색해 보았지만 제 마음에 쏙 드는 스킨이 없었습니다. 그래서 이참에 제가 직접 티스토리 스킨을 만들어보고 싶었습니다. 티스토리 스킨 치환자 동작 방식에 대한 적응 검색을 해보니 티스토리에서 스킨 개발 시 필요한 가이드 문서를 제공해주고 있었습니다. 티스토리 스킨은 치환자를 이용하여 제작하게 되는데, 처음에는 이 치환..

CSS 우선순위는 제일 높은 것에서 제일 낮은 것으로 나열한다면 !important -> inline style -> id selector -> class selector -> tag selector -> css combinators 순 이라고 할 수 있습니다. 우선순위 1. !important !important 가 명시된 css 속성이 우선순위가 제일 높습니다. .my-selector { background-color: #f00 !important; } 2. inline style 그 다음으로는 inline 에 작성된 style 이 우선순위가 높습니다. 3. id 선택자 그 다음으로는 id 선택자가 우선순위가 높습니다. #my-selector { background-color: #f00; } 4. c..

따듯하게