λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
HTML5 & CSS3

[HTML5 & CSS3] 속성 μ„ νƒμž

by μ½”λ”©ν•˜λŠ” λΆ•μ–΄ 2021. 2. 14.
λ°˜μ‘ν˜•

β–Ά 속성 μ„ νƒμž

속성 μ„ νƒμžλŠ” νƒœκ·Έ μ•ˆμ—μ„œ μ‚¬μš©ν•˜λŠ” μ†μ„±λ“€μ˜ 값에 따라 μŠ€νƒ€μΌμ„ μ§€μ •ν•œλ‹€. 속성 κ°’ 쑰건에 따라 λ‹€μ–‘ν•œ μŠ€νƒ€μΌμ„ 지정할 수 있기 λ•Œλ¬Έμ— ν™œμš©λ„κ°€ 높은 μŠ€νƒ€μΌ 지정 방식이닀.

​

 

​

*[속성] μ„ νƒμž - μ§€μ •ν•œ 속성에 μŠ€νƒ€μΌ μ μš©ν•˜κΈ°

​

href 속성이 μžˆλŠ” μš”μ†Œλ₯Ό μ°Ύμ•„λ‚΄ λ°°κ²½ μ§€μ •ν•˜κΈ°

<style>
   a[href] {
      background:yellow;
   }
</style>

<body>
<ul>
   <li><a>메인 메뉴 : </a></li>
   <li><a href="#">메뉴 1</a></li>
   <li><a href="#">메뉴 2</a></li>
   <li><a href="#">메뉴 3</a></li>
   <li><a href="#">메뉴 4</a></li>
</ul>
</body>

 

​

​

*[속성 = κ°’] μ„ νƒμž - νŠΉμ • 값을 κ°–λŠ” 속성에 μŠ€νƒ€μΌ μ μš©ν•˜κΈ°

​

target μ†μ„±μ˜ 값이 _blank인 링크에 μŠ€νƒ€μΌ μ μš©ν•˜κΈ°

<style>
   a[target="_blank"] {
      padding-right:30px;
      background:url(images/newwindow.png) no-repeat center right;
   }
</style>

<body>
<h1>HTML5 ν‘œμ€€μ•ˆ μ‚¬μ΄νŠΈ </h1>
<ul>
   <li><a href="http://www.w3c.org/TR/html" target="_blank">HTML</a></li>
   <li><a href="https://www.w3.org/TR/selectors">CSS Selector Level 3</a></li>
   <li><a href="https://www.w3.org/TR/css3-mediaqueries">미디어쿼리</a></li>
</ul>
</body>

 

 

 

*[속성 ~= κ°’] μ„ νƒμž - μ—¬λŸ¬ κ°’ 쀑 νŠΉμ • 값이 ν¬ν•¨λœ 속성에 μŠ€νƒ€μΌ μ μš©ν•˜κΈ°

​

class 속성에 "button" 값이 ν¬ν•¨λœ μš”μ†Œμ— μŠ€νƒ€μΌ μ μš©ν•˜κΈ°

<style>
   .flat {
      background:blue;
      color:white;
   }
   [class ~="button"] {
      border: 2px solid black;
      box-shadow: rgba(0,0,0,0.4) 5px 5px;
   }
</style>

<body>
<ul>
   <li><a href="#">메뉴 1</a></li>
   <li><a href="#">메뉴 2</a></li>
   <li><a href="#" class="button">메뉴 3</a></li>
   <li><a href="#" class="flat button" >메뉴 4</a></li>
</ul>
</body>

 

​

​

*[속성 |= κ°’] μ„ νƒμž - νŠΉμ • 값이 ν¬ν•¨λœ 속성에 μŠ€νƒ€μΌ μ μš©ν•˜κΈ°

​

title μ†μ„±μ˜ 값을 체크해 쑰건에 따라 μŠ€νƒ€μΌ μ μš©ν•˜κΈ°

<style>
   a[title |="us"] {
      background: url(images/us.png) no-repeat left center;
      padding: 5px 25px;
   }
   a[title |="jap"] {
      background: url(images/jp.png) no-repeat left center;
      padding: 5px 25px;
   }
</style>

<body>
<ul>
   <li>μ™Έκ΅­μ–΄ μ„œλΉ„μŠ€ : </li>
   <li><a href="#" title="us">μ˜μ–΄</a></li>
   <li><a href="#" title="us-english">μ˜μ–΄</a></li>
   <li><a href="#" title="japanese">일본어</a></li>
</ul>
</body>

 

​

​

*[속성 ^= κ°’] μ„ νƒμž - νŠΉμ • κ°’μœΌλ‘œ μ‹œμž‘ν•˜λŠ” 속성에 μŠ€νƒ€μΌ μ μš©ν•˜κΈ°

​

title 속성 κ°’μ˜ μ‹œμž‘ 뢀뢄을 체크해 μŠ€νƒ€μΌ μ μš©ν•˜κΈ°

<style>
   a[title ^="eng"] {
      background: url(images/us.png) no-repeat left center
      padding: 5px 25px;
   }
   a[title ^="jap"] {
      background: url(images/jp.png) no-repeat left center;
      padding: 5px 25px;
   }
   a[title ^="chin"] {
      background: url(images/ch.png) no-repeat left center;
      padding: 5px 25px;
   }
</style>

<body>
<ul>
   <li>μ™Έκ΅­μ–΄ μ„œλΉ„μŠ€ : </li>
   <li><a href="#" title="english">μ˜μ–΄</a></li>
   <li><a href="#" title="japanese">일본어</a></li>
   <li><a href="#" title="chinese">쀑ꡭ어</a></li>
</ul>
</body>

 

​

​

*[속성 $= κ°’] μ„ νƒμž - νŠΉμ • κ°’μœΌλ‘œ λλ‚˜λŠ” 속성에 μŠ€νƒ€μΌ μ μš©ν•˜κΈ°

​

λ§ν¬ν•œ 파일의 ν™•μž₯μžμ— 따라 μ•„μ΄μ½˜ ν‘œμ‹œν•˜κΈ°

<style>
   a[href $= "hwp"] { /* μ—°κ²°ν•œ 파일의 ν™•μž₯μžκ°€ hwp인 링크 */
      background: url(images/hwp_icon.gif) center right no-repeat; /* 배경으둜 hwp μ•„μ΄μ½˜ ν‘œμ‹œ */
      padding-right: 25px; /* μ•„μ΄μ½˜μ„ ν‘œμ‹œν•  수 μžˆλ„λ‘ 였λ₯Έμͺ½μ— 25px μ—¬λ°± */
   }
   a[href $= "xls"] { /* μ—°κ²°ν•œ 파일의 ν™•μž₯μžκ°€ hwp인 링크 */
      background: url(images/excel_icon.gif) center right no-repeat; /* 배경으둜 hwp μ•„μ΄μ½˜ ν‘œμ‹œ */
      padding-right: 25px; /* μ•„μ΄μ½˜μ„ ν‘œμ‹œν•  수 μžˆλ„λ‘ 였λ₯Έμͺ½μ— 25px μ—¬λ°± */
   }
</style>

<body>
<h3>νšŒμ‚¬ μ†Œκ°œ 파일 λ‹€μš΄ λ°›κΈ°</h3>
<ul>
   <li><a href="intro.hwp">hwp 파일</a></li>
   <li><a href="intro.xls">μ—‘μ…€ 파일</a></li>
</ul>
</body>

 

​

​

*[속성 *= κ°’] μ„ νƒμž - κ°’μ˜ 일뢀가 μΌμΉ˜ν•˜λŠ” 속성에 μŠ€νƒ€μΌ μ μš©ν•˜κΈ°

​

href 속성 κ°’ 쀑 일뢀가 μΌμΉ˜ν•˜λŠ” μš”μ†Œμ— μŠ€νƒ€μΌ μ μš©ν•˜κΈ°

<style>
   [href *= "w3"] {
      background:blue;
      color:white;
   }
</style>

<body>
<h1>HTML5 μ°Έκ³  μ‚¬μ΄νŠΈ </h1>
<p>(μ•„λž˜ 링크 쀑 νŒŒλž€μƒ‰ 배경의 λ§ν¬λŠ” W3C μ‚¬μ΄νŠΈλ‘œ μ—°κ²°λ©λ‹ˆλ‹€.)</p>
<ul>
   <li><a href="http://www.w3c.org/TR/html">HTML ν‘œμ€€μ•ˆ μ‚¬μ΄νŠΈ</a></li>
   <li><a href="http://www.webplatform.org">νŠœν† λ¦¬μ–Όκ³Ό 아티클</a></li>
   <li><a href="http://caniuse.com">HTML 지원 μ—¬λΆ€ 체크</a></li>
   <li><a href="http://www.w3c.org/TR/css3-mediaqueries">미디어쿼리</a></li>
</ul>
</body>

 

​

κΈ°λ³Έν˜•

μŠ€νƒ€μΌ 적용 경우

μ˜ˆμ‹œ - μ„ νƒμž

μ˜ˆμ‹œ - μ μš©λ˜λŠ” μš”μ†Œ

[속성]

μ§€μ •ν•œ '속성'일 λ•Œ

[href]

<a href="#">메뉴 1</a>

[속성 = κ°’]

'κ°’'에 μΌμΉ˜ν•  λ•Œ

[target = "_blank"]

<a href="......" target="_blank">HTML</a>

[속성 ~= κ°’]

μ—¬λŸ¬ κ°’λ“€ 쀑 νŠΉμ • 'κ°’'이 ν¬ν•¨λ˜μ–΄ μžˆμ„ λ•Œ(단어별)

[class ~= "button"]

<a href="#" class="flat button">메뉴4</a>

[속성 |= κ°’]

'κ°’'이 ν¬ν•¨λ˜μ–΄ μžˆμ„ λ•Œ

(ν•˜μ΄ν”ˆ 포함 단어별)

[class |= "us"]

<a href="#" title="us">μ˜μ–΄</a>

<a href="#" title="us-english">μ˜μ–΄</a>

[속성 ^= κ°’]

'κ°’'으둜 μ‹œμž‘ν•  λ•Œ

[title ^= "eng"]

<a href="#" title="english">μ˜μ–΄</a>

[속성 $= κ°’]

'κ°’'으둜 끝날 λ•Œ

[href $= "xls"]

<a href="intro.xls">μ—‘μ…€ 파일</a>

[속성 *= κ°’]

'κ°’'이 속성 κ°’μ˜ 일뢀일 λ•Œ

[href *= "w3"]

 

HTML μ‚¬μ΄νŠΈ</a>

​

λ°˜μ‘ν˜•
μ €μž‘μžν‘œμ‹œ

'HTML5 & CSS3' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

[HTML5 & CSS3] λ³€ν˜•  (0) 2021.02.14
[HTML5 & CSS3] 가상 ν΄λž˜μŠ€μ™€ 가상 μš”μ†Œ  (0) 2021.02.14
[HTML5 & CSS3] μ—°κ²° μ„ νƒμž  (0) 2021.02.14
[HTML5 & CSS3] μ˜€λ””μ˜€ & λΉ„λ””μ˜€ μž¬μƒν•˜κΈ°  (0) 2021.02.14
[HTML5 & CSS3] μ›Ήκ³Ό λ©€ν‹°λ―Έλ””μ–΄  (0) 2021.02.14

κ΄€λ ¨κΈ€

λŒ“κΈ€

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”