728x90 반응형 CSS127 box-shadow 예제 모음사이트 https://www.webfx.com/archive/blog/images/assets/cdn.sixrevisions.com/0457-01-css-box-shadow-demo/demo.html CSS Box Shadow Examples Basic Drop Shadow box-shadow: 0 0 10px; Inner Shadow box-shadow: inset 0 0 10px; Offset Drop Shadow (Bottom Right) box-shadow: 5px 5px 10px; Offset Drop Shadow (Top Left) box-shadow: -5px -5px 10px; Inset Value box-shadow: inset 0 0 5px 5px olive; No Inset www.webfx.. 2022. 8. 12. [em]반응형을 좀 더 편하게 할 수 있는 폰트사이즈 단위/쉽게 알아보기 em 은 상위 요소가 기준이 되는 단위 하단 예시를 보면 1줄에 4개의 p를 넣고 4개씩 1개의 박스로 묶었다 첫번째 박스부터 순서대로 16px / 20px / 30px / 40px 이고 왼쪽부터 순서대로 0.5em / 1em / 1.5em / 2em 이다 모두 폰트 사이즈가 다르다 16px 기준의 1em 이 16px 이고 20px 기준의 1em 은 20px 이다 박스별로 기준 크기를 정해두고 반응형작업시 박스별 폰트사이즈만 조정해주면 하단의 딸려있는 아이들의 폰트사이즈는 상위에 맞춰 자동 조절된다!! 편하게 반응형 조절이 가능하다 See the Pen Untitled by gahyun (@gahyun) on CodePen. 2022. 8. 10. ::before / ::after content에 특수문자 코드로 쓰기 선택자::after { content: '\코드' } 작은따옴표안에 \와 함께 코드를 써준다. 사용가능한 코드는 하단 링크 확인 https://www.w3schools.com/cssref/css_entities.asp CSS Entities W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 2022. 8. 10. css에 계산 결과값 넣기 https://developer.mozilla.org/ko/docs/Web/CSS/calc calc() - CSS: Cascading Style Sheets | MDN calc() CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다. developer.mozilla.org width : calc(100% - 20px); 2022. 8. 9. 이전 1 2 3 4 5 6 7 ··· 32 다음 728x90 반응형