[HTML] a링크 이용과 table 개념 알아보기

• a 링크 이용하기

-링크를 통해 이동하면 외부 컨텐츠가 나올 수 있는 이유?

     웹서버를 통해 컨텐츠를 response하기 때문에 외부 컨텐츠를 받아올 수 있다.

 - 링크로 이동시키기

 <a href="http://www.daum.net" target="_blank">daum2</a>

 target="_blank" 속성값 : 새로운 창을 열어서 이동

cf) div.spacer + tab => 자동으로 <div class="spacer"></div> 만들어줌

 - a를 이용한 책갈피 만들기

해당 요소에 id 부여 후 a 링크를 걸어준다.

- a 요소를 이용한 javascript 실행

    1. <a href="javascript: /*javascript area*/">스크립트실행하기!</a>

    2. <a href="javascript: ">안눌리는 a링크</a>  : 새로고침도 되지 않게 할 a링크를 이용하려 할 경우 이렇게 사용함. 

EX) < 1 2 3 4 5 > 이 때 < 사용 안하는 문자 링크만 걸되 안눌리게

• 요소명+클래스명

요소명+클래스명 특정 요소의 자식클래스 스타일적용된다.

hover (가상클래스) 는 :을 이용하여 자식클래스적용

EX) a:hover { color:blue;}

• Table 생성하기

EX)

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

<td>5</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

<td>5</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

<td>5</td>

</tr>

총 3개의 row로 구성. 

table에는 자식요소로 tr이 있다.

tr에는 자식요소로 td가 있다.

• Table에 Attribute 추가하기 

<table border="1"> //경계선 주기

<table border="1" cellspacing="0"> //border 단일선으로 만들기

• colgroup 생성하기

<col width="100"/>

<col width="200"/>

<col width="300"/>

테이블의 넓이를 지정할 수 있다.

**출력 결과**

• tfoot : 평균, 합계 등 표시할 때 tfoot을 사용함

* tfoot이 thead다음에 있는 이유는 tbody보다 중요하기 때문에 

시각적으로 효과적으로 하기 위해서이다.

cf) ctr+/ : 자동주석처리

**출력결과**

• 테이블 병합하기 (colspan/rowspan/colspan+rowspan)

-colspan이용하기 (셀 좌우로 병합)

EX) <tr>

<td colspan="2">1</td>

<!-- <td>2</td> -->

<td>3</td>

<td>4</td>

<td>5</td>

</tr>

**출력결과**

-rowspan이용하기 (셀 상하로 병합)

EX) <tr>

<td rowspan="2">1</td>

<td>2</td>

<td>3</td>

<td>4</td>

<td>5</td>

</tr>

<tr>

<!-- <td>6</td> -->

<td>7</td>

<td>8</td>

<td>9</td>

<td>10</td>

</tr>

**출력결과**

-상하좌우 모두 합치기

EX) <tr>

<td colspan="2" rowspan="2">1</td>

<!-- <td>2</td> -->

<td>3</td>

<td>4</td>

<td>5</td>

</tr>

<tr>

<!-- <td>6</td> -->

<!-- <td>7</td> -->

<td>8</td>

<td>9</td>

<td>10</td>

</tr>

**출력결과**

• form요소 작성하기

<form action="loginAction">

<label for="email">이메일</label>

<input type="text" id="email"/>

<label for="pwd">비밀번호</label>

<input type="text" id="pwd"/>

<button type="submit">로그인</button>

</form>

- <form action="loginAction">  : submit 하면 loginAction으로 묶어서 input 된 정보   전송

- label : 뭘입력해야할지 알려주는 값

- for 값 = id 값 (같아야 보기 좋음)

**출력결과**

cf) inline요소인 label과 input을 table에 적용하기

-좀 더 보기 좋게 배열할 수 있다.

**출력결과**