과거 이와같이 만들어서 효과를 사용했었는데 다시 만들 필요성이 있었다. 그리고 좀더 부드럽게 만들고 싶었다. 아래와같이 다시 만들게 됬는데 추후 스타일링은 다시 해야할거 같다. 사용한 CSS애니메이션 스타일은 이와같이 사용했다. next.js의 style jsx안에서 사용했고, 어디서 사용해도 크게 다를건없다. 다만 좀더 디테일하게 설정한 부분이 두 가지 있다. 단어 태그하나하나당 div로 감싸서 사용하기도 했지만 각 단어에 위아래 움직이는 효과를 주지않고 한 묶음으로 아래와 같이 묶어서 사용해줬다. #꼬들 #탱글 #쫄깃 #파 #달걀 #소고기 그렇게 묶어서 사용해줘야 다시 단어 하나하나 마다 좌우로 배치해줘서 자연스러운 position설정이 가능했다. .side{ position:relative; lef..
1.border-radius 이와같이 둥글게 만드는데 사용했다. border-radius: 15px; 참고한링크는 https://developer.mozilla.org/ko/docs/Web/CSS/border-radius border-radius - CSS: Cascading Style Sheets | MDN CSS border-radius 속성은 요소 테두리 경계의 꼭짓점을 둥글게 만듭니다. 하나의 값을 사용해 원형 꼭짓점을, 두 개의 값을 사용해 타원형 꼭짓점을 적용할 수 있습니다. developer.mozilla.org 2.border:속성 선의종류를 그냥 줄로할거냐 점선으로 할거냐 등등... border: solid; 이와같이 사용했고, px까지지정해서 사용할 수 있다. https://develo..
이와같이 원래는 그냥 아무것도 없던 느낌의 div박스녀석들을 클릭하면 눌려지는 효과와 이벤트를 주기로 했다. 한번쓰니 응용해서 여기저기 쓸 수 있었음 {/* classname N오타 */} {setRamen1(1)}}> 봉지라면 각 버튼은 이와같이 div 그리고 className은 figure로 만들어주었다. Bootstrap의 Figure를 사용해 주었다. 반응형으로 이미지크기가 잘 변화하기 때문이다. .figure{ cursor: pointer; } .figure:active{ transform: translateY(4px); } 그리고 CSS는 이와같이 효과를 주었다. cursor옵션에 pointer를주어 클릭모양으로 바뀌게 했다. 그리고 active를넣어주어 눌러지는 효과를 나타나게 만들어 주었다..
아이콘 클릭후 검색화면을 만들고 있는데... 리셋버튼과 검색버튼을 우측으로 정렬하고 싶었는데 마땅치 않았다. {/* 순서가 왜바뀌는지는 모르지만 서치랑,리셋버튼바뀜 */} {setRamen1(0);setRamen2(0);setRamen3(0) }}> Bootstrap Grid로 나눈 부분중 한 파트인데 이 사진과 관련된 코드! 보면 className을 icon으로주고 .icon{ float:right; cursor: pointer; } .icon:active{ transform: translateY(2px); } 이와같이 float속성에 right로 줘서 해결했다. 다만 반응형으로 모바일 화면에선 이런식으로 바뀌어지길래 이와같이 주어서 해결했다. 정상적으로 잘 작동하는 부분! 일단 float으로 사용해서..
  를 사용하면된다. Next.js 에 부트스트랩 사용중에 Nav바에서 a태그에 띄어쓰기 없이 붙어있는 현상이 발생했다. 카테고리검색 키워드검색 검색결과 텍스트검색결과 하지만 이와같이 a태그안에 공백을 넣어준결과 이와같이 사용할 수 있게됨
https://developer.mozilla.org/ko/docs/Web/CSS/font-size font-size - CSS: Cascading Style Sheets | MDN font-size CSS 속성은 폰트의 크기(대문자 "M"의 크기)를 지정합니다. 폰트 크기를 바꾸면 em 과 ex 단위로 계산된 다른 항목들의 크기를 바꿉니다. developer.mozilla.org 폰트사이즈 조정 https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line text-decoration-line - CSS: Cascading Style Sheets | MDN The text-decoration-line CSS property sets the ..
https://www.w3schools.com/css/css_align.asp CSS Layout - Horizontal & Vertical Align 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 참고한 사이트는 위와 같다. .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 속성을..
https://www.30secondsofcode.org/css/s/zoomin-zoomout-animation Zoom in zoom out animation - 30 seconds of code Creates a zoom in zoom out animation. www.30secondsofcode.org 참고한 페이지는 위와같다. .zoom-in-out-box { margin: 24px; width: 50px; height: 50px; background: #f50057; animation: zoom-in-zoom-out 1s ease infinite; } @keyframes zoom-in-zoom-out { 0% { transform: scale(1, 1); } 50% { transform: sca..