![[HTML] HTML의 태그의 종류(리스트와 테이블)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FxyVYR%2FbtrMVt2w0bT%2FZV7oAJJq8zNlwuewxLbny0%2Fimg.png)
HTML의 태그의 종류
목록을 만들 때 유용한 태그
목록을 만들 때 유용한 태그가 있습니다. 큰 틀을 잡는 데 사용되는 <ul>과 <ol>이 있습니다. ul은 unorder list의 줄임말로 순서가 없는 목록을 의미합니다. ol은 order list의 줄임말로 ul과 반대로 순서가 있는 목록을 만들 때 사용됩니다. 아래의 왼쪽 예시가 ul 오른쪽이 ol입니다.
See the Pen Untitled by rainbowbear (@rainbow96bear) on CodePen.
See the Pen ol by rainbowbear (@rainbow96bear) on CodePen.
ol은 순서가 있기 때문에 ol 태그 안에 속성을 넣어줄 수 있습니다. 속성으로는 type, start, reversed가 있습니다. type은 순서를 표기할 type을 정하는 속성입니다. 순서를 A, B, C..로 표현하고 싶은 경우 type="A" 피카츄 라이츄의 순서처럼 하고 싶은 경우 type="I"로 설정하시면 됩니다. type의 값으로는 A, a, I, i ,1 등이 있습니다. strat는 목록의 시작을 몇 번으로 할지 정하는 속성입니다. 1반, 2반, 3반의 경우는 type="A"로 설정하고 start="2"로 설정하였습니다. 순서가 B다음 A 다음 0인 이유는 reversed속성을 이용하여 그렇습니다.
목록을 코드로 본다면 위와 같습니다.
표를 만들 때 유용한 태그
글을 적을 때 표를 넣어 정리하는 경우 유용한 태그로 table이 있습니다. table내에서 사용되는 태그들이 있습니다. 각각의 태그들을 사용하여 설명과 함께 표를 만들어 보았습니다.
See the Pen table by rainbowbear (@rainbow96bear) on CodePen.
See the Pen Untitled by rainbowbear (@rainbow96bear) on CodePen.
위의 결과에서 보이듯 colspan과 rowspan은 각각 행과 열을 합치는 속성이며 숫자만큼 열과 행을 합치게 됩니다.
col태그의 경우는 열을 묶어서 스타일을 지정하기 좋습니다. 행의 경우는 tr태그가 행을 담당하므로 tr에 스타일을 주면 됩니다.