이미지를 출력하는건 여러가지 방법이 있겠지만, 필자가 아는것은 두 가지이다.
img 태그 또는 css에서 background-image 속성을 사용하는 것.(velog에서 < img >를 붙여쓰려면 어떻게 해야하는걸까..)
그렇다면 img 태그와 background 속성의 차이점은 무엇이냐?? 필자도 이 포스트를 작성하며 떠오른 의문점인데, 구글링 해 본 결과 놀랍게도 '그 차이점은 크지 않다' 이다.
다만 필자도 모르게 img 태그는 사진은 버튼으로 쓰거나 사진 그 자체를 보여줄 때 사용하고, backgorund-image 속성은 카톡 대화창 배경이미지처럼 보여주기만 할 때 사용하였는데, 얼추 맞는 사용법이었다.
자세한 내용은 아레 글에 아주 친절히 설명이 되어있으니 참고해보자.
<Img 태그 Vs 백그라운드 이미지 언제 어떻게 사용해야 하는가>
https://webisfree.com/2015-01-15/img-%ED%83%9C%EA%B7%B8-vs-%EB%B0%B1%EA%B7%B8%EB%9D%BC%EC%9A%B4%EB%93%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%96%B8%EC%A0%9C-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94%EA%B0%80
그 외에도 img 태그는 액션핸들러를 추가하여 이벤트 처리하는 것이 용이하다고 한다.
1. img
자, 그러면 img 사용은 어떻게 할까? 간단하다. url만 입력하면 끝이다.
<img src="https://i.pinimg.com/originals/4f/19/3d/4f193d1f5de9beae2cd72d22be2b5c3d.jpg" >예제 사진은 내가 애정하고 존경해 마지않는 유나킴 님이다.
2. background-image
여러가지 태그에 css를 넣을 수 있겠지만, 필자는 div 태그를 활용하였다.
자, 아래와 같이 css를 활용하여 배경이미지를 삽입했다고 하자. 예제는 당연히 연아킴이다.
.img{
background-image: url("https://i.pinimg.com/originals/4f/19/3d/4f193d1f5de9beae2cd72d22be2b5c3d.jpg");
background-size: 100% 100%;
width: 600px;
height: 800px;
display: flex;
justify-content: center;
padding: 10px;
}
.text {
color:#1A4663;
font-size: 40px;
font-weight: 900;
}
어라, 그런데 텍스트와 글자가 겹쳐 텍스트가 잘 보이지 않는다.
그렇다면 opacity를 써서 배경색을 좀 투명하게 하면 되지 않을까??
.img{
background-image: url("https://i.pinimg.com/originals/4f/19/3d/4f193d1f5de9beae2cd72d22be2b5c3d.jpg");
background-size: 100% 100%;
width: 600px;
height: 800px;
display: flex;
justify-content: center;
padding: 10px;
opacity: 0.5; // 투명도 조절~
}
.text {
color:#1A4663;
font-size: 40px;
font-weight: 900;
}
...텍스트까지도 투명해졌다.😱 정말 일도 thㅏ랑도 개발도 보이는것과는 다르게 맘대로 안된다.(이렇게까지??)
그래서, 우리는 ::after를 써야하는 것이다.
::after란, 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성한다. 고 한다.
(MDN 문서 참조: https://developer.mozilla.org/ko/docs/Web/CSS/::after)
쉽게 말해, 분신 같은 것을 만든다고 보면 된다.
새벽 한시가 넘어가면서 필자가 상당히 피로해진 관계로, 바로 결론부터 넘어간보자.(죄송)
.img{
position: relative;
width: 600px;
height: 800px;
display: flex;
justify-content: center;
padding: 10px;
}
.text {
color:#1A4663;
font-size: 40px;
font-weight: 900;
}
.img::after {
width: 100%;
height: 100%;
background-image: url("https://i.pinimg.com/originals/4f/19/3d/4f193d1f5de9beae2cd72d22be2b5c3d.jpg");
background-size: 100% 100%;
position: absolute;
content: "";
opacity: 0.3; // 투명도 조절~
}::after를 사용하여 의사 요소를 생성한 후, 이 의사 요소에서 배경화면을 삽입한 후 투명도를 조절하였다. 그러면, 원래 요소였던 img의 자식 요소인 텍스트는 배경화면의 투명도에 영향을 받지 않게된다.
여기서 매~~~우 유의해야 할 점은, img::after 요소에서 추가된 position과 content이다. 이 두속성을 지정하지 않으면 이미지가 나오지 않거나 전혀 의도하지 않은 위치에 나오게 될 것이다.
위와 같이 설정해주면 짜잔~~~ 아래와 같은 이미지를 얻을 수 있다.
필자의 실력이 부족하여 이정도의 글을 쓰는데도 상당히 오래걸린다.
그래도 이런 포스트를 작성하며 좋은점은, 글을 쓰면서 본인이 알쏭달쏭한 점은 다시 찾아보게 된다는것과, 복습효과가 상당하다는 것이다. 언제나 문제는 시간이다.
그럼 근시일 내에 다른 내용(특히 알고리즘)으로도 찾아뵙길 바라며, 이만 포스팅을 마친다.
