whatisthis?

Visibility visible | hidden (default) display: none의 경우에는 차지하는 공간마저 없애지만, visibility: hidden을 하면 공간은 그대로 남지만 content만 안보이게함. >> opacity: 0과 유사하게 됨. display:none 영역 사라짐 이벤트(ex.클릭) 작동 안함 tab focus 안됨 visibility:hidden 영역 있음 이벤트(ex.클릭) 작동 안함 tab focus 안됨 뒤에 있는 요소 클릭 가능 opacity:0 >> 존재함! 이벤트고 뭐고 다 됨! 단지 투명할 뿐. 영역 있음 이벤트(ex.클릭) 작동 함 tab focus 됨 뒤에 있는 요소 클릭 불가능 REF > visibility - CSS: Cascading Style ..

Transform /* 키워드 값 */ transform: none; /* 함수 값 */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: translate(12px, 50%); transform: transl..

Overflow width * height를 갖는 요소 안에 content가 요소의 영역을 벗어났을 경우 사용함. visible | auto | scroll | hidden - default : visible overflow-x, overflow-y 로 나눠서 설정 가능. scroll 콘텐츠를 실제로 잘라냈는지 여부를 따지지 않고 항상 스크롤바를 노출 auto 콘텐츠가 넘칠 때만 스크롤바를 노출 hidden 콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라냄. 스크롤바를 제공하지 않고, 스크롤할 방법(드래그, 마우스 휠 등)도 지원하지 않음. p { width: 12em; height: 6em; overflow: scroll; } - width, height 설정해준 후, overflow 해주기 .box { ..

Opacity = 투명도 0 : 완전 투명 1 : 완전 불투명 opacity: 0.9 opacity: 90% A in the range 0.0 to 1.0, inclusive, or a in the range 0% to 100%, inclusive, representing the opacity of the channel (that is, the value of its alpha channel). Any value outside the interval, though valid, is clamped to the nearest limit in the range. - 색상의 rgba에서 a(알파값)에 해당함. REF > opacity - CSS: Cascading Style Sheets | MDN The opa..

Box-shadow box-shadow를 이용해서 다양한 느낌을 낼 수 있음. 예를들면, 요즘 유행하는 neumorphism, Skeuomorphism 등 🔻 ** neumorphism ** Skeuomorphism h-offset (x) v-offset (y) blur (흐린정도) spread (그림자 사이즈) color (색상) 순으로 (순서 바뀌면 절대 안됨) 작성해줘야함. /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); - 보통 spread-radius는 0으로 해준다. (그림자 자체가 커짐) 예제 - 버튼에 마우스 올렸을때 (hover) box-..

CSS - Animation practice 🔻 내가 작성한 코드 * { box-sizing: border-box; margin: 0; } body { font-family: "Mulish", sans-serif; } .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 100px; } .loading-title { color: #151b26; font-size: 18px; line-height: 1.33333333; margin-bottom: 20px; animation-name: loading-effect; animation-duration: 1000ms; a..

CSS - Transition practice * { box-sizing: border-box; margin: 0; } body { font-family: "Lato", sans-serif; background-color: #525252; } button, input, textarea { font-family: "Lato", sans-serif; } ❗ button, input, textarea 같은 form 요소 안에 텍스트들은 body에 font-family 해줘도 안먹는 경우가 있으므로 따로 저렇게 font-family 해주자. (나는 여태 * selector에 해줬었는데 그건 좀 효율적이지 않다고 한다..) button { background-color: #fff; border: none; cur..

CSS Animation animation vs transition - 둘은 엄연히 다른 속성임. transition : 속성의 '전환' animation : 각 property를 쪼개서 사용함. (transition은 속기형으로 적었지만) /* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation - CSS: Cascading Style Sheets | MDN animation CSS 속성은 다수의 스타일을 전환하는 애니메이션을 적용합니다. animation-name (en-US), animation-duration, animation-tim..

CSS Transition transition - CSS: Cascading Style Sheets | MDN transition CSS 속성은 transition-property (en-US), transition-duration (en-US), transition-timing-function (en-US) 과 transition-delay를 위한 단축 속성입니다. 이 속성으로 엘리먼트의 두 가지 상태 사이에 변화를 줄 수 developer.mozilla.org 엘리먼트의 두 가지 상태 사이에 변화를 줄 수 있음. property - 어떤 속성을 적용할지? duration - 변화가 얼마동안 일어날지? - 단위 : ms / s .selector { transition: background-color 2..

Background practice (에어비앤비) index.html Plus Entire apartment 4.97 (203) Unwind in a Bright Space with Rustic Accents Rooms and beds 2 guests 1 bedroom 1 bed 1 bath Amenities Wifi Kitchen style.css .like-button { box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); } /* ▼ WHERE YOUR CODE BEGINS */ * { box-sizing: border-box; margin: 0; } body { font-family: "Poppins", sans-serif; } .sr-only { display: no..