본문 바로가기
728x90
반응형

CSS/CSS 기초62

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.
::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.
flex 크로스 브라우징 / 호환성 이슈 해결 / 모든 브라우저 적용 https://velog.io/@nemo/css-flex-support [CSS] 최신 flex 호환성 이슈 해결 방법 현재 대부분 브라우저에서 flex가 지원된다. 하지만 아직은 접두사를 사용하여야 지원이 되는 경우도 있고, IE처럼 아직도 완벽하게 지원되지 않는 경우도 있다. 크로스 브라우징을 위해 flex 호환 velog.io 2022. 8. 2.
728x90
반응형