[TIL] Image

이미지

• 이미지를 추가하는 방법 중 가장 많이 쓰이는 방법은 html안에 이미지 태그를 추가하는 방법입니다.

<img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">

alt 속성은 이미지가 표시되지않을때, 나타내는 문구이며
src 속성은 이미지가 있는 주소나 경로를 의미합니다.

• 이미지의 크기는 html파일 내에서 width속성과 height속성을 이용해 조절하는 방법과 css파일에서 선택자를 사용하여 조절하는 방법이 있습니다.

background-image로 이미지 넣기

• css내에서 배경이미지를 넣는 방법입니다.
• 태그를 이용해 이미지를 생성하는 것이 아니라, css를 이용해 이미지를 만듭니다.

  사이트에서만 보았을 때, 이미지가 태그로 넣었는지 백그라운드이미지로 넣었는 지 알 수 없습니다. 개발자모드를 사용해야 알 수 있습니다.

.bg-img {
  background-color: yellow;
  background-image: url("./images/hi.png");
}

• background-color 속성은 배경의 색을 지정합니다.

• background-image 속성은 배경에 넣을 이미지를 지정합니다

  요소가 작을 때, 높이나 너비를 지정하면 이미지가 잘리지 않고 나오게 됩니다. 하지만 높이나 너비를 지정하여도 배경이미지는 줄여지지 않습니다.

• 배경이미지를 줄이고 싶다면 background-size: 100%;를 사용하면 됩니다.

  • 가로크기만큼 꽉채우라는 의미를 가집니다.

Assignment

1. index.html에서 첫 번째 이미지는 가로를 300px으로,

• 두 번째 이미지는 가로를 200px로 바꿔주세요.
• hint) 그냥 img태그로 css를 추가하면 동시에 적용되기 때문에, 각자 class를 부여해야 겠네요.

  <img class="img1" alt="js" 
       src="https://www.w3schools.com/whatis/img_js.png" width="300px">
  <img class="img2" alt="css" 
       src=" https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/css3-512.png" width="200px">

2. 14줄 </body> 위에 div 태그를 추가하고 가로를 300px로 만들어주세요.

   <div><img src="" alt="" width="300px"></div>

3. 2번의 div 태그 내부에 아래 이미지를 <img>태그를 사용해서 추가해주세요.

• https://www.w3schools.com/whatis/img_js.png

  <div><img src="https://www.w3schools.com/whatis/img_js.png" alt="" width="300px"></div>

4. index.html에서 방금 추가한 <img>의 가로를 100%로 바꿔주세요.

• 가로가 300px인 첫 번째 이미지와 너비가 같으면 성공입니다!

  div.img {
    background-size: 100%;
  }