개인공부/HTML5&CSS3
-
1. transition CSS의 transition 속성은 엘리먼트의 CSS 속성을 변경할 때 두 가지 상태 사이에 일어나는 변화(애니메이션)를 커스터마이징 할 때 사용한다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 하는 것이다. 예를 들어, 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 원래라면 변화가 즉시 일어나지만 CSS transition 속성을 이용하면 그 변화의 양상을 어느 정도 원하는 대로 커스터마이징 가능하다. transition 속성은 transition-property, transition-duration, transition-timing-function, 그리고 transition-delay를 위한 단축 속성이며, 아래 예시를 ..
[CSS] transition, transform, translate 정리1. transition CSS의 transition 속성은 엘리먼트의 CSS 속성을 변경할 때 두 가지 상태 사이에 일어나는 변화(애니메이션)를 커스터마이징 할 때 사용한다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 하는 것이다. 예를 들어, 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 원래라면 변화가 즉시 일어나지만 CSS transition 속성을 이용하면 그 변화의 양상을 어느 정도 원하는 대로 커스터마이징 가능하다. transition 속성은 transition-property, transition-duration, transition-timing-function, 그리고 transition-delay를 위한 단축 속성이며, 아래 예시를 ..
2022.09.22 -
main.js "use strict"; // Make navbar transparent when it is on the top const navbar = document.querySelector("#navbar"); const navbarHeight = navbar.getBoundingClientRect().height;//현재 nav 엘레먼트의 높이 가져오기 document.addEventListener("scroll", () => {//사용자가 페이지를 위아래로 스크롤 할 때 if (window.scrollY > navbarHeight) {//현재 스크롤 픽셀을 반환 현재 스크롤 위치가 엘리먼트의 높이를 넘어가면 navbar.classList.add("navbar--dark");//클래스를 추가 } ..
PROJECTmain.js "use strict"; // Make navbar transparent when it is on the top const navbar = document.querySelector("#navbar"); const navbarHeight = navbar.getBoundingClientRect().height;//현재 nav 엘레먼트의 높이 가져오기 document.addEventListener("scroll", () => {//사용자가 페이지를 위아래로 스크롤 할 때 if (window.scrollY > navbarHeight) {//현재 스크롤 픽셀을 반환 현재 스크롤 위치가 엘리먼트의 높이를 넘어가면 navbar.classList.add("navbar--dark");//클래스를 추가 } ..
2022.09.22 -
css 가운데 정렬 📌 일반적인 가운데 정렬 방법 1. 부모요소가 block이고 자식 요소가 inline 일 때 .부모{ text-align: center; } 2. block 일 때 .요소{ margin: 0 auto; width: 100px; /* width값 필요함 */ } 📌 position: absolute 로 지정 되어있을 때 📝 html 📝 css .parent{ width: 100%; position: relative; } .child{ width: 100px; position: absolute; } 1. top: 50% left: 50% .child{ width: 100px; position: absolute; top: 50%; left: 50%; } 여기까지 해주면 자식요소가 정 가운데..
position으로 가운데정렬하기css 가운데 정렬 📌 일반적인 가운데 정렬 방법 1. 부모요소가 block이고 자식 요소가 inline 일 때 .부모{ text-align: center; } 2. block 일 때 .요소{ margin: 0 auto; width: 100px; /* width값 필요함 */ } 📌 position: absolute 로 지정 되어있을 때 📝 html 📝 css .parent{ width: 100%; position: relative; } .child{ width: 100px; position: absolute; } 1. top: 50% left: 50% .child{ width: 100px; position: absolute; top: 50%; left: 50%; } 여기까지 해주면 자식요소가 정 가운데..
2022.09.19 -
CSS / 애니메이션 / animation CSS의 애니메이션 속성으로 동적인 효과를 만들 수 있습니다. IE는 버전 10 이상부터 지원합니다. animation 예제 다음은 CSS로 만든 간단한 애니메이션입니다. 작은 박스가 커졌다 작아집니다. 코드 www.codingfactory.net CSS의 애니메이션 속성으로 동적인 효과를 만들 수 있습니다. IE는 버전 10 이상부터 지원합니다. animation 예제 다음은 CSS로 만든 간단한 애니메이션입니다. 작은 박스가 커졌다 작아집니다. 코드는 다음과 같습니다. 코드의 의미 @keyframes 어떤 모양에서 어떤 모양으로 바꿀지 정합니다. 이름은 big으로 지었고, 20px 정사각형에서 200px 정사각형으로 커집니다. animation-name 어떤..
CSS 애니메이션(@keyframes 와 animation 속성)CSS / 애니메이션 / animation CSS의 애니메이션 속성으로 동적인 효과를 만들 수 있습니다. IE는 버전 10 이상부터 지원합니다. animation 예제 다음은 CSS로 만든 간단한 애니메이션입니다. 작은 박스가 커졌다 작아집니다. 코드 www.codingfactory.net CSS의 애니메이션 속성으로 동적인 효과를 만들 수 있습니다. IE는 버전 10 이상부터 지원합니다. animation 예제 다음은 CSS로 만든 간단한 애니메이션입니다. 작은 박스가 커졌다 작아집니다. 코드는 다음과 같습니다. 코드의 의미 @keyframes 어떤 모양에서 어떤 모양으로 바꿀지 정합니다. 이름은 big으로 지었고, 20px 정사각형에서 200px 정사각형으로 커집니다. animation-name 어떤..
2022.09.16 -
width 속성 - https://www.daleseo.com/css-width/ [CSS] width 속성과 너비 결정 매커니즘 Engineering Blog by Dale Seo www.daleseo.com display : flex - https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect E..
프로젝트 하면서 알아낸것width 속성 - https://www.daleseo.com/css-width/ [CSS] width 속성과 너비 결정 매커니즘 Engineering Blog by Dale Seo www.daleseo.com display : flex - https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect E..
2022.09.15 -
보호되어 있는 글입니다.
(HTML) 데이터 속성보호되어 있는 글입니다.
2022.09.13