리액트로 card maker를 만드는 프로젝트를 하고 있는데, 카드 양식으로 쓸 표를 만들어야 했다. html 태그 중에 table 태그로 만들면 될 것 같아, 만들어 보았다.
1. table 태그로 만들기
정보는 mdn 사이트와 아래 블로그를 참고했다.
나는 card 를 만들기 위한 양식을 적을 폼이 필요했기 때문에, 따로 표 제목(caption 태그)이나 대분류(thead 태그)를 넣을 필요가 없었다. thead는 생략 되지만, tbody 없이 tr을 썼다간 에러가 난다.
<table border="1" width="100%" height="100%">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table> 위 코드로 아래와 같은 표를 얻었다. 배경 색은 다른 곳에서 지정한 것이다.
나는 모든 영역의 너비가 꽉 채워지는 표를 얻고 싶었다. 찾아 보니 table 태그에는 colspan(가로 셀 병합), rowspan(세로 셀 병합) 속성이 있었다.
<td colspan="합칠 셀의 개수"> 내용 </td>
<td rowspan="합칠 셀의 개수"> 내용 </td>하지만 두 셀을 전체 너비의 50%씩 차지하도록 만들려면 개수를 "1.5"라고 적어야 하는데, 그렇게는 되지 않았다. 다른 방법으로 grid 를 시도해봤다.
2. grid 로 만들기
grid 참고 사이트
grid는 flex(1차원 레이아웃)와 달리 2차원 레이아웃을 편하게 할 수 있다!
처음엔 div 로 row 를 나누지 않고 grid 로 해결하려고 했는데, 각 행에 포함된 셀의 개수가 다를 땐 어떤 식으로 써야 할 지 감이 오지 않아서 직접 나눠서 실행했다.(왠지 더 세련된 방법이 있을 것 같다) 아래는 내용을 모두 넣어 작성한 코드다. CSS는 PostCSS를 쓰고 있다.
<form className={styles.card}>
<div className={styles.row1}>
<input name="name" type="text" placeholder="Name"></input>
<input name="company" type="text" placeholder="Company"></input>
<select name="color">
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="colorful">Colorful</option>
</select>
</div>
<div className={styles.row2}>
<input name="title" type="text" placeholder="Name"></input>
<input name="email" type="email" placeholder="Name"></input>
</div>
<div className={styles.row3}>
<textarea name="message" rows="2"></textarea>
</div>
<div className={styles.buttons}>
<button>No file</button>
<button>Add</button>
</div>
</form>PostCSS는 클래스 명을 고민하지 않아도 돼서 너무 너무 편하다!
.card {
width: 100%;
height: 12rem;
display: grid;
}
.row1 {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.row2,
.buttons {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.row3 {
display: grid;
}이렇게 원하는 표를 얻었다.
3.flex 로 만들기(최종)
하지만 역시 더 세련된 방법이 있었다. 굳이 row1, row2, row3 으로 나누면서까지 gird 를 쓰는 것보다, flex 를 쓰는 것이 훨씬 간편했다.
<form className={styles.card}>
<input className={styles.input} name="name" type="text" placeholder={name? name : "Name"}></input>
<input className={styles.input} name="company" type="text" placeholder={company? company: "Company"}></input>
<select className={styles.select} name="color">
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="colorful">Colorful</option>
</select>
<input className={styles.input} name="title" type="text" placeholder={title? title: "Title"}></input>
<input className={styles.input} name="email" type="email" placeholder={email? email: "Email"}></input>
<textarea className={styles.textarea} name="message" rows="2">{message}</textarea>
<div className={styles.buttons}>
<button className={styles.button}>{fileName}</button>
<button className={styles.button}>Add</button>
</div>
</form>아래는 CSS 파일이다.
.card {
width: 100%;
height: 12em;
flex-wrap: wrap;
margin-bottom: 1.5rem;
display: flex;
}
.input,
.select,
.textarea,
.buttons {
width: 100%;
}
.input,
.select {
flex: 1 1 30%;
}
.textarea {
flex-basis: 100%;
}
.buttons {
display: flex;
}
.button {
flex: 1 1 50%;
}flex 와 grid 를 적절히 쓰는 훈련을 해야겠다!
추가+ )) 썸네일은 벨로그 아이디 oneook님이 만들어 주신 링크에서 만들었다! 감사합니다👏
