# img
로컬 이미지 파일을 웹 페이지에 표시하기 위해 html img tag의 src 속성에 경로(절대경로)를 설정하는 방법
imgUrl 값에 로컬 경로(/Users/rowan/Dev/images/shop/item/)가 포함되어 있기 때문에, 웹 페이지에서는 해당 이미지 파일에 접근할 수 없습니다. 웹 브라우저는 로컬 파일 시스템에 직접 접근할 수 없기 때문입니다.대신, imgUrl 값을 웹
[2] 03/10 자바스크립트 수업
줄바꿈 태그리스트 태그 (< ul > 안에 있어야함)ol은 순서가 있는 리스트1234 순으로 순서가 붙고, abcd ㄱㄴㄷㄹ 순서로 바꿀 수도 있음링크를 거는 태그< a href="링크내용" > 표기되는 글자(img태그 사용가능) < /a >"링크내용"
<img> 태그와 background-image
img태그와 background-image를 사용할때 여러가지 차이점이 존재한다. A. 코딩에서의 차이 A-1 img 태그 "img"를 사용할때에는 html코드로만 페이지에 이미지 붙히기가 가능하며, width를 통해 이미지의 사이즈 조절이 가능하다. 특히 여기서 재밌는점은, width 값만 입력해도, 저절로 비율에 맞춰져 height도 계산이 된다....
HTML 기본 태그 (미디어 요소)
📒HTML5 기본 태그 - 미디어 삽입 태그 📌`` 태그 `` 태그는 정보성을 갖고있는 이미지를 삽입할 때 사용한다. Example) 📌`` 태그 `` 태그는 문서에 음향 파일을 삽입할 때 사용한다. Example)
background-image
👉 img 콘텐츠와 밀접한 연관이 있는 이미지 사용 시에 적합 부분에 이미지 설명을 넣어 웹 접근성을 준수할 수 있다. 이미지 설명이 h2, p, span 등의 태그로 기재된다면, 뒤의 을 삭제하여 '이미지 설명 제공하지 않는다.' 라는 의미인 로만 작성하면
HTML 이미지 태그 가운데 정렬하기
Tim_Berners_Lee.html 중 일부:style.css:img 태그를 가운데 정렬하면서 크기가 창 크기, 좀 더 정확히는 부모 엘리먼트의 크기에 따라 조절되도록 하려고 한다.1\. margin: auto; : 좌 우 margin의 크기를 맞춘다. picture
[CSS] flex items의 img 크기조절
flex item 안에 html로 img값이 들어갈때 width값을 주면 이미지의 비율이 깨진다.이때는 추가속성으로 object-fit: contain을 넣어주면 비율이 맞춰진다..header {display: flex;}.header img { width: 500p

[CSS] img하단 공백없애기
img 태그는 inline 요소이기 때문이다.inline 요소는 블록 요소와 달리 가상의 기준선에 맞춰서 그려지게 된다. (텍스트의 기본 행간에서 생기는 여백이라고 생각하면 된다.)vertical-align : bottom은 아래삐침이 있는 글자까지 고려하여 하단으로
[HTML] img
<img> 이미지를 삽입하는 태그로, src 속성을 통해 이미지 경로를 지정합니다.속성src: 이미지의 경로 (주로 상대경로로 사용, 윗 경로로 올라갈때는 ../입력)width: 이미지 가로 크기height: 이미지 세로 크기

5분 만에 만드는 자기소개 페이지[HTML/CSS 1]
이번 포스팅에서 HTML 파일만으로 간단하게 자기소개 페이지를 만드는 방법을 알아봅시다.

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

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

[HTML] 5. 이미지 넣기 <img>
src = 이미지 태그에 이미지 경로를 입력시켜 출력해줌width = 가로길이 픽셀, 100%로 지정하면 비율 맞춰줌height = 세로길이 픽셀
Semantic web, Semantic tags
Semantic web 이란?사전적으로는 ‘의미론적인 웹’ 이라는 뜻. 웹 기술이 발전하면서 수많은 정보들이 축적되었는데, 무분별한 정보의 축적으로 컴퓨터가 스스로 정보를 해석, 가공할 수 없어 사용자가 직접 개입해 처리해야 하는 문제가 발생. 그래서 기계가 읽고 처리
[React Typescript] 이미지 데이터 엑박 처리, img onError={}
토이프로젝트 진행시 fetch로 가져온 data.img가 404 에러, 엑박으로 주소가 잘못된 img를 가져오는 경우가 발생됐다. 프로젝트 완성도를 떨어뜨리지 않기 위해 에러시 보여주는 img를 생성해 주어야 한다.img 태그에 이미지 404 에러시 다른 이미지를 보여
HTML 이미지 태그
태그명 :img속성src :(source) 이미지의 파일 경로 입력src속성 : 이미지 파일 경로 입력() ./ : 현재위치 ../:상위폴더위치alt속성 : 이미지 로딩 안될때 대체텍스트title : 풍선도움말height : 높이 (그냥 숫
Not allowed to load resource:...
프로젝트 외부에 존재하는 파일 업로드는 보안상의 이유로 이미지에 접근불가!! server.xml에 코드를 추가