0417 uiux 13일차

0417 수 uiux 13일차

 

성공하는 포트폴리오는 따로 있다. 책 가져오기

Q1. 원래 책들도 가져와야 되나?

 

웹코딩 참고 사이트
(https://kimyws.tistory.com/29)
(https://webstoryboy.co.kr/)

 

플렉스 개구리

(https://flexboxfroggy.com/#ko)

---

 

웹

 

● img 태그: 이미지를 넣어줄 수 있다. 닫는 태그 별도로 필요하지 않다. display=inline-block;

src: (<img src="" alt="">) img 안에 들어가는 속성, 이미지의 url 지정

  예시. <img src="https://cdn.pixabay.com/photo/2014/02/01/17/28/apple-256263_960_720.jpg" alt="">

상대 url: img/image1.jpg

art: 이미지가 표시되지 않을 때 사용자에게 보여질 텍스트

1) 검색엔진이 이미지를 읽을 수가 없기 때문에 텍스트로 이미지의 내용을 이해한다.(ai기술 발전에 따라 굳이 입력 안해도 괜찮을 수 있음)

 <img src="img/dream.jpg" alt="">

'img/'까지만 쳐도&nbsp; img폴더 안에 있는 사진 파일이 뜬다.

기본 너비 높이 지정
html 이미지 크기를 픽셀단위로 정의 width, height

  활용예시. <img src="img/dreamcatcher.jpg" alt="기본이미지" width="200px" height="200px">

width=""
css
html

이미지를 로드 하기전에
공간을 예약을 해준다.
레이아웃을 안정적으로 유지할수 있다.

lorem picsum 아무 이미지

<img src="https://picsum.photos/200/200" alt="기본이미지">

200/200은 w, h임. 바꾸면 바꾼 사이즈에 맞게 바뀜, 새로고침을 할 때마다 사진이 계속 바뀜

 

"https://picsum.photos/id/200/200"id라고 쓰면 사진이 하나로 고정됨

 

justify-content: space-evenly; 주면 세로 3줄의 사진들 좌우 끝과 중간에 같은 여백 적용 
align-content: space-evenly; 주면 가로 2줄의 사진들 위 아래와 중간에 같은 여백 적용