CSS/learned_it_today (34) 썸네일형 리스트형 CSS Transitions CSS Transtions를 사용하면 주어진 duration동안 property values가 스무스~~하게 변한다. (* duration을 안정해주면 default 값으로 0초가 설정되기 때문에 아무런 변화가 일어나지 않는다!) div { width: 100px; height: 100px; background: red; transition: width 2s; } div:hover { width: 300px; } Change Several Property Values The following example adds a transition effect for both the width and height property, with a duration of 2 seconds for the width and .. CSS Animations What are CSS Animations? CSS Animation을 사용하면 element를 변신시킬 수 있다!! (멋져멋져) Animation을 사용하기 위해서는 먼저 animation을 위한 keyframe 구체적으로 명시해야 한다. 이 Keyframes에는 특정한 시점에 도달했을 때, element가 어떤 스타일로 변신하게 될 지에 대한 정보가 담겨있다. @keyframes에 담은 css styles가 작동하려면 element와 애니메이션을 연결해줘야 한다. /* The animation code */ @keyframes example { from {background-color: red;} to {background-color: yellow;} } /* The element to apply t.. Box Shadow *효과를 극명하게 보여주기 위해 예쁘지 않은 색을 선택했다. 이해 바람.. 0. 기본 셋팅 Heading Lorem ipsum dolor sit amet consectetur, adipisicing elit. A, vel! Heading Lorem ipsum dolor sit amet consectetur, adipisicing elit. A, vel! Heading Lorem ipsum dolor sit amet consectetur, adipisicing elit. A, vel! 1. offset-x | offset-y | color /* offset-x | offset-y | color */ box-shadow: 10px 20px teal; offset-x는 박스 shadow 오른쪽 두께 offse.. before & after Pseudo Selector (feat.포토샵 없이 배경 이미지 흐리게) Name form 작성 시 유용한 코드. 반드시 input을 받아야하는 경우 (이름, 이메일 주소 등등..) 개발자 도구를 보면 마크업에는 나타나있지 않다. 사실 내가 before, after Pseudo Selector를 처음 배우게 된 건 랜딩 페이지에서 배경 이미지는 약간 흐리지만, nav나 content는 선명하게 보이는 효과를 원했을 때! 처음 배우게 됐다. 예시) - 개발자 도구에서 ::before 부분을 선택하면 거기에 적용 된 css 코드들을 볼 수 있다. 실제 코드) Hello World Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam, hic! Lorem, ipsum dolor. Lorem ipsum, dolor sit .. nth-child Pseudo Selector 1. li:first-child li:last-child 첫 번째와 마지막 아이템을 선택하는 방법 li:first-child{ background-color:#f48fb1; } li:last-child{ background-color:#f36339c; } 2. Position 5 특정 위치의 아이템 선택 li:nth-child(5){ background-color:#ce93d8; } 3. 매 3, 4, 5...번째 아이템 선택 li:nth-child(3n){ background-color:#b399ddb; } li:nth-child(4n){} li:nth-child(5n){} 4. 7번째 아이템부터 매 3번째 아이템 선택 li:nth-child(3n+7){ background-color:#a5d6a7; .. Targeted Selector 1. Child (div p) div p{ background-color:#555; } 라고 하면 div 아래에 있는 모든 p들(div의 child)의 배경색이 변한다. 마지막 hello world는 div의 child가 아니기 때문에 배경 색이 변하지 않는다. 2. Direct Child (div > p) div > p{ background-color:#555; } div > p 라고 selector를 주면 div의 direct child인 p들만 선택이 된다. item2는 (div의 child 중 한 명이지만) ul 속 li의 direct child이기 때문에 선택이 안된다. 3. Directly After (div + p) div + p{ bakground-color:#333; color:#fff;.. Flexbox 기본 상태 display:flex; flex-direction은 기본으로 row; 상태 flex-direction:row-reverse; flex-direction:column; flex-direction:column-reverse; Position: static, relative, absolute, fixed, sticky 헷갈리면 relative -> absolute -> fixed 순서로 기억할 것. relative는 자기 자신의 원래 위치 기준으로 이동. absolute는 가장 가까운 부모 위치를 기준으로 이동. fixed는 웹 창을 기준으로 이동. 이전 1 2 3 4 5 다음
