html 에서는 img 태그를 사용해서 이미지를 넣을 수 있고, css 에서는 background: url() 속성을 사용해서 이미지를 넣을 수 있는데 각 속성들에 대해 정리해 보았다.
1️⃣ <img> 태그
- html 문서에 이미지를 삽입하는 태그이다.
- 주요 속성은 src, alt 가 있다.
- src 는 이미지의 경로를 나타낸다.
- alt 는 이미지를 표시할 수 없는 상황일 때 화면에 출력할 내용이다.
- 그 밖에 width(가로 크기), height(세로 크기), loading(이미지 로딩 방식) 등의 속성이 있다.
<body>
<img src="cat.png" alt="고양이">
<img src="dog.png" alt="강아지">
</body>
2️⃣ background 속성
1) background-color
- 배경색을 지정할 때 사용하며 기본 값은 투명 (transparent) 이다.
2) background-image: url(이미지 경로)
- 이미지의 위치를 상대 경로 또는 절대 경로를 사용하여 이미지를 나타내며 기본값은 none 이다.
- 속성값을 명시할 때는 url() 함수를 사용하며, 경로에 공백이 나올 것을 대비하여 쌍따옴표로 묶어주는 것이 안전하다.
div {
background-image: url("https://via.placeholder.com/100x50");
}
3) background-repeat = 배경 이미지가 주어진 영역에 꽉 차지 않는 경우, 이미지를 반복할 방식을 결정한다.
- repeat : 기본 값이며 좌측 상단에서 우측 하단으로 계속 반복.
- repeat-x : 좌측에서 우측으로 가로 방향으로만 반복.
- repeat-y : 위에서 아래로 세로 방향으로만 반복.
- no-repeat : 반복하지 않고 지정한 위치에 고정.
4) background-position
- 배경 이미지가 시작 될 위치를 지정하는 속성이다.
- 이 속성은 no-repeat 과 같이 사용되는데, 배경이미지가 반복된다면 위치를 지정하는 의미가 없어지기 때문이다.
- 기본값은 배경 이미지를 좌측 상단에 위치시켜 주는 0, 0 (가로, 세로) 이며, 절대/상대 단위를 사용하여 좌측 상단으로부터 얼마나 떨어져야 하는지를 지정할 수 있다.
- 보통 값을 직접 지정하거나, top / bottom / left / right / center 같은 방향 키워드와 함께 사용한다.
5) background-size = 배경 이미지의 크기를 결정한다.
- auto : 기본 값이며 배경 이미지의 실제 크기를 사용한다. 절대/상대 단위를 사용해서 특정값을 지정할 수 있다.
- cover : 배경 이미지가 잘리더라도, 주어진 영역을 완전히 덮을 수 있도록 이미지를 크게 맞춰준다.
- contain : 빈 공간이 생기더라도 배경 이미지가 주어진 영역에 모두 들어올 수 있도록 이미지의 크기를 맞춰 준다.
6) background-attachment = 스크롤 시 배경 이미지가 주어진 영역과 함께 따라갈지 그대로 있을 지를 결정한다.
- scroll : 배경 이미지가 주어진 영역과 함께 스크롤 된다.
- fixed : 배경 이미지가 주어진 영역이 스크롤 되더라도 고정된다.
background 속성이 이렇게 많지만 따로 따로 사용하기보다, 모든 속성을 background 키워드와 함께 사용할 수 있다. 혹은 필요한 속성만을 선택해서 값을 부여할 수 있다. 여기에 부여되지 않은 속성값은 기본 값으로 대체된다.
background: url(/images/logo.png) no-repeat 0 50%;
해석해보자면, url 에 이미지 경로를 지정해 주었고, 반복하지 않는 이미지를 좌측에서 0, 세로로는 가운데에 위치시켰다.
그럼 img 태그와 background 속성의 차이점은 무엇일까?
먼저 img 태그는 컨텐츠로서 높이와 넓이 값을 가진다. 그리고 각종 스크린 리더에서 이미지를 읽어들이게 된다. 화면에서 드래그를 하면 해당 이미지가 선택되기도 한다.
하지만 background 속성은 배경화면이나 시각적 효과를 위해 삽입된 이미지로서 마우스로 선택할 수 없는 영역에 있다. 그렇기 때문에 스크린 리더에서 읽어들이지 못한다. 높이나 넓이 값을 가지지 않는 고정된 이미지이며 전체적인 크기만 작게, 혹은 크게 조절할 수 있다.
이제까지는 배경화면에 이미지를 넣을 일이 없어서 img 태그만 사용했었는데, 오늘 과제를 진행하면서 이런 속성이 css 에도 있다는 것을 알게 되었다. 아직 많이 낯선 css 지만 이렇게 직접 사용해 본후 속성의 특징들을 살펴보니까 더 이해가 잘 가는 것 같다. 이제 더 이상 css 를 회피하지 말고 이렇게 하나씩 탐구해보자..!
참고 :
CSS 배경(background) 관련 속성
Engineering Blog by Dale Seo
www.daleseo.com
배경 또는 이미지를 위한 CSS (img , background)
이미지 관련 IMG 태그와 배경속성 backgroud에 대하여 알아보자 - IMG 태그 ＊ img는 HTML문서에...
blog.naver.com
'TIL' 카테고리의 다른 글
| 무사히 보낸 한 주 (22.09.29 TIL) (0) | 2022.09.29 |
|---|---|
| CSS 가상 요소 선택자 (22.09.28 TIL) (0) | 2022.09.28 |
| css 와의 거리감이 살짝 좁혀진 날 (22.09.26 TIL) (0) | 2022.09.26 |
| flex vs grid (22.09.25 TIL) (0) | 2022.09.25 |
| 다시 만난 CSS (22.09.24 TIL) (1) | 2022.09.24 |
댓글