img 태그

자동 이미지 사이트 : lorem picsum

https://picsum.photos/id/237/200/300

id를 변경하면 다른 이미지가 나옴
뒤에는 너비와 높이 변경

https://picsum.photos/200/300

랜덤한 이미지 나옴

 

 

■ img 태그

○ img 태그

- 자체 닫는 태그로 끝에 별도의 닫는 태그가 필요하지 않는다.

- 기본 display = inline-block 임

 

○ 주요 속성

- src(source) : 이미지의 url을 지정

* 절대 url : https://www.abc.com/image.jpg 

* 상대 url : img/image.jpg (현재 페이지에서 img폴더내 jpg파일 참조)

 

- alt(alternative text)

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

* 검색 엔진 최적화에 도움이 됨, 검색 엔진은 이미지 자체를 읽을 수 없지만 alt텍스트로 내용을 이해함

 

- width와 height

* 이미지 크기를 픽셀 단위로 정의함

* 이미지를 로드하기 전에 이미지의 공간을 예약함, 레이아웃이 안정적 유지

* 크기 지정없이 큰 이미지를 로드 할 경우 레이아웃 변형될 수 있음

<div class="main">
    <img src="https://picsum.photos/id/2/100/100">
    <img src="https://picsum.photos/id/2/100/100" width="50px" height="100px">
</div>

 

<div class="main">
    <img src="https://picsum.photos/id/2/100/100">
</div>

.main{
    width: 50px; height: 50px;
    border: 2px solid #000;

}
img{
    opacity: 0.5;
    border: 3px solid red;
}

 

 

■ 이미지 중앙정렬 방식

 

○ inline-block 일때 정렬

.main{
    border: 1px solid #000;
    width: 150px; height: 150px;
    align-content: center;
    text-align: center;
}
.main > img{
   
}

 

○ block 요소로 변경 하여 정렬

.main{
    border: 1px solid #000;
    width: 150px; height: 150px;
    align-content: center;
    

}
.main > img{
   display: block;
   margin: 0 auto;
}

 

○ flex 요소로 변경 하여 정렬 

.main{
    border: 1px solid #000;
    width: 150px; height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main > img{
   
}

 

○ 이미지와 글자 관리

<div class="main">
    <div class="box">
        <img src="img/연습.png" width="100px" height="100px">
        <p>이미지</p>
    </div> 
    <div class="box">
        <img src="img/연습.png" width="100px" height="100px">
        <p>이미지</p>
    </div> 
    <div class="box">
        <img src="img/연습.png" width="100px" height="100px">
        <p>이미지</p>
    </div> 

</div>

.main{
    display: flex;
    height: 500px;
    gap: 20px;
    justify-content: center;
    align-items: center;
    border: 1px solid #000;
}
.box{
    width: 100px; height: 130px;
    
}
.box > img{
   
}
.box > p{
    text-align: center;
    margin: 0 4px;
}

 

 

■ object-fit

 

○ object-fit

- 이미지가 본래 가지고 있는 형태가 비율이 변경되면 왜곡되어 보이는 문제가 발생

- fill : 기본값 요소의 크기를 늘리거나 줄여서 컨테이너를 체움

- cover : 콘텐츠의 비율을 유지하면서 컨테이너 전체를 채움 이미지가 잘림

- contain : 콘텐츠의 비율을 유지하면서 컨테이너 맞춰 조절

- none : 콘텐츠의 크기변경 안되고 원본 크기 유지하면서 나옴

<div class="main">
    <img class="a1" src="img/연습.png" width="100" height="100" alt="">
    <img class="a2" src="img/연습.png" width="100" height="100" alt="">
    <img class="a3" src="img/연습.png" width="100" height="100" alt="">
    <img class="a4" src="img/연습.png" width="100" height="100" alt="">
</div>

.main{
    border: 1px solid #000;
}

.a1{
    width: 50px; height: 100px;
    object-fit: fill;
}
.a2{
    width: 50px; height: 100px;
    object-fit: cover;
}
.a3{
    width: 50px; height: 100px;
    object-fit: contain;
}
.a4{
    width: 50px; height: 100px;
    object-fit: none;
}

 

 

■ object-position

 

○ object-position

- CSS에서 이미지, 비디오 등 대체 콘텐츠(replaced elements)의 위치를 조절하는 데 사용

이 속성은 object-fit 속성과 함께 사용되어 컨테이너 내에서 콘텐츠가 어떻게 배치될지 제어

- 키워드: center, top, bottom, left, right, 그리고 이들의 조합 예: top left, bottom right 등

- 백분율: 예를 들어 50% 75%는 콘텐츠의 가로 중심과 세로의 75% 지점에 콘텐츠의 중심을 맞추는 것을 의미

- 길이 값: 픽셀(px)이나 em 같은 길이 단위를 사용하여 정확한 위치를 지정

<div class="main">
    <img class="a1" src="img/연습.png" width="100" height="100" alt="">
    <img class="a2" src="img/연습.png" width="100" height="100" alt="">
    <img class="a3" src="img/연습.png" width="100" height="100" alt="">
    <img class="a4" src="img/연습.png" width="100" height="100" alt="">
</div>

.main{
    border: 1px solid #000;
}
.main > img{
    width: 50px; height: 100px;
    object-fit: cover;
}
.a2{
    object-position: center;
}
.a3{
    object-position: right;    
}
.a4{
    object-position: left;
}

 

 

■ background-image

 

○ background

- 콘텐츠의 배경을 정의한다.

- 단축속성으로 색상이미지 반복등 정의 할 수 있다.

하위속성	역할
background-image	배경 이미지를 정의
background-position	배경 이미지의 초기 위치 정의
background-size	배경 이미지의 크기를 정의
background-repeat	배경 이미지의 반복방법을 정의

 

○  background-image 

- 기본적으로 배경이미지가 콘텐츠보다 작으면 배경이미지에 대해서 반복적으로 실행됨 

 

○ background-repeat

- repeat: 이미지를 수평과 수직으로 반복 기본값

- repeat-x: 이미지를 수평으로만 반복

- repeat-y: 이미지를 수직으로만 반복

- no-repeat: 이미지를 반복하지 않음

- space: 이미지를 반복하되, 이미지 사이에 공간을 똑같이 두어 전체 요소를 균일하게

- round: 이미지를 반복하며, 필요한 경우 이미지의 크기를 조정해서 요소의 공간을 정확히 맞춤

 

○ background-size

- 길이 값 지정: 픽셀(px) 또는 백분율(%) 등의 길이 단위를 사용하여 배경 이미지의 크기를 직접 지정

- cover는 이미지가 요소의 전체 공간을 덮도록 확장되며,

이미지의 가로 세로 비율을 유지하면서 요소의 더 작은 면을 기준으로 크기가 조정

- contain은 이미지가 요소의 경계 내에서 완전히 보이도록 확장되며,

이미지의 가로 세로 비율을 유지하면서 요소의 더 큰 면을 기준으로 크기가 조정

 

○ background-position

- 배경이미지의 위치를 설정하는 데 사용됨 이 속성을 통해 배경 이미지가 요소내에서 어디에 위치할지 지정

- 기본값은 0% 0% 또는 top left

- 키워드 사용: top, bottom, left, right, center와 같은 키워드를 사용하여 이미지 위치를 설정

- 길이 단위 사용: 픽셀(px), 백분율(%) 등의 단위를 사용하여 정확한 위치를 지정

- 조합 사용: 키워드와 길이 단위를 조합하여 더 세밀하게 위치를 지정

- 예시 right 20px top 10px : 오른쪽에서 20px 왼쪽, 상단에서 10px 아래쪽

 

○ 코드

<div class="main">
    안녕
</div>

.main{
    width: 100px; height: 100px;
    border: 1px solid #000;
    background-image: url("img/연습.png");
    background-repeat: no-repeat;
    background-size: 30px 50px;
    background-position: 50% 10px;
    align-content: end;
    text-align: center;
}

 

 

 

 

■