Today I Learned/HTML CSS
-
11/20: TIL | transform으로 중앙정렬, box-shadow, overflowToday I Learned/HTML CSS 2022. 11. 22. 13:28
absolute 중앙 정렬 - transform : translate(-50%, -50%); .playing-now { position: absolute; top: 50%; left: 50%; transform : translate(-50%, -50%); } 박스 그림자 만들기 - box-shadow /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); 영역 넘치면 스크롤 가능하게 - overflow .topad-box..
-
10/14 : TIL | reset.css를 추가하는 두가지 방법Today I Learned/HTML CSS 2022. 10. 26. 18:02
reset.css 추가하는 방법 2가지
-
10/24: TIL | block,inline element 중앙정렬, flex로 가운데 정렬Today I Learned/HTML CSS 2022. 10. 26. 17:59
상단바 두번째 요소 정가운데에 놓기 .status-bar{ display: flex; /* justify-content: space-between; */ justify-content: center; } .status-bar__column{ width: 33%; } .status-bar__column:nth-child(2){ display: flex; justify-content: center; } .status-bar__column:last-child{ display: flex; justify-content: flex-end; } - 그냥 space-between만 하면 첫번째div가 길어서 두번째div가 정가운데 위치X - center로 두고 각각 width를 33% + 왼쪽부터 차례로 정렬해주기 te..
-
10/05 TIL :focus-within, @media screen, 코코아톡클론코딩 수료!Today I Learned/HTML CSS 2022. 10. 5. 13:41
:focus-within .reply input{ transition: all .3s ease-in-out; } /* reply input에 transition이 있어서 가능 */ .reply:focus-within input{ width: 98vh; transform: translateX(-13%); } : reply에 focus되면, input이 transform 한다. 휴대폰에서만 볼 수 있도록 화면크기 제한하기 @media(media query) : 사용자의 screen 사이즈에 따라 다른 화면을 보여줄 수 있다. : 모든 html에 존재해야 동작한다. @media screen and (max-width:645px){ .no-mobile{ display: none; } } 1. media scre..
-
10/04 TIL : animation 응용Today I Learned/HTML CSS 2022. 10. 5. 00:33
나타났다 사라지는 로딩화면 애니메이션 만들기 @keyframes hideSplashScreen { from{ opacity: 1; } to{ opacity: 0; visibility: hidden; } } #splash-screen{ animation: hideSplashScreen 1s ease-in-out forwards; } animation: forwards; : 애니매이션의 last keyframe 상태를 유지한다. visibility: hidden; : 없으면 화면 클릭이 안됨. splash screen을 숨겨준다. 하트 두근두근하는 애니메이션 만들기 @keyframes heartBeat{ 0%{ color: white; } 50%{ color: tomato; transform: scale(5..
-
9/22 TIL : z-indexToday I Learned/HTML CSS 2022. 10. 2. 11:05
z-index: 999; : position: fixed, sticky 등 상관없이 모두 적용됨 : 숫자가 클수록 상단 레이어에 위치 #chat-screen .alt-header, #chat-screen .status-bar{ position: sticky; box-sizing: border-box; z-index: 999; } Outline: none; : 버튼 클릭해도 새로고침 되지 않도록 함 .reply__column button:focus, .reply__column button:active{ outline: none; } 어제 야근해서 집에 11시 좀 넘어 왔다.. 이러고 일주일동안 여행갔다와서 공부를 못했다.. 오늘부터 다시 시작