syleemomo의 IT 블로그 syleemomo의 IT 블로그

https://hyoni-k.tistory.com/48 mix-blend-mode : 요소를 겹치는 효과 이미지 등의 요소가 겹치는 경우 중첩된 상태를 표시하는 방법에 대해 알아보고자 한다. 포토샵에서 사용하는 블렌드 모드와 유사한데, 이 효과를 css에서도 사용할 수 있다. 서로 다른 요소(ex. hyoni-k.tistory.com 핵심적인 아이디어는 mix-blend-mode 를 설정해서 각 레이어의 색상을 섞는 것이다. position: fixed 로 설정하면 배경화면은 무시하고, 아래쪽에 있던 글자들은 브라우저 상단으로 올라온다. 이때 position: fixed 로 설정한 배경화면의 레이어가 텍스트(position: static)보다 더 높기 때문에 글자는 아래쪽 레이어에 가려진다. 그래서 글자..

:root{ --num-of-column: 6; } h3, p{ margin: 0; } .card-container{ display: flex; justify-content: space-around; flex-wrap: wrap; margin-top: 2rem; } .card-container .card{ width: calc(100vw / var(--num-of-column)); height: 15rem; background: #eee; box-shadow: 0rem 0rem .5rem rgba(0, 0, 0, .3); padding: 1rem; display: flex; flex-flow: column; justify-content: space-between; margin-bottom: 1rem; }..

home instagram google github html 코드를 위와 같이 작성한다. 폰트아우썸 아이콘을 이용하여 드롭다운 메뉴를 만든다. a{ text-decoration: none; color: #333; } .dropdown-menu{ width: 20rem; padding: .5rem; background: #eee; z-index: 1; box-shadow: .3rem .3rem .5rem rgba(0, 0, 0, .3); } 이렇게 하면 아래와 같이 드롭다운 디자인이 완성된다. a{ text-decoration: none; color: #333; } .dropdown-menu{ width: 20rem; padding: .5rem; background: #eee; z-index: 1; box..