πŸ—’οΈHTML | <a>, <wbr />, <abbr>

μ›μ˜Β·2023λ…„ 3μ›” 2일
html
0

<!Doctype html> : html Living Standard λ¬Έμ„œ 의미
<html lang="ko-KR"> : μ–Έμ–΄μ½”λ“œ - κ΅­κ°€μ½”λ“œ
<meta charset="UTF-8" /> : μ „ 세계 μ–Έμ–΄ 지원
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> : λ„ˆλΉ„, 높이, ν™•λŒ€, μΆ•μ†Œ μˆ˜μ€€ μ œμ–΄

<a> : μ—°κ²° 링크
href : hypertextΒ reference (ν•˜μ΄νΌν…μŠ€νŠΈ μ°Έμ‘°)

  • 번호둜 μ „ν™” μ—°κ²°
<a href="tel:010-0000-0000">μ—°λ½μ²˜</a>

  • λ©”μΌλ‘œ μ—°κ²°
<a href="mailto:google@gmail.com">메일</a>
  • id둜 μ˜μ—­ 이동
<a href="#idλͺ…">ν•΄λ‹Ή id의 μ˜μ—­μœΌλ‘œ 이동</a>
  • 파일 λ‹€μš΄λ‘œλ“œ
<a href="001.html" download>001.html 파일 λ‹€μš΄λ‘œλ“œ</a>

<wbr />

  • <br /> λŒ€μ‹ μ€„λ°”κΏˆ ν•΄μ•Όν•  곳에 μ‚¬μš©

<br /> μ‚¬μš©ν•˜μ§€ μ•Šκ³  μ€„λ°”κΏˆ ν•˜λŠ” 법

  1. <span>κ³Ό CSS display 속성 + @media μ‚¬μš©
  2. <wbr /> μ‚¬μš© 
<p class="ex1">
  <span>μ•ˆλ…•ν•˜μ„Έμš”?</span>
  <span>λ°˜κ°‘μŠ΅λ‹ˆλ‹€</span>
</p>
<p class="ex2">
  <span>μ•ˆλ…•ν•˜μ„Έμš”?</span>
  <span>λ°˜κ°‘μŠ΅λ‹ˆλ‹€</span>
</p>
p {
  font-size: 60px;
}
.ex1 span {
  display: inline-block;
}
.ex2 span {
  display: block;
}
/* ν™”λ©΄ λ„ˆλΉ„ 760px 이상이면 ν•œ 쀄에 ν‘œμ‹œ */
@media (min-width: 760px) {
  .ex2 span {
    display: inline;
  }
}
  • ν•œκΈ€μ˜ 경우 cssμ—μ„œ word-break : keep-all 속성과 ν•¨κ»˜ μ‚¬μš©, μ„€μ • μ•ˆν•˜λ©΄ 적용 μ•ˆλ¨
  • μ˜μ–΄λŠ” css μ„€μ • μ•ˆν•΄λ„ 적용됨
<p class="ko">μ•„μ•„μ•„μ•„μ•„μ•„μ•„μ•„<wbr />μš”μš”μš”μš”μš”<wbr />μ•„μ•„μ•„μ•„μ•„μ•„μ•„μ•„</p>
<p>oooooooooo<wbr />aaaa<wbr />bbbb<wbr />cccc<wbr />oooooooooo</p>
.ko {
  word-break: keep-all;
}

<abbr>

  • 약어에 마우슀 μ˜€λ²„ν•˜λ©΄ 전체 뜻 ν’€μ–΄μ„œ μ„€λͺ…
<abbr title="Cascading Style Sheets">CSS</abbr>
profile
μ›μ˜
ν™”μ΄νŒ…~~^ㅁ^/
이전 포슀트

🎨CSS | 길이 λ‹¨μœ„ em, rem

λ‹€μŒ 포슀트

🎨CSS | @at-rule, μ„ νƒμž, 길이(크기) λ‹¨μœ„, 속성 상속

0개의 λŒ“κΈ€