# img

99개의 포스트

HTML <img loading="lazy">

강의를 듣다가 html의 img 자체 속성에서 lazy loading이 있다는 것을 알게 되었다. 마침 넷플릭스 클론코딩(물론 똑같이 만드는 건 아니지만...)을 하면서 이미지를 여러개 써야 하는 상황이 있었어서 적용을 해봤다. 그리고 결과는 성공적이었다. 워낙 영화

3일 전
·
0개의 댓글
·
post-thumbnail

html 첫작품

어처구니가 없는 나의 html 첫 작품...;;;;ㄷㄷㄷ

4일 전
·
0개의 댓글
·
post-thumbnail

Vue) 04. 이미지 태그 v-bind:src로 보여주기..

소스코드 및 설명) products 객체형 배열에 img의 src값을 주었다. v-bind를 사용하기 위해서는 import export와 같은 개념인, require로 앞에 묶어주어야 한다! products를 v-for문을 이용해 반복되는 div에서 img 태그에

2022년 7월 29일
·
0개의 댓글
·
post-thumbnail

img 태그와 background-image 속성의 차이

우리가 웹페이지에 이미지를 추가하는 방법은 2가지가 있다.이렇게 총 2가지 방법이 있다.이 글을 쓰기전에 필자가 생각했던 기준은 내가 사용하고자 하는 이미지가 사용자에게 홍보하고 있는 제품의 이해를 도와준다고 생각하면 img 태그를 쓰고, 그냥 스타일적 요소만 추가하고

2022년 7월 18일
·
0개의 댓글
·
post-thumbnail

[HTML] img 태그 안에 클릭 가능한 링크 영역 정의하기

이케아 홈페이지를 들어가보면 아래와 같은 사진을 볼 수 있습니다. 이미지 태그를 호버하면 동그란 점이 나오는데요, 각 버튼을 클릭하면 해당 가구에 대한 링크로 이동을 하게됩니다. 이것을 어떻게 img 태그안에서 만들 수 있는지 한번 알아보겠습니다.map 태그를 이용하면

2022년 7월 15일
·
0개의 댓글
·
post-thumbnail

생활코딩 배우기 - <Web> 10~11 학습정리

생활코딩. web과 HTML 10 ~ 11 학습정리내용입니다. 10) html (html이 중요한 이유) 누구나 기초가 중요하다고 말한다. 하지만 기초가 중요하다는 말을 잘 들어보면 응용으로 가는 과정으로서 기초가 중요하다는 뜻인 경우도 많이 있다. 사실 기초는

2022년 7월 12일
·
0개의 댓글
·

이미지 프로세스 이해 (이미지 서버, 스토리지 포함)

이미지 프로세스를 이해하기 위해서는 storage 사용을 알아야 합니다.

2022년 7월 6일
·
0개의 댓글
·

이미지 하단 공백 제거

img의 공백 `` 태그를 사용할 때 기본적으로 아래쪽에 공백이 생긴다. https://github.com/baeharam/Must-Know-About-Frontend/raw/main/images/css/img-space.png 공백이 생기는 이유 ` 태그는 인

2022년 7월 4일
·
0개의 댓글
·
post-thumbnail

<img> 태그

기본형 &lt;img src="경로" alt="대체텍스트">닫는 태그 없음웹에서 사용하는 이미지 형식(웹용 이미지의 특징): 저용량, 좋은 화질, bitmap(vector)img 태그와 함께 쓰는 주요 속성: src(source), alt(alternative text

2022년 6월 29일
·
0개의 댓글
·

Axios로 이미지 요청해 렌더링

문제: img tag 요청이 401 status를 response unauthorized해결: fetch or axios를 사용해 http request에 Authorization 헤더를 주입해 주어야 한다why? Authorization: Bearer JWT toke

2022년 6월 22일
·
0개의 댓글
·

[css]img삽입 시 하단 여백 제거

img태그를 통해 이미지를 삽입하다보면 하단에 애매하게 2~4px정도 여백이 생긴다.우선 해결방법은1) display 변경2) vertical-align 변경둘 중에 하나를 img태그에 적용해주면 해결된다.발생원인은img태그는 기본적으로 inline요소인데, inlin

2022년 6월 15일
·
0개의 댓글
·
post-thumbnail

22. 06. 02 웹에서 사용하는 이미지 종류

크게는 비트맵 이미지와 벡터 이미지로 나뉜다.사진같은 이미지.확대 / 축소 시 계단 현상이 일어나거나 품질이 저하될 수 있다.일반적인 사진.선, 점으로 이루어진 수학적 공식들로 만들어진 것.확대 / 축소에서 자유로움. 용량 변화 X일반적인 사진으로는 활용 불가

2022년 6월 1일
·
0개의 댓글
·
post-thumbnail

<img> VS background-image:url("이미지 주소");

alt 속성으로 이미지가 로드되지 않았을 때, 나타날 텍스트를 지정할 수 있다.이미지가 이미지로서 문서에서 의미가 있을 때 사용한다.해당 페이지를 프린트하게 되면 &lt;img>태그를 사용한다. 그래야만 이미지도 출력될 때 나타난다. 이미지가 단순 디자인 역할로 사용된

2022년 5월 24일
·
0개의 댓글
·

[HTML/CSS]<img>와 <div>의 차이

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. img 태그를 사용하는 것과 div 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."HTML에서 img 태그를 사용하는 방법 VS

2022년 5월 24일
·
0개의 댓글
·

3강 HTML

이미지 태그입력창버튼\*css란 ? 웹페이지에서 오른쪽 클릭 후 검사를 누르면 코드가 뜬다.Styles를 보면 css 속성을 볼 수 있다.

2022년 5월 9일
·
0개의 댓글
·
post-thumbnail

What is Semantic Web?

Semantic web을 이해하기 위해서는 왜 웹을 만드는가? 웹사이트를 만들고자 하는 목적은 무엇인가?에 대한 고찰이 필요하다.웹사이트를 만드는 목적은 많은 사람들에게 서비스를 제공하기 위함이고, 많은 사람들이 이용해주었으면 하는 속내가 있기 때문이다.많은 사람들에게

2022년 5월 9일
·
0개의 댓글
·
post-thumbnail

<img/> 이미지 경로 설정 - 리액트에서 적절한 상대경로 사용하기

creact-react-app으로 리액트 앱을 만들 때 이미지를 쉽게 다룰 수 있는 방법 중 하나가 public/images 폴더 안에 이미지들을 두어 관리하는 방법이다. 이 방법을 사용하는 이유는 '../../../assets/images/sth.png'와 같은 절대

2022년 5월 4일
·
0개의 댓글
·

Semantic Web & Semantic Tags

인터넷이 보급되고 웹에 축적되는 정보의 양이 방대해짐에 따라 불필요한 정보나 연관성이 적은 정보를 거를 필요성이 대두.단순히 사람만이 웹의 정보를 파악하는 것이 아니라, 자동화된 기계가 의미를 해석하고 정보간의 관계를 이해할 수 있도록 하는 것이 목적.검색 엔진은 매일

2022년 4월 25일
·
0개의 댓글
·