오늘 수업에서 배운 내용을 토대로 하나투어의 게시판이 있는 페이지를 클론 코딩 해보았다.
https://kong-dev.tistory.com/99
페이지 이동 원리/form 태그 사용
0. 목차 1.복습 2. 페이지 이동원리 3. form 태그 4. submit 1.복습 table, tr, td 를 이용하면 표를 만들 수 있는데, 주로 게시판을 만들 때 사용된다. See the Pen Untitled by donghunlee (@dev_kong_dh) on Co..
kong-dev.tistory.com
기존에 작업 하나투어 메인페이지를 클론코딩 하고 있었기 때문에,
위의 헤더는 고대로 갖다 붙였다.
이 페이지를 따라 만들면서 새롭게 알게 된 것들을 정리 해보려고 한다.
1. table, thead, tbody, tfoot, tr, th, td
t씨 집안 식구들이다.
하나씩 살펴보자
1-1. table
표를 만들 때 기본적으로 들어가는 태그다.
나 이제 표 만들거야! 라고 브라우저에게 알려주는 역할을 한다.
table 태그가 나머지 모든 태그들을 감싸고 있어야 한다.
table 없이 나머지 태그들을 사용해봤자 아무런 효과도 없다.
<body>
<thead>
<tr>
<th>완두콩</th>
<th>완두콩</th>
<th>완두콩</th>
</tr>
</thead>
<tbody>
<tr>
<td>완두콩</td>
<td>완두콩</td>
<td>완두콩</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>완두콩</td>
<td>완두콩</td>
<td>완두콩</td>
</tr>
</tfoot>
</body>
1-2. thead / tbody / tfoot
이름 부터 느낌이 온다.
표 하나만 보면 아 이거구나 싶다.
이 그림 한장이면 thead와 tbody, tfoot의 설명은 충분하다고 생각한다.
그런데 사실 이 태그들은 thead와 tbody, tfoot을 굳이 구분 지어줄게 아니라면,
사용하지 않아도 된다.
<body>
<table border="1">
<tr>
<td>완두콩</td>
<td>완두콩</td>
<td>완두콩</td>
</tr>
</table>
</body>위 태그로 랜더링을 하면
이런 표가 생긴다.
위의 세가지 태그를 전혀 쓰지 않았는데도 표는 잘 생긴다.
dev tool을 확인해보면
나는 넣은적 없는 tbody 태그가 지 맘대로 생겼다.
결국 thead, tbody, tfoot 을 구분 지어줄게 아니면 안써도 무방하다.
1-3. tr, th, td
tr 태그는 세로줄의 갯수를
th, td는 가로 칸의 갯수를 만드는 태그다.
그럼 th와 td의 차이만 알면 된다.
th 태그의 역활은 표의 카테고리를 나타내고
td는 는 내용을 나타낸다.
이 표를 다시보면, th는 종목 축구 배드민턴 수영 을 만드는데 쓰여졌고,
td는 밑의 내용을 입력하는데 사용됐다.
th는 thead 의 자식 엘리먼트로 사용 됐고,
td는 tbody와, tfoot의 자식 엘리먼으로 사용됐다.
엥 그러면 th 는 thead에서만 쓰이는 걸까?
td는 thead에서 사용하지 못하는 걸까?
<body>
<table border="1">
<thead>
<tr>
<!-- thead에서 td 사용 -->
<td>완두콩</td>
<th>완두콩</th>
<th>완두콩</th>
</tr>
</thead>
<tbody>
<tr>
<!-- tbody에서 th 사용 -->
<th>완두콩</th>
<td>완두콩</td>
<td>완두콩</td>
</tr>
</tbody>
<tfoot>
<tr>
<!-- tfoot 에서 th사용 -->
<th>완두콩</th>
<td>완두콩</td>
<td>완두콩</td>
</tr>
</tfoot>
</table>
</body>
아니다 잘 된다.
하지만 차이는 분명히 보인다.
th 는 글자체가 두껍고 가운데 정렬이 되어있고,
td 는 보통 글자체에 왼쪽 정렬이 돼 있다.
이 차이밖에 없다..
1-4. ??그래서 이거 왜 씀??
내가 기존에 알던건 table과 tr, td 세가지였다.
사실 이 세가지만 있어도 원하는 모양의 표를 만드는 데는 아무런 지장이 없다.
<table border="1">
<tr>
<td>완두콩</td>
<td>완두콩</td>
<td>완두콩</td>
</tr>
<tr>
<td>완두콩</td>
<td>완두콩</td>
<td>완두콩</td>
</tr>
<tr>
<td>완두콩</td>
<td>완두콩</td>
<td>완두콩</td>
</tr>
</table>
전혀 문제가 없다.
글자 굵기와 정렬 해주는건 CSS에서 쉽게 작업 할 수 있으니,
저걸 꼭 써야 되는 이유는 없다.
우린 이런걸 시맨틱 태그라고 부른다.
기능적으로 크게 차이는 없지만
태그 이름이 다른 아이들.
안써도 그만인 아이들.
그럼에도 불구하고 내가 시맨틱 태그를 쓰는 이유는 몇가지가 있는데,
첫번째 접근성.
두번째 검색의 용이성.
세번째 가독성이다.
첫번째 접근성의 예시로는 시각장애인분들이 스크린 리더를 통해 화면을 음성으로 듣는다면,
시맨틱 태그로 짜여진 코드가 이해하기가 쉽다.
두번째 검색엔진에서 검색이 잘 된다. 라고 하는데 사실 나는 크게 와닿지는 않는다.
세번째 가독성이 좋다.
사실 내가 시멘틱 코드를 좋아하는 이유다.
내가 아직 짬밥이 안돼서 그런거겠지만
html 문서 만으로는 머릿속에 명확하게 그려지지 않는데,
시멘틱 코드를 사용하면, 아 이부분은 이 표의 카테고리를 나타내는 구나 정도는 된다.
물론 id 나 class를 이용하면 되긴 하지만 지저분하니까...
지저분한 코드는 읽기가 싫으니까...
결국 그냥 개취의 문제인건가 싶기도 하다..ㅎ
코드는 컴퓨터가 동작하게하는 명령어이기도 하지만,
사람에게 읽히는 문서이기 때문에 가독성이 좋은 코드가 좋은 코드다.
라는 말을 참 좋아하는데, 항상 신경을 쓰려고 노력한다.
잘하고 있는지는 모르겠다.
2. border-collapse
게시판을 착착착 만드는 도중에 ..? 뭐지..? 싶은 부분이 있었다.
괜찮은거 같아 보이지만 확대를 해보면...
셀과 셀의 사이에 살짜악 보이는 흰색 경계선이 보인다.
한번 신경이 쓰이니까 굉장히 거슬린다.
여기저기 한번씩 border: none 을 넣어 봤지만 사라지지 않는다...
저 빨간색으로 표시된 부분이 남아있는거다.
불-편
해결하기 위해 구글링을 하다가
border-collapse를 발견했다.
값은 collapse 와 seperate 두가지가 있다.
seperate는 기본값이고
collapse는 겹치는 테두리를 상쇄시킨다고 하는데....
그냥 표에서 여백없애는 용도이외에는 그닥 쓰일일이 없을 것 같다...
table {
border-collapse: collapse;
}
편-안
3. colgroup
아직 정리못함.
'경일 > HTML & CSS' 카테고리의 다른 글
| 페이지 이동 원리/form 태그 사용 (0) | 2021.12.29 |
|---|---|
| 레이어팝업/모달팝업 이용해서 회원가입 창 만들기 (0) | 2021.12.28 |
| 햄버거 메뉴 만들기 (0) | 2021.12.27 |
| html, css 클론코딩 (0) | 2021.12.23 |
| block, inline, inline-block차이점/ 자식 element 사용/ html, css 클론코딩 (1) | 2021.12.22 |
댓글