카테고리 없음

HTML 탐구생활 : html 관련 잡다한 코딩 지식들 2

환상곰 2022. 8. 24. 23:36
반응형

 

1. table 관련 태그와 속성

(1) caption 태그

caption 태그는 표의 설명이나 제목을 나타내는 태그이다.

 

(2) th태그의 속성 scope

th태그가 행의 th태그인지, 열의 th태그인지 명시해주는 속성이다.

행의 th태그라면 scope = "row"

열의 th태그라면 scope = "col"

 

(3) table에서의 열합치기, 행합치기

열합치기 : td의 colspan속성, 속성값으로는 숫자가 들어가는데 몇 칸 합칠건지에 대한 숫자를 적어준다.

행합치기 : td의 rowspan 속성, 속성값으로 숫자 들어가고 몇 칸 합칠건지에 대한 숫자를 적어준다.

 

(4) colgroup 태그

표에서 열을 묶는 용도로 사용한다.

colgroup태그 안에는 col 태그가 들어가며, col태그의 속성인 span으로 몇 개의 열을 묶을지 정할 수 있다. 

colgroup은 table의 모든 태그들 보다 앞에 적어주어야 하며 caption이 있을 경우 caption뒤에 작성한다

 

<예시>

 

See the Pen Untitled by proccm (@proccm) on CodePen.

 

 

2.  a태그의 target 속성

(1) target = "_self "

target의 기본 속성값으로 링크를 클릭했을 때 현재 창에서 페이지를 연다.

 

(2) target = "_blank "

링크를 클릭했을 때 새 창에서 페이지를 연다.

 

(3) target = "_parent "

iframe(웹 사이트에 웹사이트를 집어 넣은 것)창에서 링크를 클릭했을 때 iframe 창에서 여는 것이 아닌 부모 요소의 창으로 페이지를 연다.

 

(4) target = "_top "

iframe이 여러개 들어간 경우 iframe창에서 링크를 클릭했을 때 최상위 부모 요소의 창으로 페이지를 연다.

 

 

3.  a 태그의 href 속성 중 mailto와 tel

a태그의 href속성은 일반적으로 속성값으로 사이트의 주소를 적지만 mailtotel이라는 속성값도 있다. 

href = "mailto: 이메일주소" 를 써주면 링크를 클릭했을 때 입력한 이메일 주소로 메일을 보낼 수 있도록 메일창이 뜬다.

href = "tel: 전화번호"를 써주면 모바일의 경우 링크를 클릭했을 때 입력한 전화번호로 전화를 걸 수 있도록 전화 앱이 실행된다.

 

 

4. address 태그

address 태그는 주소나 연락처를 포함해야 할 때 사용한다. 주로 contact페이지에서 사용한다.

 

 

반응형