[HTML] 목록 태그 & UI 실습 정리

👩🏼‍💻 HTML 목록 태그의 종류

<ol> (Ordered List) - 순서가 있는 목록

• 숫자나 알파벳 등으로 자동 번호 매김
• list-style-type 속성으로 A, i, I 등 지정 가능
• start 속성으로 시작 번호 설정 가능

<ol style="list-style-type: upper-alpha;" start="11">
  <li>자바</li>
  <li>오라클</li>
</ol>

---

<ul> (Unordered List) - 순서 없는 목록

• 항목 앞에 불릿 기호 사용 (●, ○, ■ 등)
• list-style 속성으로 모양 변경 가능
• list-style: none;으로 불릿 제거 가능

<ul style="list-style: square;">
  <li>리액트</li>
  <li>자바스크립트</li>
</ul>

---

<dl> (Definition List) - 용어 설명 목록

• <dt>는 용어, <dd>는 설명
• 사전처럼 용어와 설명을 짝지어 표현

<dl>
  <dt>웹 개발</dt>
  <dd>HTML</dd>
  <dd>CSS</dd>
  <dd>JavaScript</dd>
</dl>

• 하나의 <dt>에 여러 개 <dd> 연결 가능
• CSS로 들여쓰기, 간격 조절 가능

---

✅ <ul>을 활용한 UI 구성

메뉴 바 만들기

<nav>
  <ul>
    <li><a href="#">홈</a></li>
    <li><a href="#">소개</a></li>
  </ul>
</nav>

nav ul > li {
  float: left;
  width: 170px;
  text-align: center;
  background: #2d2d2d;
}

nav a {
  display: block;
  color: white;
  padding: 10px 0;
  text-decoration: none;
}

• float left: 메뉴 항목을 가로로 나열
• width: 각 항목의 너비 설정
• text-align: center: 텍스트 가운데 정렬
• display: block: 전체 영역 클릭 가능하게 설정

---

점수표 만들기

<ul>
  <li>이름</li>
  <li>국어</li>
  <li>영어</li>
</ul>
<ul>
  <li>이자바</li>
  <li>90</li>
  <li>80</li>
</ul>

.score-list ul > li {
  float: left;
  width: 100px;
  text-align: center;
  border-bottom: 1px solid #333;
}

---

✅ 게시판 레이아웃 구성

<ul>
  <li class="num">3</li>
  <li class="subject"><a href="#">HTML 강좌입니다.</a></li>
  <li class="name">프론트</li>
  <li class="date">2022-03-21</li>
  <li class="hit">5</li>
</ul>

.board-list .subject {
  width: 400px;
  text-align: left;
  padding-left: 10px;
}

• 각 <ul>이 하나의 게시글을 구성
• float으로 항목 정렬
• .board-list ul:first-child로 헤더 스타일 차별화 가능

---

텍스트 말줄임 처리 (ellipsis)

게시판 제목이 너무 길면 한 줄로 자르고 ...으로 표시할 수 있음

.subject {
  width: 300px;
  white-space: nowrap;       /* 줄바꿈 금지 */
  overflow: hidden;          /* 넘치는 부분 잘림 */
  text-overflow: ellipsis;   /* 잘린 부분은 ...으로 표시 */
}

주의사항

• width가 반드시 지정되어야 함
• display는 block 또는 inline-block이어야 작동

---

📃 예제 코드 (중요 부분만)

불릿 없는 목록 + 스타일 제거

<ul style="list-style: none; padding: 0;">
  <li>자바</li>
  <li>오라클</li>
</ul>

게시판 제목 말줄임 처리

.subject {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

게시판 목록 행

<ul>
  <li class="subject"><a href="#">길게 길게 작성된 게시판 제목이 잘려 보입니다.</a></li>
</ul>

---