728x90 CSS17 [CSS] filter:drop-shadow()와 box-shadow의 차이점 둘 다 그림자 효과를 준다는 공통점이 있지만 요소에 적용되는 범위가 다르다. box-shadow: 요소의 상자에 그림자를 추가하여 뒷면에 그림자 효과를 생성합니다. filter: drop-shadow(): 요소 전체에 드롭 셰도우 효과를 적용하며, 이는 요소의 상자에만 국한되지 않고 내부의 투명하거나 반투명한 부분에까지 확장됩니다. div { display: flex; width: 50px; height: 50px; border: 1px solid gray; margin: 1rem; align-items: center; justify-content: center; } .drop {filter: drop-shadow(0 0 5px rgba(0,0,0,.5));} .box {box-shadow: 0 0 5p.. 2023. 11. 28. [CSS] Hover 하면 현재 배경 색상에서 어두워지게/밝아지게 하는 CSS Trick 버튼에 각각 오버할 때 현재 색상에서 어두워지게 하고 싶은 경우, 아래 코드처럼 따로 색상 hover를 주고 계신가요? /* 예시 */ .btn--red {background-color: brown;} .btn--red:hover {background-color: #62191b;} .btn--green {background-color: green;} .btn--green:hover {background-color: #074d09;} background-image 속성을 이용하면 한번에 현재 색상에서 어두워지게 할 수 있습니다. background-image: rgba(0,0,0,.4); 검은 색상(0,0,0)에 40%의 투명도를 준 값이죠. hover에 위와 같이 값을 주면 각각 현재 색상에서 40%만큼.. 2023. 10. 25. [CSS/javascript] 스크롤 하면 줄어드는 헤더 (How To Shrink Navbar on Scroll) 스크롤 높이가 100이 넘어가면 gnb에 변경 후 스타일이 적용된 fixed 클래스를 추가하여 헤더 크기를 줄이는 코드이다. &.fixed { padding: 1rem 0; background-color: #fff; .gnb-wrap { .gnb-logo {max-width: 14rem;} .gnb-list {font-size: 1.8rem;} } } See the Pen Untitled by sel (@wimmwell) on CodePen. 2023. 6. 22. [CSS] overscroll-behavior: contain의 역할 기본적으로 한 박스 안의 스크롤이 끝나면 부모 요소의 스크롤로 넘어간다. 이 것을 scroll chaining 스크롤 체이닝이라고 한다. 이 스크롤 체이닝을 막고싶은 경우 사용하는 속성이 바로 overscroll-behavior이다. 스크롤 박스에만 적용되는 속성이다. 기본 상태에서는 이렇다. 박스 안에서 스크롤이 끝나면 다음 스크롤로 넘어간다.overscroll-behavior: contain;을 적용하면이렇게 박스 안에서 스크롤이 끝나도 더 이상 스크롤이 되지않고 머무른다. (부모 요소에 커서를 대고 스크롤 하면 당연히 스크롤 됨) overscroll-behavior: none;도 부모요소의 스크롤을 제한하여 contain과 같은 효과를 낸다. 사실은 서로 다르다고하는데 외적으로는 큰 차이를 느끼기 .. 2023. 6. 18. [HTML/CSS] DIV 안에 이미지 가득 차게 중앙 정렬하기 같은 비율의 이미지만 사용한다면 수직, 수평 중앙정렬이 어렵지않겠지만 클라이언트들은 보통 제각각의 이미지를 사용하잖아요?그래서 이미지 박스를 작업할 때는 어느 비율의 이미지든 박스에 풀로 채워지며 센터 정렬이 되게 해야한다. 이런 세로 이미지를 박스에 풀로 채운다고 치자이미지 중앙 정렬은 크게 두가지의 CSS로 맞추는데 display: flex,나 position: relative;가 있다.왼쪽(1번)은 flex로 센터 정렬 (object-fit: cover;를 안넣으면 이미지 원본 비율이 깨진다.),.box1 { display: flex; align-items: center; justify-content: center; img { width: 100%; height: 100%; .. 2023. 5. 23. [chatGPT] 챗지피티한테 코딩 배우기 2탄 (실패) ~지난 이야기~ '마우스 포인터를 따라서 그라디언트 blob (방울)이 움직이는 애니메이션이다. 그런데 코드펜 코드는 100vh 풀스크린을 기준으로 작성되어서 긴 페이지에도 적용되게 코드를 수정해보고싶었다. 그러나 100vh를 풀고 그냥 컨텐츠 길이를 늘려봤더니 스크린 높이 안에서만 방울이 움직였다.' . . 그리하여 챗지피티를 통해 풀스크린 페이지가 아닌 경우에도 이 효과를 사용하기 위한 챗지피티 여정이 시작되었다. https://selinak.tistory.com/61 여러분 그거 아십니까? 정답은 멀리 있지않습니다. 존나 멀리있습니다. 넝담..이고 정답은 등잔밑에 있었답니다. 챗지피티한테 물어가며 열차례 넘게 질답을 반복하며 코드 시행착오(라 부르고 삽질이라 읽음)을 거쳤는데 아무리 해도 내가 원하.. 2023. 5. 10. [CSS] 스크롤바 scrollbar CSS 스타일링 수정하기 스크롤바는 스크롤바의 부모 요소::-webkit-scrollbar {}를 통해 수정할 수 있다. 예를 들어 페이지 전체의 스크롤바면 body::-webkit-scrollbar{}이다. 스크롤바 선택자는 세부적으로 ::-webkit-scrollbar — 스크롤바 전체. ::-webkit-scrollbar-button — 스크롤바의 버튼 (한 번 누를 때마다 위아래로 한 줄씩 오르내리는 위아래 화살표). ::-webkit-scrollbar-thumb — 드래그할 수 있는 스크롤 손잡이. ::-webkit-scrollbar-track — 흰색 막대 위에 회색 바가 존재할 경우의 스크롤바의 트랙(진행 표시줄). ::-webkit-scrollbar-track-piece — 손잡이에 의해 덮이지 않은 트랙(진행 표.. 2023. 4. 20. [HTML/CSS] ul li에 이미지 사용할 경우 list-style 들여쓰기 맞추기 ul li 구조로 마크업을 하면 li의 텍스트가 여러줄이 되도 들여쓰기가 (지금 이 문단처럼) 자동으로 들어간다. list-item의 마커 타입이 disc,square 등 꽤나 다양하다고 해도 한계가 있기 때문에 보통은 ul {list-style: none;}으로 초기화 시키고 커스텀 이미지를 li 태그 안에 사용할 때가 많다. 이 경우 아래 이미지의 파란선처럼 텍스트 들여쓰기가 맞지않다. 한줄이면 상관없지만 여러줄이면 들여쓰기가 맞지않아 거슬린다. 특히 기관 홈페이지 작업하면 십중팔구는 들여쓰기 맞춰달라고 요청이 들어온다. ul의 list-style에 url을 이용하여 마커를 이미지로 변경할 수도 있지만 사이즈나 위치 등 자유로운 수정이 어렵다. 그래서 이렇게 li 태그 안에 img를 넣어 사용하게 된.. 2023. 4. 18. [HTML/CSS] CSS로 텍스트 여러줄에 여백 있는 밑줄을 만드는 여러가지 방법 (multi line underline) 글에 밑줄을 치는 방법은 기본적으로 text-decoration: underline;이 있다. 하지만 가끔 글씨랑 밑줄간격이 너무 가까워서 간격을 벌리고 싶을 때! 위의 기본 underline 속성에서는 쉽지 않음 아래에 나온 5,6번이 기본 underline속성에서 밑줄 포지션이랑 offset을 수정하여 결과를 만든 케이스인데, 호환성이 매우 떨어져서 사용하지 않는게 좋다. (최신 버전의 크롬 브라우저로만 사용하는 웹사이트가 아니라면..!) 아래 텍스트 중 글자와 밑줄 사이에 여백이 있는 게 몇 개인가요? 밑줄이 보이시나요? 밑줄이 보이시나요? 밑줄이 보이시나요? 이와 같이 3개라면 아래 속성들이 호환되는 브라우저를 사용하고 계십니다. 텍스트에 밑줄을 주는 방법과 여백을 주는 방법을 알아보자 *사용된 .. 2023. 3. 30. 이전 1 2 다음 728x90
