[ TIL ] HTML로 표 만들기

kgorae·2021년 9월 28일
0

(TIL) HTML/CSS

목록 보기
2/2
post-thumbnail

리액트로 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 참고 사이트

https://studiomeal.com/archives/533

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님이 만들어 주신 링크에서 만들었다! 감사합니다👏

https://velog.io/@oneook/썸네일-메이커Thumbnail-Maker-Toy-Project

profile
좋은 개발자, 좋은 사람

0개의 댓글