본문 바로가기

transform18

CSS animation · transition 완전 정리 Web Development · CSSCSS animation · transition@keyframes 회전 애니메이션과 hover transition 차이를 정리합니다.시작 오늘 분석할 코드이 폴더는 JavaScript 앞뒤에서 함께 쓰이는 CSS 기본 레이아웃과 움직임 효과를 정리합니다. display, float, hover, table 스타일, keyframes, animation, transition의 역할을 나누어 봅니다.@keyframes imagerotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #tran { animation-name: imagerotation; animation-duration.. 2026. 7. 7.

JavaScript transform · z-index · 난수 완전 정리 Web Development · JavaScriptJavaScript transform · z-index · 난수rotate, scale, z-index 카드 섞기, 난수 배열, 클릭 계산 예제를 정리합니다.시작 오늘 분석할 코드이 장은 DOM 요소를 새로 만들고, 기존 요소의 스타일과 내용을 바꾸는 연습입니다. 핵심은 요소를 찾는 단계, 새 요소를 만드는 단계, 부모 요소에 붙이거나 스타일을 바꾸는 단계를 분리해서 보는 것입니다.let n = 90; function rotate(obj) { obj.style.transform = "rotate(" + n + "deg)"; n += 90; n %= 360; } function scale(obj) { obj.style.transform = "scale(" .. 2026. 7. 6.

포트폴리오 — 경력(mcareer.html) 완전 정리 Web Development · Portfolio HTML포트폴리오 — 경력 페이지(mcareer.html) 분석section + aside 2단 구조 · 사진 hover 확대 · 공통 CSS 연결시작 오늘 분석할 코드4페이지로 구성된 개인 포트폴리오 사이트(경력·학술·인적·소개) 중 경력 페이지다. 모든 페이지가 같은 header / nav / footer 골격을 공유하고, 페이지마다 section 안의 콘텐츠만 달라진다. CSS는 외부 파일(mportpolio.css) 한 개에서 공통으로 관리한다. 홍길동 홈페이지 href="mcareer.html"> 경력 href="mstudy.html"> 학술 href="minfo.html"> 인적 href="mintro.html"> 소개 .. 2026. 6. 20.

포트폴리오 공통 CSS — mportpolio.css 완전 정리 Web Development · Shared CSS포트폴리오 공통 CSS — mportpolio.css 분석스타일 초기화 · @media 반응형 · 부등호 자식 셀렉터 · 자손 셀렉터시작 오늘 분석할 코드4페이지 포트폴리오가 공유하는 단일 CSS 파일이다. 페이지마다 다른 스타일은 #id로 구분해 한 파일에서 모두 처리한다. 핵심 영역: 스타일 초기화, 헤더·푸터·네비, 미디어쿼리 반응형, 페이지별 id 스타일./* 1. 스타일 초기화 */ * { margin:0px; padding:0px; } /* 2. 글꼴·크기 */ header, body, footer { font-size: 14px; font-family: 나눔고딕,굴림,돋음,'Times New Roman',serif; width: 100%; }.. 2026. 6. 20.

이전 1 2 3 4 5 다음

티스토리툴바