728x90 🧱 언어 모음집160 [CSS] :hover 시 이미지 변경 1. 이미지를 삽입할 img 태그 두 개를 넣고 div로 감싼다. (div > img1, img2) Hover Effect 2. position 속성으로 두 개의 이미지를 겹친다. .jb-a { width: 400px; margin: 0px auto; position: relative } .jb-c { position: absolute; top: 0px; left: 0px; } 3. 두 번째 이미지를 display: none을 사용하여 보이지 않게 한 후, :hover 시 display: block 속성을 사용하여 보이게 한다. .jb-c { position: absolute; top: 0px; left: 0px; display: none; } .jb-a:hover .jb-c { display: bloc.. 2022. 2. 24. [CSS] :hover 시 transition 적용하기 전에는 div 여러 개 만들어서 카테고리를 구현 했었는 데 새로운 방식으로 구현 해보고 싶어서 ul, li 태그를 사용하였다. 아래와 같이 ul, li 태그로 카테고리에 들어갈 메뉴들을 적어주고 CSS 속성만 지정하면 간단하게 구현 할 수 있었다. 거기에 사용자가 li에 마우스를 올렸을 경우(:hover) 다른 색상을 보여주도록 UI를 수정하였고 더불어 transition을 사용하여서 스무스 하게 변할 수 있도록 했다! transition 적용하는 방법은 아래 포스팅을 참고해도 좋고, 아래 코드를 참고해도 좋을 것 같다. [생활코딩] transition transition은 "전환"이라는 뜻을 가지고 있고, CSS의 여러가지 효과(속성)들에 값이 변경 되었을 때 그 전환을 부드럽게 하는 기능을 말합니다... 2022. 2. 23. [CSS] relative와 absolute의 관계성, 차이점 프로젝트 진행하면서 계속 쓰다 보니 display: relative와 display: absolute를 언제 사용하는지 감이 잡히는 것 같다. top, right, bottom, left와 같은 속성들을 사용 할 때는 display: static(기본값)을 사용할 수 없는 데 display: relative 속성을 부여 시 해당 태그의 바로 위에 있는 부모 태그를 기준으로 이동한다. (상대적) display: absolute 속성을 부여 시 body 태그(브라우저)를 기준으로 이동한다. (절대적) display: relative와 absolute를 함께 사용 시에는 relative 속성을 가지고 있는 태그가 부모가 되고absolute 속성을 가지고 있는 태그가 자식 태그가 되어 상대적으로 이동한다. (상.. 2022. 2. 23. [CSS] CheckBox에 font-aswesome 사용해서 체크 표시 추가하기 어제 구현했던 checkBox에 체크 표시를 넣고 싶어서 찾아보니 아래와 같이 font aswesome을 사용하면 간단하다고 하여 정리해보았다. Next.js에서 구현할 때를 예로 들고 있다. 1) _app.js에 Head 태그를 만들고, 아래 link와 script르 삽입한다. => _app.js -> Head 안에 삽입 2) input 태그 type 중 checkbox와 label을 사용하여 checkBox를 커스텀한다. => JoinComponent, LoginComponent의 checkbox에서 사용 (변형 시킴) 3) 참고한 블로그에서는 :checked일 때만 사용하셨는 데 나는 둘 다 적용했다. /*input 은 숨겨주기*/ input#chk_top{ display:none; } /*inpu.. 2022. 2. 23. [Next.js] 동적 라우팅 사용하기 Next.js에서는 동적 라우팅을 지원하고 있는 데 그 종류와 사용 방법에 대해서 알게 된 내용을 까먹지 않게 정리하면서 다른 블로그도 참고하여 채울 예정이다. 동적 라우팅은 영어로 Dynamic Routing이라고 한다. 크게 3가지 종류가 있는 데 🥕 일반적인 사용([@]) 🥕 Multiple Segment 사용([@]/[@]) 🥕 Catch All Routes로 Optional 하게 사용([[...@]]) 일반적인 사용 ([@]) 1️⃣ 예시 1 - pages/[test].js 파일을 생성 시 url에서는 /orange, /strawberry로 접근 가능할 수 있다. import { useEffect, useState } from "react"; import { useRouter } from "n.. 2022. 2. 22. [CSS] z-index 팝업창 퍼블리싱을 진행하던 중 배경 div와 팝업창 modal의 순서가 바뀐 걸 발견했다. 이를 해결하기 위해 z-index를 사용하였는 데 적용이 안 되는 것 같아서 아래 블로그들을 참고하여 해결했다. HTML DIV tag: 영역 겹치기와 보이기 순서 지정하는 방법 - Position, z-index HTML DIV 영역 2개 이상을 서로 겹치는 방법과 겹침 순서를 설정하는 방법을 설명합니다 ojji.wayful.com CSS / z-index / 요소의 수직 위치 정하는 속성 z-index position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 이때 요소들의 수직 위치를 z-index 속성으로 정합니다. 값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 www.co.. 2022. 2. 22. [CSS] 체크박스 꾸미기 체크박스 꾸미는 방법 체크박스는 체크박스와 연결된 label을 만들고, 라베을 꾸미며 됩니다. 그렇게 할 경우 라벨을 클릭하면 체크박스가 클릭되고, 다시 클릭하면 체크가 해제되는 성질을 가지게 됩니다. 체크박스 꾸미기 빈 라벨을 가진 체크박스를 생성합니다. 이때 for 속성을 이용하여 체크박스와 라벨을 연결 해야 합니다. (이때 Next.js를 사용하는 경우 for이 아니라 htmlFor을 사용해야 합니다.) 자동 로그인 라벨 꾸미기 1. 라벨을 원하는 모양으로 꾸밉니다. (여기서 "input"은 #rememberUserInfo이고, "+ label"을 사용해서 input에 연결된 label을 선택 합니다.) & #rememberUserInfo + label { width: 20px; height: 20.. 2022. 2. 21. [Next.js] 동적 경로 세부정보 다음은 동적 경로에 대해 알아야 할 몇 가지 필수 정보입니다. 아래 공식 문서를 보는 게 더 도움이 될 것 같아 따로 정리하지 않았습니다. Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org 2022. 2. 20. [Next.js] index 페이지 다듬기 index 페이지 다듬기 다음으로는 인덱스 페이지(pages/index.js)를 수정하겠습니다. Link를 사용하여 각 게시물 페이지에 링크를 추가 해야 합니다. 1️⃣ pages/index.js 파일 최상단에 Link와 Date를 import 하는 코드를 추가합니다. import Link from "next/link"; import Date from "../pages/components/date"; 2️⃣ Home 컴포넌트에 li 태그를 아래와 같이 수정합니다. {title} 3️⃣ yarn dev 또는 npm run dev로 개발 서버를 구동하고 아래 페이지를 방문해보면 아래와 같이 출력되는 걸 볼 수 있습니다. 🥕 localhost:3000/posts/ssg-ssr 🥕 localhost:3000/p.. 2022. 2. 20. 이전 1 ··· 3 4 5 6 7 8 9 ··· 18 다음 728x90
