# img

134개의 포스트
post-thumbnail

<img> 태그와 background-image

img태그와 background-image를 사용할때 여러가지 차이점이 존재한다. A. 코딩에서의 차이 A-1 img 태그 "img"를 사용할때에는 html코드로만 페이지에 이미지 붙히기가 가능하며, width를 통해 이미지의 사이즈 조절이 가능하다. 특히 여기서 재밌는점은, width 값만 입력해도, 저절로 비율에 맞춰져 height도 계산이 된다....

2023년 3월 5일
·
0개의 댓글
·

HTML 기본 태그 (미디어 요소)

📒HTML5 기본 태그 - 미디어 삽입 태그 📌`` 태그 `` 태그는 정보성을 갖고있는 이미지를 삽입할 때 사용한다. Example) 📌`` 태그 `` 태그는 문서에 음향 파일을 삽입할 때 사용한다. Example)

2023년 3월 2일
·
0개의 댓글
·

img tag 의 src 에 header 넣기

img src 에 보안이 걸려있을 때 어떻게 이미지를 불러올 수 있을까?

2023년 3월 1일
·
0개의 댓글
·

background-image

👉 img 콘텐츠와 밀접한 연관이 있는 이미지 사용 시에 적합 부분에 이미지 설명을 넣어 웹 접근성을 준수할 수 있다. 이미지 설명이 h2, p, span 등의 태그로 기재된다면, 뒤의 을 삭제하여 '이미지 설명 제공하지 않는다.' 라는 의미인 로만 작성하면

2023년 2월 27일
·
0개의 댓글
·
post-thumbnail

img

2023년 2월 25일
·
0개의 댓글
·
post-thumbnail

Firebase 이미지 업로드, 불러오기

Firebase를 이용하여 이미지를 업로드 하고, 불러와 보자..

2023년 2월 24일
·
1개의 댓글
·

HTML 이미지 태그 가운데 정렬하기

Tim_Berners_Lee.html 중 일부:style.css:img 태그를 가운데 정렬하면서 크기가 창 크기, 좀 더 정확히는 부모 엘리먼트의 크기에 따라 조절되도록 하려고 한다.1\. margin: auto; : 좌 우 margin의 크기를 맞춘다. picture

2023년 2월 23일
·
0개의 댓글
·

[CSS] flex items의 img 크기조절

flex item 안에 html로 img값이 들어갈때 width값을 주면 이미지의 비율이 깨진다.이때는 추가속성으로 object-fit: contain을 넣어주면 비율이 맞춰진다..header {display: flex;}.header img { width: 500p

2023년 2월 15일
·
0개의 댓글
·
post-thumbnail

[CSS] img하단 공백없애기

img 태그는 inline 요소이기 때문이다.inline 요소는 블록 요소와 달리 가상의 기준선에 맞춰서 그려지게 된다. (텍스트의 기본 행간에서 생기는 여백이라고 생각하면 된다.)vertical-align : bottom은 아래삐침이 있는 글자까지 고려하여 하단으로

2023년 2월 15일
·
0개의 댓글
·

[HTML] img

&lt;img> 이미지를 삽입하는 태그로, src 속성을 통해 이미지 경로를 지정합니다.속성src: 이미지의 경로 (주로 상대경로로 사용, 윗 경로로 올라갈때는 ../입력)width: 이미지 가로 크기height: 이미지 세로 크기

2023년 2월 14일
·
0개의 댓글
·
post-thumbnail

ComAround_ Template literals로 이미지 경로 동적으로 만들기

src 경로에 Template literals을 사용하여페이지를 이동할 때마다 동적으로 회사로고가 변경되게 만들었다.1\. 페이지 이동버튼의 state 에 회사이름을 내려준다.2\. 회사 이름을 가져와 urlReqCompanyName 라는 이름으로 변수선언한다.3\.

2023년 1월 26일
·
0개의 댓글
·
post-thumbnail

이미지 로딩 에러에 대비하는 대체 이미지

` 태그의 src`에 넣은 이미지의 로딩에 실패할 때가 있다. MDN에 따르면 아래의 경우들이다. src 속성이 비었거나 null임. src의 URL이 현재 사용자가 보는 페이지의 URL과 같음. 지정한 이미지가 손상돼 불러올 수 없음. 이미지의 메타데이터가 손상돼

2023년 1월 9일
·
0개의 댓글
·
post-thumbnail

[HTML] 5. 이미지 넣기 <img>

src = 이미지 태그에 이미지 경로를 입력시켜 출력해줌width = 가로길이 픽셀, 100%로 지정하면 비율 맞춰줌height = 세로길이 픽셀

2023년 1월 6일
·
0개의 댓글
·

Semantic web, Semantic tags

Semantic web 이란?사전적으로는 ‘의미론적인 웹’ 이라는 뜻. 웹 기술이 발전하면서 수많은 정보들이 축적되었는데, 무분별한 정보의 축적으로 컴퓨터가 스스로 정보를 해석, 가공할 수 없어 사용자가 직접 개입해 처리해야 하는 문제가 발생. 그래서 기계가 읽고 처리

2023년 1월 2일
·
0개의 댓글
·
post-thumbnail

[React Typescript] 이미지 데이터 엑박 처리, img onError={}

토이프로젝트 진행시 fetch로 가져온 data.img가 404 에러, 엑박으로 주소가 잘못된 img를 가져오는 경우가 발생됐다. 프로젝트 완성도를 떨어뜨리지 않기 위해 에러시 보여주는 img를 생성해 주어야 한다.img 태그에 이미지 404 에러시 다른 이미지를 보여

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

HTML 이미지 태그

태그명 :img속성src :(source) 이미지의 파일 경로 입력src속성 : 이미지 파일 경로 입력() ./ : 현재위치 ../:상위폴더위치alt속성 : 이미지 로딩 안될때 대체텍스트title : 풍선도움말height : 높이 (그냥 숫

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

Not allowed to load resource:...

프로젝트 외부에 존재하는 파일 업로드는 보안상의 이유로 이미지에 접근불가!! server.xml에 코드를 추가

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

RN) 이미지 동적으로 배치하기

react-native에서 이미지를 불러오는 방식으론 2가지가 있다로컬에 존재하는 이미지 파일을 불러오는 requirerequire('./"이미지 경로"'),인터넷에서 이미지파일을 가져오는 uri{uri:'https&#x3A;//"이미지 경로"'}위 사진과 같은 레이아

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

반응형 이미지

웹브라우저, 모바일 화면에서 viewport의 크기, 해상도 등에 반응하여 이미지의 사이즈를 다르게 보여주는 것을 말함.예를 들어 모바일 화면의 이미지를 그대로 노트북에 가져오면 저화질의 이미지를 보게되는데, 이런 현상을 방지하기 위해 노트북에서는 큰 이미지로 변환해

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