[인스타클론] 반투명한 안쪽 테두리가 있는 이미지

unu·2021년 2월 21일
0

JavaScript

목록 보기
2/4

현재 인스타 클론 중, 이미지와 이미지 태그를 둘러싼 불투명한 테두리가 필요하다.

이를 위해 두 가지 조건이 필요하다.
1. 투명할 것
2. 내곽선이여야 할 것

처음에는 그냥 border를 적용했지만, border는 내곽선이 아니라 외곽선이었다. border가 일러스트레이터처럼 정교하게 구분되지는 않았다. (외곽선, 중앙, 내곽선)

border: 10px solid gray;


한편 border-inline이라는 속성을 발견해서 적용했는데, 내가 생각한 inline은 아닌듯.
그리고 border-radius에 영향을 받는 것 같다. 조건이 하나 더 추가되었다.
3. 균일한 두께를 가진 테두리여야 할 것!

border-inline: 10px solid gray;

box-shadow를 이용하면 투명도도 적용 가능하고 이미지 위에 테두리를 입히는 게 가능할 것 같아서 사용해봤지만 네 방향에 모두 적용되는게 아니라서 가능하게 하려면 (내가 잘 모르는) 다른 방법이 필요한 것 같았다.

그리하여.. 내가 사용한 방법은 아래와 같다.

html

<span class="others profile-image box">
      <img class="others profile-image" src="https://forexample.com"/>
      <div class="others profile-image border"></div>
</span>

css

.others.profile-image.box{
	position: absolute;
	width: 30px;
	height: 30px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.others.profile-image{
	position: absolute;
	width: 30px;
	height: 30px;
}
.others.profile-image.border{
	position: absolute;
	width: 28px;
	height: 28px;
	border: 1px solid rgba(0,0,0,0.1);
}


꾸밈을 위해 따로 div 태그를 두고 싶진 않았는데 결국 두게 되었다.
컨테이너 역할의 others profile-image box 태그를 만들고
이미지 태그인 others profile-image,
border 역할을 할 others profile-image border를 만들었다.

border 역할의 태그는 너비 높이 값에 각각 border 1px * 2(상하, 좌우) 만큼 빼서 설정했다.

간단하지만 허탈하다.
허탈한 기분을 달래기 위해, ::after 가상 엘리먼트를 사용해서 더 간단히 만들었다.

html

<span class="others profile-image box">
      <img class="others profile-image" src="https://forexample.com"/>
      <!-- 삭제 <div class="others profile-image border"></div>-->
</span>

css

.others.profile-image.box{
	position: absolute;
	width: 30px;
	height: 30px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.others.profile-image{
	position: absolute;
	width: 30px;
	height: 30px;
}
.others.profile-image::after{
	content: '';
	position: absolute;
	width: 28px;
	height: 28px;
	border: 1px solid rgba(0,0,0,0.1);
}

다행히 인스타그램에는 프로필 이미지가 많아서 가상엘리먼트만으로도 많은 태그들을 줄일 수 있었다. 휴

profile
나 미대 나온 개발자야~

0개의 댓글