HTML 기초 - a 태그 / 테이블 태그

1. a 태그

1) a 태그(anchor)는 필수 속성이 있다

    - 어디로 이동할건지? → 필수 속성 : href

 

2) 현재 문서에서 다른 문서로 즉시 접근 가능(하이퍼 텍스트)

    - 어떻게 이동할건지? → 내용 클릭 시 이동

 

 

코드로 보면 이거

 

웹에는 이렇게 나온다

'네이버로 이동' 을 클릭하면 네이버 메인페이지로 즉시 접근이 가능하다.

 

'네이버로 이동' 이라는 것보다 좀 더 간지나게 하기 위해

네이버 로고(이미지)를 누르면 네이버 페이지로 이동하게끔 만들어보자!

 

 

a 태그 안에 이미지 태그를 넣어 코드를 완성해서

 

이 네이버 로고를 누르면

 

네이버 메인 페이지로 넘어간다!

 

 

 

tip!

target="_blank" 를 a 태그 속성으로 활용한다면 새로운 페이지로 네이버가 열린다

 

 

 

 

2. 테이블 태그

1) 나 표 만들거야!

    → <table></table> : 테이블 만들겠다고 선언하는 공간

 

2) 몇줄? 

    → <tr></tr> (table row) : 테이블의 행 생성

 

3) 몇칸?

    → <td></td> (table data) : 테이블의 열이자 데이터를 넣어주는 공간

    → <th></th> (table header) : 표의 헤더부분 작성에 용이(글자가 굵어지고 자동 가운데 정렬)

 

4) 병합 기능(td/th)

     a) 위, 아래 병합 : rowspan
     b) 좌, 우 병합 : colspan 

   → 속성값에는 병합할 칸의 개수

 

 

메뉴판을 예시로 들어보자!

표를 만들고 병합을 하는 과정이 필요하다.

 

 

~ 코드는 ~

tip

표의 제목 : caption(메뉴판)