ToBe끝판왕

[ HTML ] 리스트( List ), 테이블( Table ) 태그 본문

■ 프로그래밍 SKILLS/HTML , CSS , JAVASCRIPT

[ HTML ] 리스트( List ), 테이블( Table ) 태그

업그레이드중 2022. 5. 11. 21:22
반응형

 

 

 

리스트 태그​

​

▶ 순서가 지정되지 않은 목록은 <ul> 태그 사용

  • 각 목록 항목은 <li>태그로 시작한다.
  • 목록 항목은 기본적으로 작은 검은색 원으로 표시됩니다.

▶ 순서가 지정된 목록은 <ol> 태그 사용

  • 목록 항목은 기본적으로 숫자로 표시됩니다.

▶ 설명목록(사전식 표현)은 <dl>​ 태그 사용

  • <dt> 태그는 용어를 정의하고 <dd> 태그는 각각의 용어 설명
코딩 화면
결과 화면

​

테이블 태그

 

▶ 표를 만드는 태그

  • <td> </td> 태그 : 각 테이블의 셀(열) - 테이블 데이터를 의미
  • <th> </th> 태그 : 열을 포함하는 셀의 제목 ( 머릿말 )
  • <tr> </tr> 태그 : 각 테이블의 행
  • border는 테이블의 윤곽을 나타낸다. ( 숫자가 커질수록 테두리 굵기가 굵어진다. )
  • width 와 height 속성값을 부여해서 테이블 크기를 조절할수 있다.( 첫번째 행이나 첫번째 열에 속성값을 주면 모두 적용된다. )
  • cellspacing : 칸과 칸사이의 여백
  • cellpadding : 셀의 안 여백( 안의 데이터와 셀경계의 간격 )
코딩 화면
결과 화면

 

▶  테이블의 각 행, 렬 합치기

  • colspan : 여러 열에 걸쳐 셀 만들기
  • rowspan : 여러 행에 걸쳐 셀 만들기
코딩 화면

 

결과 화면

 

▶ 테이블 중첩

테이블안에는 테이블을 넣을수 있다.

 

코딩 화면

 

결과 화면

 

▶ 셀 데이터 정렬하기

  • valign : 세로를 기준으로 정렬 ( top , middle, bottom이 있다. )
  • align : 가로를 기준으로 정렬 ( center, left, right 가 있다. )

 

코딩 화면
결과 화면
 HTML 한글 사용법​

 

<head> 안에 <meta charset="utf-8"> 을 써준다.

 

코딩 화면

 

반응형
저작자표시 비영리 변경금지

'■ 프로그래밍 SKILLS > HTML , CSS , JAVASCRIPT' 카테고리의 다른 글

[ JavaScript ] JavaScript 정의, 변수 및 자료형, 표현식과 연산자, 제어 구문  (0) 2022.05.12
[ HTML ] 검색사이트 구현, 동영상 넣기  (0) 2022.05.12
[ HTML ] iframe, forms  (0) 2022.05.11
[ HTML ] 기본적인 태그  (0) 2022.05.11
[ HTML ] HTML 정의 & 기본 구조  (0) 2022.05.11
'■ 프로그래밍 SKILLS/HTML , CSS , JAVASCRIPT' Related Articles more
Comments