# img

103개의 포스트

[CSS] img 태그에 overflow hidden 효과를 적용해보자!

크기가 정해져 있는 div 박스에 이미지를 넣고 싶어서 해당 img의 CSS 스타일에 width: 100%; height: 100%를 적용했는데 화질이 깨져서 고민했던 적이 있지 않으신가요?! 그래서 부모div에 overflow: hidden을 넣어본 적이 있진 않으신

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

semantic web과 semantic tag

semantic web이란?기계가 읽고 처리할 수 있는 웹을 개발하기 위해 탄생한 의미론적인 웹.구성요소1.RDF(resouce Description Framework): 웹상의 메타데이터의 표현과 교환을 위한 프레임워크2.XML(eXtensible Markup Lan

2022년 8월 16일
·
0개의 댓글
·

semantic web과 semantic tag

semantic web이란?기계가 읽고 처리할 수 있는 웹을 개발하기 위해 탄생한 의미론적인 웹.구성요소1.RDF(resouce Description Framework): 웹상의 메타데이터의 표현과 교환을 위한 프레임워크2.XML(eXtensible Markup Lan

2022년 8월 16일
·
0개의 댓글
·
post-thumbnail

이미지를 넣는 방법 2가지

이미지를 넣는 방법 HTML에서 img태그 이용하기 CSS의 background-image속성 이용하기 차이점? img 태그 대체 텍스트와 제목 속성을 추가할 수 있는 기능이 있다. HTML이 구문분석 될 때 요청이 이루어지므로 성능이 더 좋다. backgroun

2022년 8월 16일
·
0개의 댓글
·
post-thumbnail

2주차 개발일지! 늬들이 koder 맛을 알아?

2015년 맥북 프로는 그렇게 갔습니다.허나 창업에 대한 의지를 꺾을 수는 없겠죠? 그리하여 ipad에서 코딩할 수 있는 APP!코딩 연습 다 하고 2주차 과제까지 제출 한 건 안 비밀1) jQuery 란?HTML의 요소들을 조작하는, 편리한 Javascript를 미리

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

HTML <img loading="lazy">

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

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

html 첫작품

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

2022년 8월 8일
·
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 : 코딩(coding) 실습하기, 일반인과 코딩을 배운 지식인의 차이점, HTML 의 중요성, 속성(Attribute) 이해하기, 인기 있는 태그 img (이미지 넣기)

생활코딩. 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개의 댓글
·