DAY #6
- 문제
Profile: Who of you knows how many social media profiles you have already created? For a refreshing twist, you can also create one yourself.
- 내가 만든 CHALLENGE Code
이번 문제는 딱 한가지의 속성, 바로 ✨border-color✨ 하나 말고는 다 내가 잘 알고 있는 속성들을 이용해서 해결할 수 있는 문제였다!
내가 아는 border-color는 그냥.. 요소의 테두리 색상을 정해주는 속성인데,
이 문제에서는 중요 포인트가 되었다.
문제를 보면 ✨프로필 이미지✨ 주변에 동그란 테두리 두 개가 감싸고 있는데, 그냥 테두리가 아니라 1/4 정도는 비어있는 C형태의 테두리이다.
바로 이 모양을 어떻게 만들지?!🤔가 문제였다!!
...
그래서 서치를 해보니 border-color를 이용해서 꽤나 간단하게 만들 수있다는 것을 알게 되었다!
📝 border-color 구문
selector {border-color: color|currentcolor|transparent|initial|inherit;}border-color: 색상; 이런식으로 사용하며,
transparent : 투명
initial : 속성의 기본값
inherit : 부모 요소의 속성값을 상속한다.
이 문제에서 중요한것은 바로 ✨속성값의 개수✨였다.
📝 border-color 속성값 개수별 의미
속성값 1개
selector {border-color: 모두;} // 모두!!
selector {border-color: red;} 속성값 2개
selector {border-color: 상하 좌우;} // 상하 좌우
selector {border-color: red blue;} 속성값 3개
selector {border-color: 상 좌우 하;} // 상 좌우 하
selector {border-color: red blue green;} 속성값 4개
selector {border-color: 상 우 하 좌;} // 상 우 하 좌
selector {border-color: red blue green inherit;} 이렇게 최대 4개 까지의 구간을 나누어 테두리의 색을 다르게 줄 수 있었다!!
이 사실은 처음 알았다 😮👍
border-color: #7d6956 #7d6956 #7d6956 transparent;이를 이용해서 위와 같이 작성하니 C자 형태의 테두리를 만들 수 있었다..!!!
대박.. 완전 간단..
아래의 코드는 ✨프로필 이미지✨에 마우스를 올렸을 때(:hover) 테두리가 360도 돌아가게 만들어 주는 부분이다.
transition을 1.5초 정도 주어 돌아가는 속도를 조절하였다.
.profile {
...
&_line1, &_line2 {
...
transition: transform 1.5s ease-in-out;
}
...
&:hover .profile_line1 {
transform: rotate(360deg);
}
&:hover .profile_line2 {
transform: rotate(-180deg);
}
}이 외 다른 부분들은 특이사항 없이 쭉 진행했다!
- 결과물
쉽고 간단하게 프로필 템플릿 문제 만들기 완료!!
다음 문제도 내 지식만으로 해결 가능한 문제가 나왔으면 좋겠다.
끝
