개발 걸음마 중
HTML / CSS - 이미지 설정 본문
HTML / CSS - 이미지(image)
* 이미지 넣기
- <img> 태그를 이용해서 문서에 이미지를 삽입한다.
- src : 이미지가 있는 경로를 적어준다.
- alt : 이미지에 대한 설명으로 이미지가 로드되지 않았을 때 대체 텍스트가 된다. 시각장애인을 위한 스크린 리더를 지원한다. 이미지를 대체하는 텍스트가 중복이라면 alt 값은 생략이 아닌 빈 값으로 둔다.
<body>
<img src="img/smile.jpg" alt="웃고있는 사람" >
</body>
<!--p태그로 이미지에 대한 설명이 중복된 경우이다. alt 값을 생략하지않고 공백으로 둔다-->
<body>
<img src="img/smile.jpg" alt="" >
<p>웃고있는 사람</p>
</body>💭 이미지를 보기 위해서 링크를 클릭하고 새 창에서 확인해야 하던 때도 있었다. 이미지도 하나의 문서로 여겨졌기 때문이다. 모자이크 웹 브라우저 및 넷스케이프 내비게이터를 개발한 '마크 로웰 앤드리슨'은 "거쳐야 하는 단계 없이 글자와 이미지를 한 번에 보여주면 어떨까?"라는 생각을 하고 이미지 태그를 만들어 적용하기 시작했다.
* 이미지 하단에 왜 빈 공간이 생길까?
- img가 인라인 요소이기 때문에 img의 세로 정렬이 text의 baseline을 따르게 되기 때문이다! 아래와 같은 초기값을 넣어주면 해결된다.
img{
vertical-align:top;
}
/* middle 값도 텍스트 기준이라 이미지가 정중앙에 정렬되진 않는다
주로 top으로 이미지 아래의 여백을 제거한다 */✏ 이미지의 누끼를 따서 링크를 연결해 주는 코드 제작 사이트 (https://www.image-map.net/)
요즘은 인지하기 쉬운 버튼이나 텍스트로 된 직관적인 버튼을 선호하기 때문에 잘 사용되진 않는다고 한다.
* figure / figcaption
- 이미지에 캡션을 달고 싶을 때 사용한다.
※ 캡션 : 삽입된 그림이나 도표, 사진 등의 이해를 돕기 위해 쓰는 간단한 주석문
- 이미지뿐만 아니라 코드조각, 인용문에도 사용 가능하다.
<figure>
<img src="images/picture.jpg" alt="사진">
<figcaption>
사진에 달고싶은 캡션 내용
</figcaption>
</figure>
* 이미지 비율 유지하기
aspect-ratio
- 기본 가로/세로 비율을 설정한다. (IE는 지원되지 않는다.)
img{
width:300px;
aspect-ratio: 2 / 1;
object-fit:cover;
}
padding % 값 이용
- padding의 top과 bottom % 값은 부모의 가로 너비를 기준으로 한다.
.thumbnail {
position: relative;
height: 0;
padding-top: 50%;
overflow: hidden;
}
/* 50%로 설정하면 2:1의 비율이 된다*/
.thumbnail img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
* object-fit
- 콘텐츠 크기를 어떤 방식으로 조절하여 요소에 맞출 것인지 설정한다.
- fill : 대체되는 요소 콘텐츠의 내용이 지정된 너비, 높이에 따라 확대 혹은 축소된다. 비율이 유지되지는 않는다. 이미지가 찌그러진다.
- contain : 콘텐츠의 가로/세로 비율을 유지하며 요소의 박스 내부에 들어가도록 크기를 맞춘다. 지정된 너비, 높이와 비율이 완전히 일치하지 않으면 공백이 생기게 된다.
- cover : 원래 비율을 유지한 채로 빈 공간이 생기지 않게 최대한 가득 채워서 확대된다. 이미지가 찌그러지지 않는다.
- none : 크기를 조절하지 않고 원본 크기로 가운데 정렬된다.
잘못된 정보에 대한 피드백은 언제든지 환영입니다!
'dev > HTML + CSS' 카테고리의 다른 글
| CSS - Reset CSS (0) | 2023.03.06 |
|---|---|
| CSS - Position (0) | 2023.03.06 |
| CSS - Box Model (0) | 2023.03.05 |
| HTML - 블록 레벨 요소 vs 인라인 레벨 요소 (0) | 2023.03.05 |
| CSS - 선택자 우선순위 (0) | 2023.03.05 |
