본문 바로가기

WWWEB/CSS27

css로 요소 1개인지 체크방법 아주 가끔씩 쓰게되서 찾게되는 css 선택자로 요소 1개 체크하는 방법... :fisrt-child:last-of-child(1) 코드 예시 버튼 1 버튼 2 버튼 1 2024. 1. 31.
갤럭시 폴드의 실제 가로 해상도는 345px 갤럭시 폴드 스펙에서 viewport 사이즈는 접었을 때가 280이라고 나와있는데, 실제로는 345px가 나온다고 함. [모바일 해상도] 갤럭시 폴드4 viewport 사이즈, 모바일 해상도 확인하기 갤럭시 폴드4 (Galaxy Fold 4) 가로폭 - 접힌 상태 : 345px - 펼친 상태 : 691px 디바이스에서 아래 URL에 접속하면 직접 테스트 해 볼 수 있습니다. [test] viewport / userAgent (codepen.io) [test] viewport / userAgent ... co zinee-world.tistory.com 갤럭시 플립4: 412×1006 갤럭시Z 폴드3: 320×872 / 674×842 2024. 1. 29.
마우스 커서를 이미지로 변경하기 css에서 "cursor:pointer;"와 같이 cursor 속성을 통해 시스템 기본 커서 마우스의 모양을 지정할 수 있는데 이걸 직접 디자인한 이미지로 변경해줄 수 있음! ㅎㅎ button:hover{ cursor: pointer; } /* 커서 이미지로 변경하는 경우 기본 형식 */ button:hover{ cursor: url(img-cur-hover.png), pointer; } /* 커서 이미지 위치를 변경해주는 경우(위치값은 생략 가능) */ button:hover{ cursor: url(img-cur-hover.png) 10 15, pointer; } /* 여러 이미지 사용 가능 */ button:hover{ cursor: url(img-cur-hover.png) 10 15, cursor:.. 2023. 9. 22.
[CSS] ":nth-child()"로 몇 번부터 몇 번까지 선택하기 위 그림처럼 기획에서 평소에 잘 보지 못한 디자인을 요청해옴~ 해당 요소에 평범하게 클래스를 주고 스타일을 입히는 것이 일반적인 방법이었으나, nth-child로 몇 번부터 몇 번까지 선택하는 방법을 사용함. 해당 기획은 테이블이 아닌 클릭하는 요소라 위 마크업처럼 안에 버튼들로 100개를 채워줌~ ... ... ... . . . ... 디자인은 41번부터 45번까지 컬러를 입혀야 하기 때문에, :nth-child()로 간단하게 해주면 끝~~~ .button-list :nth-child(n+41):nth-child(-n+45){ background: #79d6df; } 알아두면 좋은 선택 예시 /* n번 단일 선택 */ .selector:nth-child(n){ background: pink; } /* .. 2023. 8. 21.
[css] 텍스트 안에 그라데이션 배경 움직여보기 기획자에게 축하 메시지가 들어가는 이벤트 기획서가 도착함. 뭔가 경품도 주고 하는 이벤트인데, 그냥 글자만 "축하함"이라고 넣기가 허전해보여서, 뭐가 없을까 하다가... CSS에 background-clip: text; 속성을 이용해 텍스트 안에 그라데이션 애니를 주기로 함~ 일단 결과물은... 열심히 해보고나니 나름 느낌이 괜춘 괜춘~~ (레드써...ㄴ ) 아래 css를 하나씩 살펴보자~ CSS @keyframes moveGradientBg{ to{background-position: 300% 0;} } .item-text{ display: inline-block; position: relative; background: linear-gradient(90deg, #ff0 0%, #f86 20%, #ff.. 2023. 6. 8.
최근 네이버 CSS 초기화 코드 (mo/pc) 모바일 이벤트 페이지 작업을 하는데, 웹폰트를 좀 써보려고 하는데 기존에 사용하고 있는 font-family를 보니 모바일인데 맑은 고딕도 있고, 돋움도 있고... 넣어 놓은 것들이 마음에 들지 않음. 문득 네이버느님의 모바일 버전에 font는 어떻게 쓰일까 궁금해서 찾아봄~ 🧐 네이버 CSS초기화 코드 (mobile) body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul { margin: 0; padding: 0 } body,button,h1,h2,h3,h4,h5,input,select,table,textarea { font-family: -apple-system,Bli.. 2023. 5. 25.
max-height를 이용한 부드럽게 열리는 더보기 유의사항이나 영역을 심플하게 보이기 위해 더보기 기능을 많이 사용하는데 그동안 애니메이션을 주지 않았거나, 혹은 애니메이션을 주려고 jquery의 animate기능을 사용하고 있었다면, 간단하게 css만으로 애니메이션 기능을 줄 수 있었으니~~ 그 비밀은 바로 css를 좀 만져본 사람은 누구나 아는... max-height (뭔가 약 파는 느낌... =_=a ) 근데 간단하긴 한데 코드는 좀 길어졌음 ㅋㅋ;; 코드 더보기 여기는 더보기 영역 리스트 1 여기는 더보기 영역 리스트 2 여기는 더보기 영역 리스트 3 여기는 더보기 영역 리스트 4 여기는 더보기 영역 리스트 5 2023. 5. 10.
[css] 모서리 종이 말려지는 효과를 만들어봄. (쏘 이지~) 간단하지만 효과가 좋아보이는 종이 말리는 효과를 줘 보았음. 일단 아래에 결과물을 보면 굉장히 자연스러운 듯. ㅎㅎㅎㅎ 제작방법 ① 일단 이미지를 준비해야 함. 아래와 같이 커져있는 png 이미지 하나를 만듦. ② 만든 이미지를 position으로 띄우고, size를 0으로 줄여야 함. 본인은 transform: scale(0, 0); 으로 줄여놓았음. 이때! 이미지가 왼쪽 위에서 커져야하기 때문에 transform-origin: 0 0; 을 같이 줌. (만약 오른쪽에서 커져야 한다면, transform-origin: 100% 0; 으로 사용하면 되겠죵?) ③ 사이즈를 원래대로! transform: scale(1, 1); 으로 주면 끄읕~ (본인은 animation으로 효과를 만들어 봄) 코드 추천 포스.. 2023. 5. 8.
[css] clip-path를 이용한 텍스트 안 wave 애니메이션 열심히 일하며 달려오다가 잠깐 시간이 되서, 그동안 생각만 하고 있던 wave 효과들을 한 번 나중에 써먹어볼 생각으로 구글링 하던 중 지금까지 생각하지 못한 clip-path 방법으로 wave 효과를 주는 방법이 있어서 따라해 봄~ 일단 결과물은... 직접 해보니 쉽게 구현이 가능함.🙀 예시 코드 minitoy 코드를 보면 글자 안에 들어가있는 것처럼 보이게 하는 핵심 코드는 바로 clip-path임. clip-path clip-path는 inset, circle, ellipse, polygon와 같이 기본적인 도형부터 직접 도형을 그릴 수 있는 path()도 가능함. (포토샵의 path툴처럼!) 이제 왠만해서 포토샵에 있는 기본적인 기능들은 브라우저에서 가능한 느낌이... 혹시 크롬에서만 되는게 아닌.. 2023. 4. 26.
728x90
반응형

티스토리툴바