[Java 풀스택 과정 강의] 12/30일차

※ TIL와는 별개로 적는 개인 개발 일지라서 말은 좀 편하게하는 페이지입니다.
일지이기 때문에 일기의 성격이 더 강합니다.

 

 

12/29일에 이어서 HTML 강의. 12/31부터는 CSS 진도를 나갈 듯.

이번 진도는 table과 map, iframe, form. 간략하게 정리해본다.

 

table

table은 최근 여러 매체에서 지원이 미비하게 되면서 사장되는 추세지만

table만큼 직관적인 데이터 처리는 없긴하다. 무엇보다도 div의 grid는 라인기능 지원이 좀 미묘해서, table같은 안정감을 주지 못하는 게 문제라고 해야할까…

대부분의 브라우저에서는 아직도 지원하고 있기 때문에 알아둬서 나쁠 건 없다. 특히 form 입력에서 div이냐 dl이냐 table이냐 하면 table쪽이 압도적으로 더 실용성 좋아보이기도 하고…

 

연습문제용.

 

다만 table의 문제점은 셀 병합이라고 생각하는데, 이번에도 칸 수를 잘못 세는 일이 일어났다. grid-clomn쪽보다 덜 직관적이라서 확인하기 어려운 단점이 여기에 있는 것 같다.

table은 사실 어제까지도 만지고 있었던 것이라서 크게 복습할 건 없다. 구조가 비교적 간단하기도 했고.

 

 

+ 1월 8일 추가

그런데 테이블 구조가 헷갈려서 재정리하기로 했다. 🙄

 

 

테이블 구조를 코드 블럭으로 나타내면 이렇게 된다.

 

<table>
	<thead> <!-- 헤더 영역. 제목 행들을 나타낸다. -->
    	<tr> <!-- 행(row)의 전개는 thead도 마찬가지. -->
        	<th>제목1</th> <!-- thead에서는 td를 사용하지 않는다. 사용하는 것은 th가 된다. -->
            <th>제목2</th>
        </tr>
    </thead>
	<tbody> <!-- 본문 영역. -->
    	<tr>
        	<th></th> <!-- 행의 헤더로서의 역할을 위해 삽입해도 좋다. -->
            <td></td> <!-- 일반적인 내용을 전개한다. -->
        </tr>
    </tbody>
	<tfoot> <!-- 푸터 영역, 합계 등을 위해 사용되는 영역으로, 자주 사용되진 않는다. -->
    	<tr> <!-- 행 전개는 tfoot도 마찬가지. -->
        	<td></td> <!-- 여기서는 td를 그대로 사용한다. -->
        </tr>
    </tfoot>    
</table>

 

colspan의 경우 td나 th에서 자주 사용하고, rowspan의 경우 tr에서 자주 사용하는 셀병합 속성이다.

+ 수정사항

rowspan도 사실 td에서 사용한다.

 

 

map

사실 usemap이라고 하는, 이미지에 영역을 만들어 링크는 거는 이 방식은 요즘은 잘 쓰고 있지 않는다. 디자인적인 유행도 물론이지만, png가 자동 투명화 처리가 되면서가 큰 듯하다. css의 발전도 한몫하고 있고. HTML5가 되어서는 거의 사장된 개념이라 본다(실제로 2010년 이후로 사용하는 경우를 거의 못봤고.) IE가 아직까지 인터넷 브라우저를 섭렵할 무렵에 나도 usemap을 너무 멋있어하고 부러워했다. 다만 좌표를 따는 방식이라는 게 너무 번거로웠고, 모두 그렇게 생각하고 있었는지 사라졌다.

 

물론 그렇다 해도 usemap에 대해서 알아두는 게 나쁘지 않는 까닭은, 기초 중 기초인 x와 y값을 딴다라는 개념을 알려주기가 쉽기 때문이다. '좌표값을 따는' 행위는 수많은 태그의 개발로 예전보다 훨씬 줄어들었지만, 여전히 position:absolute;나 position:fixed;가 살아있는 한 x값과 y값도 살아있을 것이고, top과 left값의 기본적인 개념이 x축과 y축에 기반한다는 걸 알아둬야 하기 때문이다.

 

학생 한 분의 질문이 있었는데, target은 왜 #을 안 붙이는데 map은 #을 붙이느냐였는데, 그냥 외우는 게 쉽지만 둘의 처리가 다르기 때문이라고 답변을 드리고 싶다. 다만 이게 어떤 규칙이냐로 이해하기보다는 map은 그래, 그냥 그러려니해. 라고 하는 게 편하니까… 실제로 나도 name 대상으로 하면서 #을 붙이는 건 map 정도나 봤다. #은 이제 거의 ID의 전유물 같은 거라, name에 #을 붙이는 경우는 거의 보지 못한 듯.

 

 

 

iframe

iframe도 요즘은 예전만큼은 쓰지 않는 추세다. map보다는 그래도 보이는 편이다. iframe은 쓸 곳이 무궁무진하게 많기 때문인듯. (특히 유튜브 영상을 퍼올 때는 대체로 iframe embed이 지원되기도 하고). 다만 주로 컨텐츠를 가져오거나 할 때로 삽입되지 예전처럼 링크를 걸거나 하는, 내부페이지 사용은 자주 안 하는듯.

예전에는 꽤 많이 썼다. 아직 프레임이라는 개념이 남아있을 무렵에…(지금도 남아있지만). 아마 옛날 수업이었으면 frame도 알려주지 않았을까? frame과 frame border라는 존재가 흔적기관만 남아 iframe을 설명하고자 하니까 미묘해지는 것 같기도 하다.

옛날에는 iframe 투명화 어떻게 하냐는 걸로 정말 많이 찾았었다.

 

 

 

form

회원가입이나 검색에 사용한다. 대기업 사이트 같은 데가 아니면 아직도 자주 쓰인다(특히 영세쇼핑몰). 그 경우 table과 같이 많이 쓰이는듯… 사실 간편해서 나도 자주 쓰는 편. 

사실 요즘은 div의 시대라서 뭘 봐도 div으로 이루어져있고, 데이터마저 js로 처리하고는 한다. 하지만 데이터 전송이라는 개념을 잘 모르면 js로 이걸 쉽게 처리할 수 있을까? 싶음.

 

 

이건 과제 제출용.

 

최근 개발 때문에 데이터 전송과 관련한 이모저모 공부를 더 해보고 있는데, 그 때문에 form의 get과 post 같은걸 보고 있으면 이론 공부를 다시하는 기분이 든다. form이야 말로 get과 post의 기초 중 기초다보니-최근에는 다른 방식으로 둘을 컨트롤하므로- get과 post에 대한 이론을 숙지하기엔 form이 제일 좋다.