ByteStream ByteStream

2차 변환 함수 translate(x, y)요소를 x, y 축으로 이동시킴. translateX와 translateY로 개별 설정 가능.transform: translate(50px, 100px);translateX(x)요소를 x 축으로 이동시킴.transform: translateX(50px);translateY(y)요소를 y 축으로 이동시킴.transform: translateY(100px);scale(x, y)요소의 크기를 x, y 축으로 확대/축소함. scaleX와 scaleY로 개별 설정 가능.transform: scale(1.5, 2);scaleX(x)요소의 크기를 x 축으로 확대/축소함.transform: scaleX(1.5);scaleY(y)요소의 크기를 y 축으로 확대/축소함.transf..

animation 속성 animation애니메이션의 모든 속성을 한 줄에 설정할 수 있음. 여러 애니메이션을 공백으로 구분하여 적용 가능.animation: slidein 3s ease-in-out 1s infinite;animation-name사용할 애니메이션의 이름을 지정함.animation-name: slidein;animation-duration애니메이션의 지속 시간을 설정함. 초 단위(s)나 밀리초 단위(ms)로 설정 가능.animation-duration: 3s;animation-timing-function애니메이션의 타이밍 함수를 설정함. ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier 등 다양한 값 사용 가능.animation-tim..

CSS3에서 움직임을 구현 할 수 있는 기능은 애니메이션 속성과 변형 속성으로 나뉨 변형 속성transition요소의 상태가 변할 때 적용될 트랜지션을 지정함. 여러 속성을 공백으로 구분하여 적용 가능.transition: all 0.5s ease-in-out;transition-property트랜지션이 적용될 CSS 속성을 지정함. all 또는 특정 속성을 지정 가능.transition-property: width, height;transition-duration트랜지션이 완료되는 데 걸리는 시간을 지정함. 초 단위(s)나 밀리초 단위(ms)로 설정 가능.transition-duration: 0.5s;transition-timing-function트랜지션의 시간 함수(애니메이션 속도 곡선)를 지정함. ..

meta 태그: 웹 브라우저에 특별한 정보를 제공하는 HTML태그 뷰포트 meta 태그: 모바일 웹 페이지는 화면에 대한 특별한 정보를 제공, 화면 설정과 관련된 정보를 제공 width뷰포트의 너비를 설정함. device-width 값은 장치의 화면 너비를 의미함.height뷰포트의 높이를 설정함. device-height 값은 장치의 화면 높이를 의미함.initial-scale페이지의 초기 확대/축소 비율을 설정함. 1.0은 기본 크기임.minimum-scale페이지의 최소 확대/축소 비율을 설정함.maximum-scale페이지의 최대 확대/축소 비율을 설정함.user-scalable사용자가 페이지를 확대/축소할 수 있는지 여부를 설정함. yes 또는 no 값을 가짐.viewport-fit화면 전체에..

폰트 제공 업체에서 웹 폰트를 가져와서 사용하는 방법  아래의 링크에서 무료 폰트를 사용 https://fonts.google.com/코드에 넣기

레이아웃 구분공간 분할 시 가장 중요한 순서  1. 웹 페이지 구상 2. 웹 페이지의 구상 영역 분리 3. 구성 영역 행 단위 분리 4. 나누어진 행의 내부요소 분리   초기화 초기화 코드는 모든 웹 브라우저에서 동일한 출력 결과를 만드는데 사용 전 세계적으로 많이 사용하는 코드는 아래의 홈페이지에서 코들르 복사하고 붙여넣으면 됨https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSSCSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes o..

HTML은 논문과 관련된 용도로 사용을 시작했고 1995년 이후 민간에 공개하면서 발전하기 시작초기에는 인터넷 속도가 느리므로 글자와 간단한 이미지가 웹 페이지를 차지 인터넷 속도가 빨라진 루 웹 페이지는 다양한 요소를 가지게 됨현대의 웹 페이지는 고정적인 영역으로 분리

: 벤더 프리픽스(vendor prefixes)는 특정 브라우저에서만 지원하는 CSS 속성이나 기능을 사용할 수 있게 해주는 접두사주요 벤더 프리픽스-webkit-: Google Chrome, Safari, iOS Safari, Android 브라우저-moz-: Mozilla Firefox-ms-: Microsoft Internet Explorer, Edge-o-: Opera/* 웹킷 기반 브라우저 (Chrome, Safari) */background: -webkit-linear-gradient(left, blue, red);/* 모질라 기반 브라우저 (Firefox) */background: -moz-linear-gradient(left, blue, red);/* 마이크로소프트 기반 브라우저 (IE, ..