단거 - content: attr(data-xxx) CSS 속성과 함께 제공되는 attr() 함수를 이용해 데이터 처리하기입니다. * data 속성은 접근성 이슈가 있으니 상황에 따른 선택 사용이 필요. HTML 뱃지 버튼 태그 내 data-num 이란 커스텀 속성을 사용 CSS .btn-badge { position: relative; padding: 6px 10px; line-height: 1; border: 0; outline: 0; background: #000; color: white; &::after { position: absolute; content: attr(data-num); top: -1rem; right: -1rem; display: flex; justify-content: center; align-items: center; widt.. 더보기 필요해서 만드는 블로그 - Gtihub Pages + Jekyll (Windows) 세팅 정말 간만에 포스팅이네요. 도시로 리턴 후 이런 저런 플젝을 거치며 정신없이 벌써 1년 반이 지나고 상황의 변화도 생겨 "미뤄오던 포폴 정리를 해볼까?" 하고 가장 손이 덜 가며 비용 지출 덜 한 방법을 찾다 보니 별도의 호스팅(클라우드) 필요없이 github 계정과 jekyll 만으로 간단히 운영 가능한 방법이 있어 바로 시작해 봅니다. 깜박이는 기억의 기록 시작~ (이하 다나까 생략) 설치 환경: Windows 10 github 저장소 잠시.. 개념 핥기 Jekyll 은 정적 사이트 생성기란다. (아.. 뭐래.. 참 정 안가는 용어다) 그냥 html, css로 홈페이지를 만들건데.. 생성, 연결, 관리하는 방법을 제공해 주는 도구 정도? 여튼 사용하면 편한 건 맞다. 도구 없는 삽질 상상... htm.. 더보기 다시 보는 Next.js 공식문서, 그리고 잡썰 언젠가 아주 작은 나노급 개인 플젝을 진행하며 사용했던 Next.js 이번 React 플젝에 UI/UX 마크업 개발자로 투입되면서 SSR 지원 리액트 프레임워크인 Next.js를 다시 만나게 됐다. 물론, 당연히.. 이전의 기억은 모두 Reset 됐기에 이미 컴포넌트 구조가 잡혀있는 개발자의 소스코드 내 마크업을 하자니 나름의 적응기가 필요했고 조금 눈에 익숙해지는 순간에서야 초심으로 Next.js 공식 문서 Learning 코스를 다시 보는데.. 크롬 한글 번역 완성도도 그렇고 학습 문서의 구성이 너무 잘되어 있어 놀라웠다. 서점에서 훑어보는 개발 서적은 늘 아쉬움이 있어 주로 공식 문서를 찾아보는데 공식 문서가 이렇게 대상을 이해시키기 위한 참신한 구성을 하고 있다니..!! "Next.js 진영 숨은.. 더보기 M1 맥북 Android SDK + Flutter 설치해보기 UI 프레임워크(css flex)를 닮은 플러터 제공 함수 문법으로 레이아웃을 잡았던 기억만 있는 Flutter를 다시 시작해보기로 합니다. 환경설치는 언제나 시행착오가 많은데.. "이런 시행착오의 과정을 패스하고 개발만 할 수는 없을까?" 오픈 소스 진영에서 기술의 빠른 발전 속도가 장점이라면 의존성의 문제는 어쩔 수 없는 아킬레스인 것 같습니다. 각설하고 바로 과정을 기록으로 남겨봅니다. 1. 안드로이드 스튜디오 (Android SDK) 설치 https://developer.android.com/studio?hl=ko 에뮬레이터를 띄우고 빌드를 하려면 안드로이드 SDK 필수 내 OS에 맞는 버전으로 다운로드 후 설치 제 경우 M1 맥북프로에 설치는 별문제 없이 진행됐습니다. 2. Flutter SDK.. 더보기 [VSCode] 애정하는 익스텐션 꾸러미 개인적으로 필수 또는 자주 사용하는 VSCode 익스텐션들 Auto Rename Tag Live Server GitLens Prettier Setting Sync Live Sass Compiler Auto Rename Tag html 태그 시작을 수정하면 닫힘 태그도 함께 수정 https://github.com/formulahendry/vscode-auto-rename-tag GitHub - formulahendry/vscode-auto-rename-tag: Automatically rename paired HTML/XML tag Automatically rename paired HTML/XML tag. Contribute to formulahendry/vscode-auto-rename-tag devel.. 더보기 이전 1 2 3 4 5 다음
