2025-04-22[25일차] -(HTML & CSS) /보강
수업정리
이미지 태그
<img src="" alt="">
src : 물리적인 공간에서 이미지 불러올때 경로(원하는 이미지 경로)
alt : 대안 (이미지 로드 실패시 대비 존재)- 닫는 태그 x
- 부모가 될 수 없음 /자식을 가질순 없음
- 옵션이 2개로 구성
- 비율이 존재하며 비율 무시시 이미지 꺠짐
랜덤이미지 사이트) picsum
이미지 삽입시 글자처럼 약간의 여백이 존재하기에
이미지는 블록 요소가 x!-> 인라인블록 o
-> 여백은 직접 컨트롤 할 순 없지만 그래도
여백 없애고 싶다면? -> 글자가 아니면 된다!(이미지를 블록요소로!)
... > 근데 이러면 이미지가 가로가 아닌 세로로 출력...
해결방법 -> 각각의 div태그 안에 이미지 태그 집어넣기
- img 태그는 독립적으로 사용되는 경우가 많지 않다
- 일반적으로 img를 감싸는 블록요소의 태그 안쪽에서 사용한다
여백 길이 조절
margin
- 내가 직접 커지는게 아닌 바깥 공간 밀어냄
margin- top : 50px;
margin- left : 50px;
margin- right : 50px;
margin- bottem : 50px;
각 방향 기준으로 간격 띄우기(시계방향-top먼저)margin : 10px 50px;
두 군데 묶어서(위아래 10/ 왼오 50)padding
- 내가 직접 커짐
width : 200px;
height: 200px;
padding : 50px;
200 * 200 픽셀이
50(왼.오.위.아래) 다 커짐
코딩초보