HTML,CSS,JS4 tailwindcss 클래스 정렬 플러그인 설치 npm install -D prettier prettier-plugin-tailwindcss 해당 플러그인은 tailwindcss 공식 Prettier 플러그인입니다. 클래스명을 tailwindcss가 정한 기준대로 나열해주니 한결 코드가 깔끔해지는걸 느낄 수 있습니다. formatting 적용 예시 ... ... 문서에 따르면 컴포넌트 레이어 -> 유틸리티 레이어 순으로 정렬시키고 있다고 합니다. margin이나 padding처럼 top bottom left right 특정 위치만 스타일을 주는 경우에, 전체적으로 스타일을 주는 margin이나 padding 뒤에 오도록 정렬합니다. ... 유틸리티 레이어들의 클래스명 정렬 순서는 박스가 하나 있다고 생각하고, 해당 클래스를 통해 박스가 레이아웃에.. 2022. 3. 13. CSS를 완전히 이해했다 - 번역 Jotai를 알게되고 일본의 테크 블로그 플랫폼인 Zenn을 간간히 보고있는데 오늘 본 해당 글이 흥미로워서 번역해봤습니다. 어느날 봤던 CSS를 완전히 이해했다를 우리는 아직 모른다. 일본 엔지니어세계에서의 「〇〇 완전히 이해했다」 라는 말은 실제로 이해했다는 의미가 아닌 경우가 많습니다. 일본어 어렵네요... (*실제로 블로그에 있는 말.) 「〇〇 완전히 이해했다」 의 가장 유명하다고 해도 과언이 아닌 것으로선 「CSS를 완전히 이해했다」가 있습니다. 이건 아래 사진처럼 T셔츠도 팔고 있습니다. 이걸 본 저는 몇개의 의문이 생겼습니다. CSS를 완전히 이해하지 않아서, 이런 모양이 되었는가? CSS를 아는 사람이라도 이런 모양을 만드는게 역으로 어려울까? 의도적으로 이런 모양을 만드는 것은 매우 어려.. 2021. 10. 25. JS Date.now() timestamp 날짜 처리 JS로 데이터 생성시간을 저장하기 위해 {createdAt: Date.now()} 형태로 저장시켜주었습니다. 이렇게 저장시키면 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 ms를 반환합니다. 해당 데이터를 다시 가져올 때, 보기 좋게 변환시켜주기 위해 아래와 같이 작성했습니다. timestamp 변환 예시 const createdAt = 1626081551593; const timestamp = new Intl.DateTimeFormat("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", }).format(createdAt); 이렇게 설정할 경우에는 2021. 07. 1.. 2021. 8. 20. VanillaJS로 Modal 창 만들기 1. index.html body 상단에 div를 하나 만든다. 2. js에서 showModal() 함수 작성 export const showModal = (message, callback) => { //모달 내용을 modal-overlay div안에 추가 //modal-overlay-backgroud는 배경 클릭했을 때, 모달 닫게 해주기 위해 만듬. document.getElementById('modal-overlay').innerHTML = ` ${message} OK `; //modal-overlay div에 active클래스를 추가해 display 보이게 함. document.getElementById('modal-overlay').classList.add('active'); //modal-ov.. 2021. 8. 13. 이전 1 다음
