[웹 국비 교육 11일차] table, ::before/after, transition, opacity 개념 정리 (2025. 6. 10.)

안녕하세요!

2025년 6월 10일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 11일차 내용을 정리해보았습니다.
오늘은 표를 만드는 `table`, 가상 요소 `::before`, `::after`, 화면 최소 높이 설정 `min-height`, 그리고 동작을 위한 `transition`, `opacity`의 개념에 대해 배웠습니다.

 

---

 

11일차 학습내용

 

26강

 

## tavle

 

# 표를 구성하는 태그

태그	설명
<table>	표 전체를 감싸는 태그
<tr>	행 (row)
<th>	제목 셀 (글씨 굵게 + 가운데 정렬)
<td>	일반 셀 (내용 입력 칸)

 

<!-- html 예시 -->
<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>25</td>
  </tr>
</table>

: <th>는 기본적으로 글자가 굵고, 가운데 정렬된다.

 

---

 

26강 문제 

---

27강

 

## ::before / ::after 가상 요소

: <::before> : 요소의 맨 앞에 내용을 삽입

: <::after> : 요소의 맨 뒤에 내용을 삽입

: 반드시 <content:> 속성과 세미콜론(;) 두 개 사용해야 작동한다.

 

/* CSS */
ul > li::before {
  content: "나이스";
}

ul > li::after {
  content: "님";
}

: 실제 HTML에는 보이지 않지만, CSS로 가상의 자식 요소처럼 추가된다.
→ 시각적으로만 존재 (돋보이게 하거나, 꾸미는 용도로 많이 사용)

 

---

 

## min-height: 최소 높이 설정

: 

 

/* CSS 예시 */
body {
  margin: 0;
  min-height: 100vh;
}

: vh = viewport height (브라우저 창 높이의 100%)

: 화면에 아무 내용이 없어도 최소한 브라우저 높이만큼 공간 확보

 

> min-height는 콘텐츠가 적을 때도 화면 전체를 채우기 위한 필수 속성이다.

---

28강

 

## transition(애니메이션)

:

 

/* CSS */
/* 기본 사용법 */
div {
  width: 50%;
  height: 100px;
  background-color: gray;
  transition: width 2s;
}

: transition: 속성 지속시간;

: 위 코드는 width가 2초 동안 부드럽게 변화한다.

 

---

 

/* CSS */
/* 마우스 오버 시 동작 추가 */
body:hover > div {
  width: 100%;
  transition: width 1s;
}

: 기본 상태: 2초

: hover 상태: 1초

: 서로 다른 transition 값을 주면 속도가 다르게 동작한다.

 

---

 

/* CSS */
/* 지연시간 + 여러 속성 적용 */
div {
  width: 50%;
  height: 100px;
  background-color: gray;
  transition: width 2s 1s; /* 2초 동안 실행, 1초 지연 */
}

/* 또는 */

div {
  transition: width 2s, height 3s;
}

 

> transition은 속성과 지속시간 외에도 지연시간(delay) 도 설정할 수 있다.

> 한국은 실무에서는 보통 transition: all 0.3s; 를 자주 쓴다.

---

## opacity (투명도 조절)

:

 

/* CSS 예시 */

div {
  opacity: 1; /* 완전 불투명 */
  transition: opacity 1s;
}

div:hover {
  opacity: 0.5; /* 반투명 */
}

: opacity: 1 → 불투명

: opacity: 0 → 완전 투명

: 0.1 ~ 0.9 → 반투명 상태

 

 

---

 

마무리

 

오늘은 표 만들기부터 애니메이션 효과, 가상 요소 활용까지 웹 페이지를 더 시각적으로 표현하는 방법들을 배웠습니다.

특히 transition과 ::before, ::after는 디자인 요소로 자주 쓰일 것 같아서 사용방법에 대해 익숙해져 보겠슴다

 

복습 완료! 끝-