유튜브: https://www.youtube.com/watch?v=8o12adBFbnk
깃허브:https://github.com/qjawns0222/caremaker/tree/3%EC%9D%BC%EC%B0%A8-form-%ED%8E%98%EC%9D%B4%EC%A7%80
오늘은 form화면을 만들었습니다.
import { NextPage } from "next";
import Image from "next/image";
import Link from "next/link";
const make: NextPage = () => {
return (
<div>
<div className="section">
<div className="title">원하는 양식을 선택해주세요</div>
<div className="forms">
<Link href="/form/firstform">
<a className="form">
<div className="image">
<Image
alt="promise"
width="100px"
height="100px"
/>
</div>
<div className="name">친구 약속 만들기</div>
<div className="des">
친구와 간단한 약속
<br /> 설명보다는 한번의 링크로 해결하세요
</div>
</a>
</Link>
<Link href="/form/firstform">
<a className="form">
<div className="image">
<Image
alt="promise"
width="100px"
height="100px"
/>
</div>
<div className="name">친구 약속 만들기</div>
<div className="des">
친구와 간단한 약속
<br /> 설명보다는 한번의 링크로 해결하세요
</div>
</a>
</Link>
<Link href="/form/firstform">
<a className="form">
<div className="image">
<Image
alt="promise"
width="100px"
height="100px"
/>
</div>
<div className="name">친구 약속 만들기</div>
<div className="des">
친구와 간단한 약속
<br /> 설명보다는 한번의 링크로 해결하세요
</div>
</a>
</Link>
<Link href="/form/firstform">
<a className="form">
<div className="image">
<Image
alt="promise"
width="100px"
height="100px"
/>
</div>
<div className="name">친구 약속 만들기</div>
<div className="des">
친구와 간단한 약속
<br /> 설명보다는 한번의 링크로 해결하세요
</div>
</a>
</Link>
<Link href="/form/firstform">
<a className="form">
<div className="image">
<Image
alt="promise"
width="100px"
height="100px"
/>
</div>
<div className="name">친구 약속 만들기</div>
<div className="des">
친구와 간단한 약속
<br /> 설명보다는 한번의 링크로 해결하세요
</div>
</a>
</Link>
<Link href="/form/firstform">
<a className="form">
<div className="image">
<Image
alt="promise"
width="100px"
height="100px"
/>
</div>
<div className="name">친구 약속 만들기</div>
<div className="des">
친구와 간단한 약속
<br /> 설명보다는 한번의 링크로 해결하세요
</div>
</a>
</Link>
</div>
</div>
<style jsx>
{`
.section {
background-color: #57648c;
min-height: 1000px;
}
.title {
font-weight: bolder;
width: 100%;
display: flex;
justify-content: center;
padding: 2%;
color: orange;
font-size: 28px;
}
.forms {
border: 4px solid black;
border-radius: 10px;
min-height: 700px;
margin: 0px 20px 50px 20px;
display: flex;
background-color: rgb(212, 117, 168);
flex-flow: wrap;
}
.forms > .form {
width: 25%;
height: 40%;
border: 3px solid black;
border-radius: 10px;
margin: 3%;
background-color: #c2b4d6;
}
.forms > .form > * {
width: 100%;
text-align: center;
}
.forms > .form > .image {
width: 80%;
border: 3px solid black;
border-radius: 10px;
margin: auto;
margin-top: 2%;
margin-bottom: 6%;
background-color: white;
}
.forms > .form > .name {
font-weight: bolder;
font-size: 25px;
margin-bottom: 3%;
}
.forms > .form > .des {
font-weight: bolder;
font-size: 15px;
margin: auto;
margin-bottom: 1%;
width: 80%;
}
`}
</style>
</div>
);
};
export default make;
오늘은 특별히 한거는 없고 <Link/>에서 내부에 <a>태그 쓰고 그안에 콘테츠를 넣으면 전체를 링크로 쓸수 있었습니다. 글자할때는 <a>없어도 제대로 동작이 됬었는데 이번에 글자가아니고 이미지 글자 등등 합쳐져 있으니까 <a>태그가 있어야 되더라고요ㅎㅎ제 개인적으로 그냥 height 보다는 min-height가 좀더 유용하고 편하거 같다? 정도 를 배운거 같습니다.
'next+ts' 카테고리의 다른 글
| next+ts 5일차 MYPAGE NAVBAR FIRSTFORM (0) | 2022.04.17 |
|---|---|
| next+ts 4일차 first form 만들기 (0) | 2022.04.16 |
| next+ts 3일차 (0) | 2022.04.14 |
| next+ts 2일차 (0) | 2022.04.13 |
| next+ts 시작 (0) | 2022.04.12 |
