πŸ’» Programming/CSS

[CSS] 6. Background ( λ°°κ²½ μ„€μ • )

μΌ€μ΄μΉ˜ 2016. 6. 12. 17:55

이번 ν¬μŠ€νŒ…μ—μ„œλŠ” 각쒅 HTML νƒœκ·Έλ‚΄μ—μ„œ μ“°μ΄λŠ” λ°°κ²½ κ΄€λ ¨ 속성에 λŒ€ν•΄μ„œ μ•Œμ•„λ³΄λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€. λ°°κ²½κ΄€λ ¨ μ†μ„±μ—λŠ” λ‹€μŒκ³Ό 같은 것듀이 μžˆμŠ΅λ‹ˆλ‹€.

  •  background-color λŠ” λ°°κ²½ 색상을 μ„€μ •ν•˜κΈ° μœ„ν•œ μ†μ„±μž…λ‹ˆλ‹€.

  •  background-image λŠ” λ°°κ²½ 이미지λ₯Ό μ„€μ •ν•˜κΈ° μœ„ν•œ μ†μ„±μž…λ‹ˆλ‹€.

  •  background-repeat λŠ” λ°°κ²½ μ΄λ―Έμ§€μ˜ 반볡 μ—¬λΆ€λ₯Ό μ„€μ •ν•˜κΈ° μœ„ν•œ μ†μ„±μž…λ‹ˆλ‹€.

  •  background-position λŠ” λ°°κ²½ μ΄λ―Έμ§€μ˜ μœ„μΉ˜λ₯Ό μ„€μ •ν•˜κΈ° μœ„ν•œ μ†μ„±μž…λ‹ˆλ‹€.

  •  background-attachment λŠ” λ°°κ²½ μ΄λ―Έμ§€μ˜ μŠ€ν¬λ‘€λ§μ„ μ„€μ •ν•˜κΈ° μœ„ν•œ μ†μ„±μž…λ‹ˆλ‹€.

  •  background property is used as shorthand to specify a number of other background properties.

 

λ°°κ²½ 색 μ„€μ •ν•˜κΈ°

<p style="background-color:yellow;">
This text has a yellow background color.
</p>

This will produce following result:

This text has a yellow background color.

 

 

 

λ°°κ²½ 이미지 μ„€μ •ν•˜κΈ°

<table style="background-image:url(/images/pattern1.gif);">
<tr><td>
This table has background image set.
</td></tr>
</table>

 

 

λ°°κ²½ 이미지 λ°˜λ³΅ν•˜κΈ°

<table style="background-image:url(/images/pattern1.gif); 
              background-repeat: repeat;">
<tr><td>
This table has background image which repeats multiple times.
</td></tr>
</table>

 

μ•„λž˜ μ˜ˆμ œλŠ” λ°°κ²½ 이미지λ₯Ό μ„Έλ‘œλ‘œ λ°˜λ³΅μ‹œν‚€λŠ” μ˜ˆμ œμž…λ‹ˆλ‹€.

<table style="background-image:url(/images/pattern1.gif); 
              background-repeat: repeat-y;">
<tr><td>
This table has background image set which will repeat vertically.
</td></tr>
</table>

 

μ•„λž˜λŠ” λ°°κ²½ 이미지λ₯Ό κ°€λ‘œλ‘œ λ°˜λ³΅μ‹œν‚€λŠ” μ˜ˆμ œμž…λ‹ˆλ‹€.

<table style="background-image:url(/images/pattern1.gif); 
              background-repeat: repeat-x;">
<tr><td>
This table has background image set which will repeat horizontally.
</td></tr>
</table>

 

 

λ°°κ²½ 이미지 μœ„μΉ˜ μ„€μ •ν•˜κΈ°

λ°°κ²½ 이미지λ₯Ό μ™Όμͺ½μ—μ„œ 100 ν”½μ…€ λ–¨μ–΄λœ¨λ €μ„œ μœ„μΉ˜μ‹œν‚€λŠ” μ˜ˆμ œμž…λ‹ˆλ‹€. 

<table style="background-image:url(/images/pattern1.gif); 
              background-position:100px;">
<tr><td>
Background image positioned 100 pixels away from the left.
</td></tr>
</table>

λ‹€μœΌλ―€ μ˜ˆμ œλŠ” λ°°κ²½ μ΄λ―Έμ§€μ˜ μœ„μΉ˜λ₯Ό μ™Όμͺ½μ—μ„œ 100 ν”½μ…€ 그리고 μœ„μ—μ„œ 200 ν”½μ…€ 떨어진 곳에 μœ„μΉ˜μ‹œν‚€λŠ” μ˜ˆμ œμž…λ‹ˆλ‹€.

<table style="background-image:url(/images/pattern1.gif); 
              background-position:100px 200px;">
<tr><td>
This table has background image positioned 100
pixels away from the left and 200 pixels from the top.
</td></tr>
</table>

 

 

λ°°κ²½ 이미지 κ³ μ • λ˜λŠ” 슀크둀 μ—¬λΆ€ μ„€μ •ν•˜κΈ°

Background attachment determines whether a background image is fixed or scrolls with the rest of the page.

 

μ•„λž˜ μ˜ˆμ œλŠ” 배경이미지λ₯Ό κ³ μ •μ‹œν‚€λŠ” μ˜ˆμ œμž…λ‹ˆλ‹€. 

<p style="background-image:url(/images/pattern1.gif); 
              background-attachment:fixed;">
This parapgraph has fixed background image.
</p>

이번 μ˜ˆμ œλŠ” μŠ€ν¬λ‘€λ§μ„ ν•΄μ£ΌλŠ” μ˜ˆμ œλ„€μš”.

<p style="background-image:url(/images/pattern1.gif); 
              background-attachment:scroll;">
This parapgraph has scrolling background image.
</p>

 

 

λ°°κ²½ 속성 ν•œκΊΌλ²ˆμ— μ„€μ •ν•˜κΈ°

background 속성은 μ—¬λŸ¬κ°œμ˜ λ°°κ²½κ΄€λ ¨ 속성을 ν•œκΊΌλ²ˆμ— μ„€μ •ν•  수 μžˆλ„λ‘ ν•΄μ€λ‹ˆλ‹€. 

<p style="background:url(/images/pattern1.gif) repeat fixed;">
This parapgraph has fixed repeated background image.
</p>

 

 

 

 

 

Reference : http://www.tutorialspoint.com/css/css_backgrounds.htm 

 

 

 

 

 

 

 

 

μ €μž‘μžν‘œμ‹œ λΉ„μ˜λ¦¬ λ³€κ²½κΈˆμ§€ (μƒˆμ°½μ—΄λ¦Ό)