비전공에서 취업까지!! [6화] front 네번째걸음 앞으로는 중요한거만 나오니까 밑줄 쫙! 별표 하나! 돼지꼬리 땡땡!! -입니다.-
안녕하세요 SsunDev입니도!
어제부터 드디어 실제로 홈페이지 구현에 *자주* 쓰이는 테그들이 등장하기 시작했습니다.
그말은? 잘 알아두어야 한다! 입니다.
그래도 어떻게 제 설명들이 여러분들께 쉽게 받아들여지고 계실지 궁금합니다
최대한 쉽게 설명하려고 하는데 그럼에도 부족한 내용이 있을 수 있으니
많은 관심 댓글 그리고 추천 도네이션 후원 별풍선 음성도네 영상도네 부탁드리겠습니다(?)
역시나 힘차고 강하게 html_important03 하고 새페이지 만들고 업그레이드된 html뼈대 뙇!
오늘 배워볼 테그는 바로 <table></table> 이라는 테그입니다.
테이블? 탁자?
개발자에게 테이블이란 바로
이런 표를 말합니다. 이걸 왜 테이블이라고 하냐 함은?
전쟁중에 회의를 할 때 장기나 체스처럼 군사들 미니어쳐를 지도위에 세워두고 회의를 진행했는데 그 지도가 저렇게 칸칸이 나뉘어져서 이런 표를 테이블이라고 한다!! 라고 들었습니다 오피셜은아닙니다 허허 그래서 테이블은 표를 그리는거구나 하고 생각하시면 됩니다.
다시 이제 돌아와서 테이블을 만들어보겠습니다.
<ol><ul> 과 마찬가지로 <table> 이라는 실제적으로 화면에 나오진않지만 선언하는 테그가 있고
그안에 세로줄 가로줄을 각각 <tr></tr>, <td></td>테그를 써서 표현합니다. 여기서 중요한건
항시
행 = 가로 = 로우 = <tr> 라고하고
열 = 세로 = 컬럼 = <td>이라고 합니다
<tr>코드 안에 <td>가 존재해야하며 코드로 작성할때는 행을 먼저 나열하고 그 행에 해당하는 열을 정의해주어야 합니다. 말이 어렵죠?
이런 표를 만든다고 할때 1행을 선언하고 2 3 4 5 열 선언 그다음에 2행 선언 7 8 9 10번 열 선언 이렇게 코드를 짜주시면 됩니다. 그럼
1행에는 여자아이돌을 2행에는 남자아이돌을 정의해보겠습니다.
테이블이란 선언 아래 1행을 먼저 선언을하고
이렇게 1행<tr>안에 <td>열을 선언해주면됩니다! <td></td> 하나가 세로 한칸씩이 됩니다. 총 4열이겠죠?
이상태로 alt + B 를 해보면?
이렇게 이름들이 나열이 됩니다 그런데 칸이 나눠져있지않죠?
그래서 <table> 테그안에 border="1" 이라고 선 두께를 설정해주는 속성을 추가해보겠습니다.
이렇게 테이블에 속성을 추가해주면?
드디어 테이블이 완성 되었습니다! 그리고 우린 이제 개발자니까? 행과 열을 각각 로우, 컬럼 이라고 부르겠습니다 개발하실땐 로우 컬럼 이렇게 부르게되니까 지금부터 익숙해지면 좋습니다.
그럼 마저 2번재 로우도 만들어볼까요?
이렇게 다들 완성 하셨는지요?
자 여기서 보면 또 각각 1번<tr>과 2번<tr> 서로는 속해있지않는 형제코드겠죠? 그 안의 <td>는 <tr>의 자식코드겠죠? 이쯤하면 부모자식형제코드 익숙하시겠죠??
그렇다면!!!! 뉴진스를 담고있는 <td>는 <body>테그와 어떤 관계일까요??
바로 자식>자식>자식코드 입니다! 촌수 따져가면서 증조할머니코드 고조할배코드 이러시면 안됩니다!
이렇게 테이블을 만들어 보았습니다.
그런데 테이블이 항상 칸이 딱딱 나눠져있는게 아닌 합쳐져있는 테이블도 있잖아요? 그것도 만들어보겠습니다.
이런 셀 합치기 기능을 사용하면
이런식으로 1번 로우는 4개의 컬럼이 존재하지만
2번 로우는 (123)컬럼 한개와 4번 컬럼 하고 3개를 묶어버릴 수 있습니다.
뿐만아니라 세로로도 묶을수가 있는데 르세라핌과 투바투부분을 묶어보겠습니다.
이런 모양이 나오겠죠?
이렇게 가로 세로 셀합치기 기능을 하는 속성은 각각 가로colspan ,세로 rowspan 입니다. 사용방법은
이렇게 합치고자하는 시작지점에가서 속성으로 colspan="3" 라고 쓰시면 됩니다 3개의 컬럼을 합쳐줍니다.
중간에 nct와 스키즈 컬럼은 있으면 안되겠죠?? 주석! ALT + B해보면
잘 합쳐진걸 볼 수 있습니다. 이번엔 르세라핌과 투바투를 합쳐보겠습니다.
이렇게 르세라핌부분에서 세로로 합쳐야하니 rowspan="2"를 주고 그 아래 투바투부분을 비워주면?
어때요 쉽죠?
표를 만들다보면 2번로우의 컬럼을 1번로우에서 정의하고, 2번 컬럼들 몇개를 묶고 하는 복잡함 때문에 정의된 컬럼 로우 갯수보다 더 입력되거나 하는 경우가 생깁니다.
1번로우는 4개의 컬럼 2번로우는 5개의 컬럼등 이런 오류를 만들면 어떻게 될까요? 한번 만들어 보겠습니다.
주석을 다 풀어보면?
난리가 났군요 코드라는건 위에서부터 한줄씩 읽히다보니 르세라핌의 1행 4번열 먼저 세로로 늘어나고
방탄의 3칸차지가 늘어나고 나머지 컬럼들이 생성되었군요 이렇듯 colspan rowsapn을 쓸때는 각 컬럼수의 합을 잘 계산하셔야합니다. 코드가 많아지고 길어지면 어디서부터 꼬인건지 찾는게 쉽지 않습니다. 따라서 컬럼 하나씩만들면서 만들어가지말고
먼저 가로 세로를 잘 센 다음
이런식으로 가로세로를 잘 세서 뼈대부터 만들고 작업하시길 바랍니다. 이렇게 가로세로 갯수만큼 뼈대를 만들고 스판 넣어서 잘 합친다음 데이터를 넣으면 코드가 덜 꼬이겠죠?
추가로 border="1"부분도 사실은 저기에 써서 꾸미는건 별로 추천드리지 않습니다 만 처음에 뼈대 만들때는 선을 보긴 해야하니까 넣는데 나중엔 빼주시는게 좋습니다 나중에 뼈대 예쁘게 그리는 기술을 CSS라고 따로 배웁니다.
또 혹시나 이미 엄청난 표의 데이터를 만들고있는데 추가로 만들어달라고 컬럼의 갯수가 맞지 않은 데이터 추가를 요구해온다면 어쩌면 테이블 구조부터 해서 새로 만드는게 오류없이 더 빨리 만드는 길일 수 도 있습니다.
자 이런식의 표가 있습니다. 이렇게 데이터부분이 아닌 상단의 데이터의 제목을 정의해둔곳을 head영역이라고 합니다
그다음 데이터부분은 body부분이로 보통 그 데이터들의 총 합산등을 나타내는 하단의 영역을 footer 영역이라고 합니다.
이걸 코드로도 나타낼 수 있는데 <thead></thaed>, <tbody></tbody>, <tfoot><tfoot>라고 합니다 thead부터 천천히 만들어보겠습니다
일단 컬럼과 로우부터 세야겠죠?
총 5개의 컬럼과 4개의 로우로 이루어져있습니다. 일단 뼈대부터 만들어보면!
이런식으로 뼈대를 잡았습니다 여러분도 잡으셨나요?
자 여기서 각각 영역들의 <tr>테그들에 <thead> <tbody> <tfoot>로 감싸보겠습니다.
이렇게 헤드 바디 부터를 붙였습니다 그런데 뭔가 이상하죠???
네 그렇습니다 <헤드> <바디> <푸터> 코드 안에 <tr> <td> 가 있으니 당연히 부모자식관계가 되어야 하고 그렇기에 들여쓰기를 해주어야겠죠?
항시 부모 자식의 관계와 형제의 관계를 잘 생각하여 정의해주시길 바랍니다.
이렇게 헤드 바디 푸터 영역이 나뉘게 되었습니다. 아 table border="1" 도 넣어주시구요!
그상태로 alt + b 를 눌러보면?
아까 만들어진 테이블 아래 두번째 테이블의 5x4가 만들어진걸 보실 수 있습니다.
이제 각각 데이터들을 넣어볼까요?
이렇게 데이터가 들어가게 됩니다. alt + B 를 눌러보면?
이렇게 나오게 됩니다.
그런데 헤드 바디 푸터를 나눴음에도 달라진게 없는것 같지 않나요?
그렇습니다 헤드 바디 푸터는 기본적으로 레이아웃에 영향을 주진 않지만 나중에 데이터가 많아질경우 헤드를 고정하고 바디영역만 스크롤 되게 하거나 하는 셀고정등의 그런 효과를 갖고있습니다.
그렇다면 뭘로 표기를 해주어야 할까요?
바로 헤더 푸터, 바디의 사이드 각 부분에 <td>에 <th>를 대신해서 써주면 됩니다.
공백, 1등, 2등, 3등, 4등 / 여자/남자/종합, 100, 90, 80, 70 부분의 <td>를 <th>로 바꿔주면 됩니다.
이 부분들의 <td> 를 <th>로 바꿔주면?
해당부분의 글자들이 짙어지는걸 보실 수 있습니다.
단순히 글자에 볼드처리를 하기위함이 아닌 제목부분을 정의하는 기능이니 이 부분들에만 다른 기능들을 더 추가할 수도 있습니다.
그렇기때문에 헤드 바디 푸터를 잘 나눠주시고 각 부분의 제목부분에 <th>를 잘 넣어주시면 됩니다.
이렇게 오늘은 테이블을 배워보았습니다.
아직 테이블에서 쪼오오끔 남았는데 다음강의에서 해보겠습니다.
햐 점점 코드 하나만 알려드려도 이렇게 길게 설명을 하게 되네요!
길어질수록 집중력이 흐려진다고 생각되어 최대한 짧게 설명드리고싶은데 중요한 내용들이라 어쩔수 없나봅니다.
하시면서 이렇게 설명했으면 더 좋지 않았을까 아니면 이런부분이 미흡했다 이런게 있으시면 꼭 댓글로 제게 가르침을 주십시오!