✨사진에 프레임 추가하기 & 액자 만들기✨
안녕하세요. 오늘은 가상요소로 사진에 대각선 프레임 추가하는 법, 모서리를 액자처럼 꾸미기(+ 응용 : 모서리를 테이프로 붙인 것처럼 꾸미기) 배워봐요.
📌 1. 대각선 프레임 만들기
사진에 입체감을 줄 수 있는 대각선 프레임 디자인이예요. 의사요소 또는 가상요소라고도 부르는 ::after이용해서 만들어볼게요. 준비 되셨나요?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pic {
position: absolute;
}
.pic::after {
content: '';
position: absolute;
top: -10px; /* 10px만큼 경계의 위쪽으로 황장 */
left: -10px; /* 10px만큼 경계의 왼쪽으로 확장 */
width: calc(100% + 20px); /* 왼쪽 오른쪽 대각선 프레임 절반값 x2 */
height: calc(100% + 20px); /* 위쪽 아래쪽 대각선 프레임 절반값 x2 */
border-image-source: repeating-linear-gradient(
45deg, /* 45도 회전 */
#ea987e 0px, #ea987a 2px, /* 선 굵기와 색깔 */
rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 7px /* 선사이 여백 부분 */
);
border-image-slice: 20; /* 네 변의 사용 범위 */
border-width: 20px; /* 테두리 폭 */
border-image-repeat: round; /* 타일 형태로 반복 */
border-style: solid; /* 실선으로 표현 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="pic">
<img src="Images/pic05.png" alt="">
</div>
</body>
</html>
☑️ 요소를 둘러싼 테두리에 이미지를 지정하는 border-image
border-image-source: repeating-linear-gradient(
45deg, /* 45도 회전, 대각선의 기울어진 각도 */
#ea987e 0px, #ea987a 2px, /* 선 굵기와 색깔 지정 */
rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 7px /* 선사이 여백 부분 */
);
border-image-slice: 20; /* 네 변의 사용 범위 */
border-width: 20px; /* 테두리 폭 */
border-image-repeat: round; /* 타일 형태로 반복 */
border-style: solid; /* 실선으로 표현 */
box-sizing: border-box;
border-image : 이미지 테두리 따라 줄무늬 배경 넣을 때 쓰는 프로퍼티
repeating-linear-gradient : 대각선
border : 대각선 프레임 중심
border-width: 20px;
대각선 프레임의 폭이 20px
📌 2. 사진 모서리를 액자처럼 꾸미기
세련되고 심플한 사진 앨범을 디자인할 때 쓰는 기법입니다. 절취선 안에 사진을 끼워 넣은 것처럼 표현한 효과입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pic {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
.pic::before,
.pic::after {
content:'';
position: absolute;
transform: rotate(-35deg);
width: 90px;
height: 30px;
background-color: #fff;
}
.pic::before {
top: -10px;
left: -25px;
border-bottom: 1px solid #aaa;
}
.pic::after {
bottom: -10px;
right: -25px;
border-top: 1px solid #aaa;
}
</style>
</head>
<body>
<div class="pic">
<img src="Images/pic07.png" alt="">
</div>
</body>
</html>
의사요소 ::before과 ::after을 이용해서 네모박스 2개를 만들어줍니다. 저는 크기를 사진에 맞춰서 90px * 30px로 설정해주었어요. 여러분도 live server 띄워 놓으시구 웹 브라우저에 요소값이 어떻게 표현되는지 확인하시면서 작업해주세요.
그리고 transform: rotate(-35deg)로 박스 두 개를 시계반대방향으로 35도만큼 회전해 줍시다.
그리고 이 가상요소 두 개에 배경색과 같은 흰색을 지정해줍니다. 그리고 선을 그려주면 아래와 같은 상태가 되겠죠?
응용해서 위 코드에서 border-top 속성과 border-bottom 속성을 삭제하고, 의사요소의 background-color에 색을 입혀주면 사진에 테이프를 붙인 것처럼 연출할 수도 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pic {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
.pic::before,
.pic::after {
content:'';
position: absolute;
transform: rotate(-35deg);
width: 90px;
height: 30px;
background-color: #ea987e;
}
.pic::before {
top: -10px;
left: -25px;
}
.pic::after {
bottom: -10px;
right: -25px;
}
</style>
</head>
<body>
<div class="pic">
<img src="Images/pic07.png" alt="">
</div>
</body>
</html>
너무 쉽죠?
다음 시간에는 사진 테두리를 원하는 모양으로 자르는 방법과 흐림, 회색조, 세피아 필터 사용법을 배워봐요. 궁금한 점은 댓글로 남겨주세요.
'html&css' 카테고리의 다른 글
| [Logo Design] 사진에 로고 넣기, 글씨를 사진으로 채우기 (0) | 2024.04.07 |
|---|---|
| [Image Design] 사진에 필터 적용하기(대각선, 흐림, 회색조, 세피아) (1) | 2024.04.07 |
| [html/css] 가상요소 ::before, ::after 쉽게 이해하기 (1) | 2024.04.07 |
| [Image Design] 사진에 음영 추가하기 (1) | 2024.04.07 |
| [Image Design] 피사체에 그림자 배치하기 (0) | 2024.04.07 |
