개발자 페이지/CSS, HTML5, tailwindCSS (4) 썸네일형 리스트형 will-change / transformation 애니메이션 흔들림 방지 CSS Keyframe animation 으로 두근두근 하트를 만들려고 하는데 하트아이콘이 매우 부들부들 떨린다. 이때 will-change 명령어를 사용함으로써 브라우저에 어떤 항목이 애니메이션 적용이 되어 변할지 알려주게 된다. will-change 명령어를 아래 예시와 같이 적용하면 다음과 같이 하트 애니메이션이 매끈하게 변하게 된다. 모든 애니메이션 적용이 이런것은 아니지만 종종 부자연스러운 움직임이 나타날때 will-change 를 사용하여 우리 브라우저가 매끈하게 작동하도록 도와줄 수 있다. @keyframes heartBeat { 0% { color: white; transform: none; } 50% { color: tomato; transform: scale(1.5); } 100% { .. CSS / box-sizing: border-box 사용, 뜻 여기 width 100px 짜리 박스가 하나 있습니다. 왼쪽에 padding 10px 만큼 공간을 주고 싶은데, width 100px는 바뀌지 않았으면 합니다. padding-left: 10px; 를 추가하여 왼쪽에 10px 공간을 줍니다. 다음과 같은 결과물을 얻게됩니다. 총 width 110px 짜리 박스가 생겨버렸네요 ? 화면 설정은 100px로 고정할 생각이었는데 이거 뭔가 잘못돌아갑니다. width 100px 박스에 padding-left: 10px; 적용시 CSS default 는 다음과 같은 작업을 수행합니다. 기존 100px 박스 사이즈를 유지 + padding 10px 추가의 명령을 수행하기 위해 총 width를 110px으로 설정하게 됩니다. 아래와 같이 box-sizing: borde.. CSS / relative, absolute, Pseudo Selectors CSS Styles 속성 position: relative position: absolute 부모를 position: relative 설정하지 않으면 자식 position은 body를 기준으로 설정되며, 부모가 relative 속성일경우 부모 contents안에서 활성화 된다. :first-child : 배열의 첫번째 식별자 :last-child : 배열의 마지막 식별자 :nth-child(odd) or :nth-child(2n+1) -> html table의 홀수열을 지정 :nth-child(even) or :nth-child(2n) -> html table의 홀수열을 지정 :nth-child(7n) Represents the seventh and all following elements: 7 [=0+.. CSS: inline, block default 값은 inline으로 left, rigth 영역에서만 margin, padding 값을 가질 수 있다. CSS 적용시 top, bottom에 margin, padding을 적용하기 원한다면 반드시 display: block; 코드로 inline -> block 으로 변경해줘야 한다. box의 경우 inline으로 적용될 시 높이가 적용되지 않아 화면에서 사라지는 현상을 겪기도 한다. CSS 설정시 .name {} 앞에 (.)을 쓰면 class를 지칭한다 .name {} 앞에 (#)을 쓰면 id 를 지칭한다. id는 unique 값으로 모든 변수 통틀어 단 1개만 존재할 수 있으며, class값은 여러개 중복 존재가 가능하다. class는 아래와 같이 사용되는데 class="one two t.. 이전 1 다음
