[HTML & CSS] 테이블 / ::before, ::after / transition

[테이블]

• 테이블은 표를 만들어주는 HTML 태그 중 하나이다.
• 표 뿐만 아니라 갤러리를 만들 수도 있다.
• 기본 구조는 열과 행으로 정렬하여 표현할 수 있고, 모든 테이블 행에는 셀의 수가 동일해야 한다.
• 아래는 테이블과 관련된 기본 구조 태그들을 정리한 표다.
• 기준이 되는 칸은 th 태그로 작성하는 것이 관례라고 생각하면 좋다.

테이블관련 기본 태그 종류

 

• 아래는 테이블을 사용해서 학교 시간표를 만들어보았다.

See the Pen html day7 복습 by psm817 (@psm817) on CodePen.

 

• 만들어진 시간표 테이블을 보면 디자인 속성에서 특이점을 몇 가지 찾을 수 있다.
• 먼저, th 태그로 감싸진 셀들은 태그의 속성에 의해 글씨의 굵기가 굵고 가운데 정렬이 되어있다.
• 나머지 td 태그로 감싸진 셀들은 CSS에서 임의로 [text-align: center]를 적용하였기 때문에 글씨가 가운데로 정렬되어 있는 것이지 기본 값은 왼쪽 정렬이다.
• CSS를 살펴보면 th와 td 태그로 감싸진 모든 셀들에 테두리 선을 적용하고 padding 여백을 10px씩 주고있다.
• 해당 선택자를 작성할 때 .table-box th, .table-box td {} 와 같이 일일이 선택자를 단계적으로 타고 들어가지 않고 .table-box 안에 존재하는 모든 th와 td를 선택하였다.
• 테두리를 적용하면 기본적으로 셀과 셀사이의 여백이 어느정도 존재하는데 이 여백을 없애고 싶다면 [border-collapse: collapse] 를 추가 작성한다.
• HTML에 작성된 colgroup은 각 열을 그룹지어 표시하는 것이고, 예시에는 1번째 column의 너비를 200, 2~6번째 column의 너비를 100으로 지정하였다. 열의 순서대로 지정하고 싶은 너비를 작성하면 되고, 따로 너비 설정이 필요없다면 작성하지 않아도 괜찮다.
• 예시에서 화요일의 시간표를 보면 3,4교시가 모두 자습이기 때문에 두 셀이 서로 병합되어 있는 모습을 볼 수 있다.
•  지금은 세로로 합병이 되어있는 행 합병이고, HTML에서 원하는 td에 [rowspan="셀의 수";] 를 추가 작성한다.
• 반대로 가로 합병인 열 합병을 원하면, HTML에서 원하는 td에 [colspan="셀의 수";] 를 추가 작성한다.

 

[::before, ::after]

• :before와 :after는 HTML을 통해 생성된 요소 앞과 뒤에 새로운 요소를 추가하는 기능을 제공한다.
• 이를 가상 요소라고도 표현하는데, 가상 요소는 컨텐츠의 앞뒤에 기호, 도형, 수식어 등을 사용하여 컨텐츠를 장식할 필요가 있을 때 주로 사용된다.
• 가상 요소는 before와 after를 제외하고도 몇 가지가 더 있지만, 가장 많이 다루는 두 속성을 먼저 살펴봅시다.
• 두 가상 요소 모두 기본 display가 inline 요소이기 때문에 커스텀을 원한다면 display: inline-block로 속성 값을 변경해야한다.
• 두 가상 요소는 margin-left/right 값은 적용할 수 있지만, top/bottom은 적용할 수 없다.
• 두 가상 요소의 padding 값은 상하좌우 모든 방향에 대해서 값을 적용할 수 있다.
• 두 가상 요소에 컨텐츠 내용을 추가할 때는 [content : "내용"] 을 작성하면 된다.

See the Pen html day7복습2 by psm817 (@psm817) on CodePen.

 

[transition]

• 전에 transition에 대한 기본 개념을 다루긴 했지만, 이번에는 직접 예시를 작성하여 추가 설명을 하고자 합니다.

See the Pen html day7-4 by psm817 (@psm817) on CodePen.

 

• 예시는 하나의 div 태그에 hover를 적용하여 너비가 넓어지고 좁아지는 상황을 transition을 적용하여 시간차를 두어 애니매이션과 같이 동작하도록 구현했다.
• 여기서 살펴볼 점은 transition의 속성 값이다.  div 태그에 적용된 transition 값은 [transition: width 2s 3s, opacity 2s] 이고, div:hover에 적용된  transition 값은 [transition: width 1s 2s] 이다.
• 속성 값이 작성된 각 초의 의미는 다음과 같다.
• [transition: width 1s 2s]은 div 태그에 마우스 커서를 가져다 놓으면 2초동안 기다렸다가 너비가 1초의 시간을 두고 점점 넓어진다는 의미이다.
• [transition: width 2s 3s, opacity 2s]은 div 태그에 마우스 커서를 떼면 3초동안 기다렸다가 너비가 2초의 시간을 두고 점점 좁아지면서 투명도도 2초동안 서서히 변하게 된다는 의미이다.