[html] 텍스트 관련 기본 태그 / 표 만들기

개발 환경은 Visual Studio Code. 

정말 기본적인 태그를 다룰 것이다. 

<h1>, <h2>, ... <h6> : 제목 텍스트. 숫자가 작을수록 제목이 큰 것이다. 

<ul>, <li> : 순서가 없는 목록 만들기.

<ol>, <li> : 순서가 있는 목록 만들기.

▶ 순서가 없는 목록 만들기를 이용한 자기소개

 

기본적인 nxn 표만들기

1. <table> 태그로 표자리 만들기 

2. <tr> 태그로 n개의 행 만들기 

3. <td> 태그로 각 행마다 셀 n개씩 추가 

행 또는 열을 합치는 태그의 기본형은 

<td colspan = "합칠 열의 개수"> 내용 </td>, <td rowspan = "합칠 행의 개수"> 내용 </td>

표만들기 를 응용한 예제를 스스로 만들어보았다. 

▶ 행 또는 열을 합치는 기능을 활용한 표만들기 

먼저 표의 첫 줄 칸을 보고 어떤 행을 합쳐야하는지를 파악하여 적재적소에 rowspan, colspan을 배치해야한다. 

실행결과를 보면 첫 줄의 '1'과 '2' 칸은 그대로이고, '3' 칸에 2개의 행을 합쳤다. (rowspan)

두번째 줄에서는 '4' 칸에 2개의 행을 합쳤고(rowspan), '5' 칸은 그대로이다. 

세번째 줄에서는 '7' 칸에 2개의 열을 합쳤다(colspan). 

헷갈리지 말 것 !