λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
πŸ“‚ 기술 λ©΄μ ‘/Web

HTML의 <li> μš”μ†ŒλŠ” μ™œ <ul> μš”μ†Œμ˜ μžμ‹ μš”μ†Œμ—¬μ•Όλ§Œ ν•˜λ‚˜μš”?

by Dev. Ella 2023. 3. 12.

πŸ‘©πŸ»‍πŸ’» <li> μš”μ†ŒλŠ” μ™œ <ul> μš”μ†Œμ˜ μžμ‹ μš”μ†Œμ—¬μ•Όλ§Œ ν•˜λ‚˜μš”?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul> <!-- here -->
    <li>home1</li>
    <li>home2</li>
    <li>home3</li>
    <li>home4</li>
</ul>
</body>
</html>

 

πŸ’πŸ»‍♀️ μš”μ•½ν•˜μžλ©΄ ,

<li> μš”μ†ŒλŠ” 말 κ·ΈλŒ€λ‘œ list의 item듀을 보여주기 μœ„ν•œ μš”μ†Œ 이기에, λͺ©λ‘μ„ λ‹΄λŠ” <ul> μš”μ†Œμ˜ μžμ‹ μš”μ†Œμ—¬μ•Ό ν•©λ‹ˆλ‹€. 

 

ꡬ슬과 μ£Όλ¨Έλ‹ˆ

<ul> μš”μ†ŒλŠ” μ£Όλ¨Έλ‹ˆκ³ , <li> μš”μ†ŒλŠ” μ£Όλ¨Έλ‹ˆμ— λ‹΄κΈ΄ κ΅¬μŠ¬λ“€μ΄λΌκ³  보면 λ©λ‹ˆλ‹€. λ”°λΌμ„œ μ£Όλ¨Έλ‹ˆ <ul> μ•ˆμ— ꡬ슬인 <li>κ°€ 담겨야 ν•©λ‹ˆλ‹€.

 

ν˜‘μ—… μ‹œ 특히 μ€‘μš”

ν™”λ©΄ μƒμœΌλ‘œλŠ” λ¬Έμ œκ°€ μ—†μ–΄ 보이더라도, <li>μš”μ†Œμ™€ <ul> μš”μ†Œ 각각의 μ˜λ―Έμ— 맞게 sementicν•˜κ²Œ HTML을 μž‘μ„±ν•΄μ•Ό ν˜‘μ—… μ‹œ λ‹€λ₯Έ κ°œλ°œμžκ°€ 보더라도 μ‰½κ²Œ 이해할 수 있기 λ•Œλ¬Έμ— μœ„μ™€ 같은 κ·œμΉ™μ„ μ§€ν‚€λŠ” 것이 μ€‘μš”ν•©λ‹ˆλ‹€. 

 

 

πŸ“Ž λ‚΄μš© μ°Έμ‘°

- velog: 기술 λ©΄μ ‘ μ€€λΉ„

- velog: Section 1 νšŒκ³ 

 

λŒ“κΈ€