TIL 23.09.25

ν™©μ€ν•˜Β·2023λ…„ 9μ›” 25일
TIL
0

TIL

λͺ©λ‘ 보기
88/146

πŸ“ŒToday I Learned

CSS

ex12_background

CSS μˆ˜μ—…

  1. μ„ νƒμž
  2. μ„œμ‹ κ΅¬ν˜„ > 속성 + κ°’

HTML μ„œμ‹ κΈ°λŠ₯ vs CSS μ„œμ‹ κΈ°λŠ₯

  1. HTML
  • νŠΉμ • νƒœκ·Έμ— 미리 μ •ν•΄μ Έ μžˆλŠ” 속성이 μžˆλ‹€.
    • ex) <body bgcolor=""> (O)
      <h1 bgcolor=""> (X)
    • μ œν•œμ μ΄λ‹€. (νƒœκ·Έμ— μ†ν•΄μžˆλŠ” μ†μ„±λ§Œ 적용 κ°€λŠ₯)
  1. CSS
  • λͺ¨λ“  속성을 λͺ¨λ“  νƒœκ·Έμ— 적용 κ°€λŠ₯ν•˜λ‹€.
  • μ–΄λ–€ 속성이든 μ„ νƒμžλ‘œ 찾은 λͺ¨λ“  νƒœκ·Έμ— 적용 κ°€λŠ₯ν•˜λ‹€.
  • 1개의 속성 μˆ˜μ—… > λͺ¨λ“  νƒœκ·Έμ— 적용~
  • HTML μ„œμ‹ μ‹œλŠ₯ <<<<<< CSS μ„œμ‹ κΈ°λŠ₯(μ’…λ₯˜, κΈ°λŠ₯)

λ°°κ²½

  1. 배경색
  • background-color
  1. λ°°κ²½ 이미지
  • background-image

CSS 색상 ν‘œν˜„λ²•

  1. Color Name: red, yellow, blue ...
  2. RGB Color(HEX): #FFFFFF
  3. RGB Color(DEC): rgb(255,255,255)
  4. RGBA Color(DEC): rgba(255,255,255,1)
    a(alpha channel - 뢈투λͺ…도(0~1))
body {
  border: 5px solid black;

  /* background-color: lavender; */
  /* background-color: #ff0000; */
  /* background-color: rgb(0, 255, 255); */
  /* background-color: rgba(0, 255, 255, 0.5); */

  background-image: url(../asset/images/dog01.jpg);
  background-repeat: no-repeat;
  /* background-position: -10% -12%; */ /*x, y  μ΅œμ’ŒμΈ‘μƒλ‹¨=0,0  였λ₯Έμͺ½, μ•„λž˜λ‘œ 갈 수둝 숫자 컀짐 */
  background-position: center top;
  /* background-position: 300px 50px; */

  background-attachment: fixed;
}

ex13_background

ex14_text

ex15_box

ex16_box

ex17_box

ex18_box

ex19

ex20_overflow

ex21_visibility

ex22_display

profile
ν™©μ€ν•˜
μ°¨κ·Όμ°¨κ·Ό ν•˜λ‚˜μ”©
이전 포슀트

TIL 23.09.22

λ‹€μŒ 포슀트

TIL 23.09.26

0개의 λŒ“κΈ€