HTML, CSS20 Tistory 인쇄 버튼 만들기 (Tistory 글 PDF로 출력) tistory 인쇄티스토리 블로그에 공부 내용을 정리하다 보니 인쇄 기능이 없는 점이 조금 불편했다.플러그인이나 부가 기능을 찾아보았지만 별도의 인쇄 버튼을 제공하는 기능은 보이지 않았다. 그래서 직접 인쇄 버튼을 하나 추가하기로 했다.티스토리의 장점 중 하나는 스킨을 자유롭게 커스터마이징할 수 있다는 점이다.HTML을 조금만 알면 원하는 기능을 직접 추가할 수 있다.HTML / CSS 수정먼저 관리 페이지로 들어간다.스킨 편집관리 페이지 좌측 사이드바에서 꾸미기 → 스킨 편집을 클릭한다.html 수정그 다음 우측의 스킨 편집 화면에서 HTML 편집 버튼을 눌러준다.이제 HTML 탭에서 Ctrl + F (Mac은 Command + F) 로 를 복사해서 검색한다.post-co.. 2026. 3. 14. DOM Element가 기본적으로 제공하는 메서드 DOM Element가 기본적으로 제공하는 유용한 메서드위치/계산 계열getBoundingClientRect()getClientRects()window.getComputedStyle()DOM 탐색/매칭matches()closest()querySelector()querySelectorAll()조작/삽입insertAdjacentHTML()classList.add/remove/toggle/containssetAttribute/getAttributeremove()UX 제어scrollIntoView()focus()animate() 1. getBoundingClientRect()요소의 위치·크기를 뷰포트 기준으로 정확하게 반환.스크롤된 화면에서도 정확한 위치가 필요할 때 필수.2. element.getClientR.. 2025. 12. 11. Tailwind CSS 가이드 Tailwind CSS 종합 가이드TailwindCSS Vite 설정 방법 (v 4.1)1. installnpm install tailwindcss @tailwindcss/vite2. vite.config.js settingimport { defineConfig } from 'vite';import react from '@vitejs/plugin-react';import tailwindcss from '@tailwindcss/vite';// https://vite.dev/config/export default defineConfig({ plugins: [react(), tailwindcss()],});3. index.css import tailwindCSS@import 'tailwindcss';4. t.. 2025. 9. 5. 모던 CSS 가이드 모던 CSS 가이드: 선택자부터 확장 가능한 아키텍처까지이 문서는 CSS의 핵심 원리부터 최신 고급 기능까지, 웹 개발자가 알아야 할 모든 것을 담은 포괄적인 가이드입니다. 단순히 속성을 나열하는 것을 넘어, 각 기능의 철학적 배경과 실제 프로젝트에서 어떻게 전략적으로 활용할 수 있는지에 대한 깊이 있는 통찰을 제공하는 것을 목표로 합니다. 이 가이드를 통해 여러분은 CSS를 단순히 스타일을 입히는 도구가 아닌, 견고하고 유지보수 가능하며 확장성 있는 사용자 인터페이스를 구축하는 강력한 시스템으로 이해하게 될 것입니다.Part I: 캐스케이드의 근본적인 규칙CSS를 효과적으로 사용하기 위해서는 먼저 그 작동 원리, 즉 CSS의 '물리 법칙'을 이해해야 합니다. 이 파트에서는 스타일이 어떻게 결정되고 적용.. 2025. 9. 5. HTML 특수문자(entity) 코드 HTML에서 특수 문자를 표시하기 위해 사용되는 코드입니다.기호엔티티 코드설명<less than (작다)>>greater than (크다)&&ampersand (앤퍼샌드)""double quote (큰따옴표)''single quote (작은따옴표)©©저작권 기호®®등록 상표 기호€€유로 화폐 기호¥¥엔 화폐 기호￦&won;원 화폐 기호✓✓체크 마크××곱하기 기호÷÷나누기 기호→→오른쪽 화살표←←왼쪽 화살표↑↑위쪽 화살표↓↓아래쪽 화살표 줄 바꿈 없는 공백HTML 엔티티 코드는 문자 그대로 표현하고 싶을 때 사용웹 페이지에서 보안적으로 필요한 경우에도 활용 (.. 2025. 3. 5. TailwindCSS TailwindCSS(https://tailwindcss.com/)란? Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.tailwindcss.comCSS를 직접 작성하지 않고 미리 정의된 클래스를 조합하여 스타일을 적용시킨다.장점: 빠른 개발, 유지보수 용이, 중복 스타일 최소화단점: 초반 적응이 필요하고, HTML이 클래스명으로 복잡해질 수 있음.tailwind.config.ts 설정// tailwind.config.. 2025. 2. 12. CSS Transition 1. 전환(Transition) 기본 개념CSS 전환은 요소의 상태 변화 시, 미리 지정한 속성이 부드럽게 변화하도록 애니메이션 효과를 제공합니다. 전환은 단일 속성이든 여러 속성이든 적용할 수 있으며, 각각의 속성마다 지속 시간, 타이밍 함수, 지연 시간 등을 개별적으로 설정할 수 있습니다.전환 관련 주요 속성은 다음과 같습니다:transition-property역할: 전환 효과를 적용할 CSS 프로퍼티를 지정합니다.기본값: all (모든 속성에 효과 적용)복수 지정: 여러 속성을 적용할 경우 쉼표(,)로 구분합니다.예) transition-property: width, height;transition-duration역할: 전환 효과가 완료되는 데 걸리는 시간을 지정합니다.기본값: 0s표기법: 초(s).. 2024. 12. 13. CSS 애니메이션 효과 만들기 및 참고 사이트 Transition과 Transform요소에 전환 효과를 주어 부드러운 변화(예: 위치 이동, 회전, 크기변경 등)를 구현할 수 있음.상태에 따라 동일 속성에 대해 다른 시간 값 및 타이밍 함수를 부여하여 애니메이션 효과를 조절 가능.타이밍 함수 종류ease, ease-in, ease-out, linear, cubic-bezier(...) 등으로 애니메이션 속도를 조절함.Keyframes@keyframes를 이용해 복잡한 애니메이션 경로를 정의하고, animation 속성으로 적용함.animation-fill-mode로 애니메이션 종료 후 상태 유지, animation-play-state로 애니메이션 일시정지를 제어할 수 있음.1. 애니메이션 기본 – Transition과 TransformA. 기본 전환.. 2024. 12. 13. CSS 단위별 기준과 특징 (%, px, vh, em, rem) 1. 단위별 기준 및 특징% (퍼센트)기준: 부모 요소의 크기를 기준으로 함.용도: 부모 크기에 상대적인 크기 지정에 유용합니다.px (픽셀)특징: 고정된 단위로, 기기 해상도에 관계없이 동일한 크기를 나타냅니다.용도: 정밀한 크기 조절이나 경계(border) 등 고정된 크기가 필요한 경우에 사용.vh (뷰포트 높이)기준: 브라우저 화면(뷰포트)의 높이를 기준으로 함.예시: 100vh는 뷰포트 전체 높이.em기준: 해당 요소의 현재 폰트 크기를 기준으로 함.용도: 글자 크기에 따른 상대적 간격(padding, margin, 자간 등) 조절에 유용합니다.주의: 요소 내부의 줄 간격(line-height)에서는 단위 없이 배수로 지정하는 경우가 많습니다.rem기준: 최상위(root) 요소, 보통 의 폰트 크.. 2024. 12. 13. 이전 1 2 3 다음
