W3School HTML 2일차

HTML에서 Image를 사용할 때 Image Map이라는 걸 사용할 수 있다는 걸 알게 되었다.

 

꽤나 신기하고 다른곳에서도 종종 봤던 기능인 것 같은데 그저 신기하게만 생각하고 넘겼던 것 같다.

 

추가적은 JavaScript까지 사용하지 않으니 꽤 많은 곳에서 사용할 것만 같다.

 <img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map> 

예시 코드는 위와 같다.

 

workplace.jpg라는 큰 이미지 안에 존재하는 컴퓨터, 핸드폰, 커피 3가지 물체에 좌표를 정해서

해당 좌표 내에서는 정해진 href 속성이 적용된다.

 

테스트는 여기에서 가능하다.

접속해서 오른쪽에 있는 컴퓨터, 핸드폰, 커피를 각각 눌러보시라

 

좌표를 정하는 방법은 총 4가지가 존재한다.

• rect - 정사각형 구역 지정
• circle - 원형 구역 지정
• poly - 다각형 구역 지정
• default - 기본값, 지정안할 경우 해당 사진 전체가 구역지정됨

rect의 좌표 지정 방식은 다음과 같다.

  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">

coords 부분에 4개의 숫자가 지정되어 있는 것을 볼 수 있는데, 두개씩 끊어서 34,44 -> 270,350이다.

34,44는 각각 맨 왼쪽에서 34픽셀 오른쪽으로, 맨 윗쪽에서 44픽셀 밑으로 이동했을 때 나오는 점

270,350은 역시 맨 왼쪽에서 270픽셀 오른쪽으로, 맨 윗쪽에서 350픽셀 밑으로 이동했을 때 나오는 점

 

노트북을 기준으로 맨 왼쪽 윗부분과 맨 오른쪽 아랫부분을 지정해서 구역을 설정한다.

 

두번째로 circle의 구역 지정 방법은 다음과 같다.

<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">

337,300과 44로 끊어서 봐야 하고 맨 왼쪽에서 부터 337픽셀 오른쪽으로, 맨 윗쪽부터 300픽셀 밑으로 이동했을 때 나오는 점에서 44픽셀의 반지름을 가지는 원이 구역으로 지정된다.

 

세번째로 poly의 구역 지정 방법은 다음과 같다.

 <area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm"> 

원하는 구역을 정하고 싶은 물체에 각이 져야하는 부분의 좌표를 위에서 나왔던 방법처럼 구한다.

각각 140,121 / 181,116 / 204,160 ... 으로 나오게 되는데 해당 좌표들을 물체 기준으로 시계방향으로 나열하면 된다.

 

이외에는 dir 요소에 백그라운드 이미지를 삽입하거나 창 크기에 따라 다른 이미지가 출력되게 하는 등의 것들이 있었지만 실제로는 잘 사용할 것 같지 않아 정리는 하지 않겠다. 링크 참고

 

위 요소와 속성 외에는 HTML로 Table을 작성하는 방법에 대해 읽었다.

 

생각보다 간단했는데, 왜 블로그 글 에디터에서 테이블을 작성하고 html로 이동하면 파악하지 못했을까 ㅜ

 <table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table> 

예시 코드는 위와 같다.

 

<tr>은 table row, 엑셀에서 행을 의미

<th>는 table header 테이블의 맨 윗행 제목을 적을때 사용, 기본값으로 굵은 글씨과 가운데 정렬이 설정됨

<td>는 table data 테이블의 나머지 데이터를 의미하고 기본값으로 폰트는 변경되지 않고 왼쪽 정렬이됨

 

따라서 하나의 행<tr>에 여러가지 값<th>,<td>가 들어가게 되는 것.

 

위 예시는 따라서 3개의 행이 생성된다.

 

테이블 외곽선 설정 관련

table, th, td {
  border: 1px solid black;
}

위 CSS코드를 지정해주면 테이블에 1픽셀, 실선, 검은색의 테두리가 생긴다.

 

 table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
} 

위 CSS 코드를 지정해주면 바로 이전 코드와 다르게 테두리가 한줄로 나온다.

 

 th, td {
  padding: 15px;
} 

위 CSS 코드를 지정해주면 테이블의 각 셀에 여백이 15픽셀씩 생기게 된다.

 

셀 병합 관련

 <table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table> 

위와 같이 작성하면 column span을 줄인 colspan 설정으로 인해 첫번째 행의 첫칸은 Name으로, 두번째 칸은 두개의 칸을 병합 한 크기의 Telephone으로 지정된다.

 

 <table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table> 

위와 같이 작성하면 row span을 줄인 rowspan 설정으로 인해 두번째 세번째 행의 첫칸은 Telephone:으로 병합, 나머지 두번째 칸은 각각의  55577854, 55577855가 지정된다.

 

테이블 제목 설정

 <table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table> 

위와 같이 <caption> 요소를 <table>요소 안에 추가하면 테이블에 제목이 가운데 정렬되어 붙는다.

 

특정 테이블에만 스타일을 적용하고자 하는 경우

 <table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table> 

위와 같이 table 요소에 id 속성을 추가한 후로 아래와 같이 CSS 코드 입력시 id를 지정하여 입력해주면 해당 테이블만 적용된다.

 #t01 {
  width: 100%;
  background-color: #f1f1c1;
} 

 #t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
  background-color: #fff;
}
#t01 th {
  color: white;
  background-color: black;
} 

두번째 CSS는 HTML 가이드 주제에 꽤나 여러 CSS를 사용했는데 각 요소?별 설정은 다음과 같이 해석하면 된다.

 

t01 ID를 가진 테이블의 tr 안에 있는 여러 하위 요소들중 even number인 요소에 배경색을 #eee로 지정

t01 ID를 가진 테이블의 tr 안에 있는 여러 하위 요소들중 odd number인 요소에 배경색을 #fff로 지정

t01 ID를 가진 테이블의 th안에 글자색을 하얀색으로, 배경색을 검은색으로 지정

 

개념 정리는 꽤나 한게 많은 것 같아서 링크로 대체

 

이 외에도 글에서는 다루지 않고 지나간 <colgroup>, <col>, <thead>, <tbody>, <tfoot>등이 존재했지만 대충 봐도 안쓸것 같더라... 나중에 쓰게될 때 한번 더 찾아봐야 겠다.