JS Dev Blog
이미지 삽입 본문
<body>
<figure>
<img src="something.png">
<figcaption>something</figcaption>
</figure>
</body><figure> 태그를 이용하면 <figcaption>을 이용해서 자막과 이미지 콘텐츠를 함께 관리하기 편하다.
<figure> 태그를 이용한 컨텐츠는 왼편에 조금 여백이 추가된다.
<figcaption> 요소로 자막을 추가하면 <br>을 추가하지 않아도 개행 처리가 된다.
<body>
<picture>
<source media="(max-width: 375px)" srcset="image1.png">
<source media="(max-width: 768px)" srcset="image2.png">
<source media="(max-width: 1024px)" srcset="image3.png">
<img src="something.png" alt="source의 모든 조건이 맞지 않거나 브라우저 호환 문제가 있을 때">
</picture>
</body>위 처럼 <picture> 태그 안에 세 개의 <source> 태그를 포함하면, 결과 랜더링 되는 화면 크기에 따라 세 이미지 중 하나의 이미지만이 선택되어 화면에 표시된다.
<source> 태그의 media는 화면 크기에 대한 조건을 지정할 수 있다. srcset은 이미지의 url을 지정할 수 있다. 위 예제에서는 375이하일경우 imag1, 376이상 768이하면 image2, 768이상 1024이하면 image3를 표시한다.
<picture>는 HTML5에서 추가되었기 때문에 오래된 브라우저에서 사용이 불가할 수 있다. 따라서 <img>태그를 추가해주면 오래된 브라우저가 <picture>를 지원하지 않을 시 <img>의 이미지를 표시한다. 모든 <source>의 media조건이 맞지 않을 때에도 <img>태그의 이미지를 보여준다. 따라서 <picture>태그를 쓸 때 <img>태그를 하나 추가해 놓는 것이 좋다.
public과 src폴더를 구분해서 사용해야 한다
참고 https://whales.tistory.com/m/95
React에서 이미지(images) 경로 설정 방법
React에서 이미지를 사용해야 할 때 해당 이미지가 public폴더에 있는지 src폴더에 있는지, 또는 jsx파일에서 사용하는지 css에서 사용하는지에 따라 경로 설정하는 방법이 달라 처음 경로를 설정할
whales.tistory.com
'Development > HTML&CSS' 카테고리의 다른 글
| DOM 개념 정리 (0) | 2022.03.11 |
|---|
