📚 12/22(금) 내일배움캠프 Java-Spring 2일차 TIL - project 마무리(1)

📝 오늘의 학습 키워드

• 본캠프 미니 프로젝트 마무리

 

 

 

📍 outline 적용, css로 원형 그라데이션 효과 주기

  프로젝트 진행 중에 border에 적용시키는 효과 때문에 검색도 많이 하고 팀원들에게도 물어봤다. 첫 번째 문제는 두 개의 도형(영역?)을 겹쳤을 때 border를 주면 한 개의 도형이 밀려나는 것처럼 보이는 것이 문제였고, 두 번째는 원형의 border에 그라데이션 효과가 적용되지 않는 것이었다.

  

 

 

  첫 번째 문제는 팀원에게 물어보고 해답을 얻었다. border 대신 outline을 적용시키면 되는 간단한 문제였다.

	.cardbg {
            width: 350px;
            height: 450px;
            background-color: white;
            outline: #411152 solid 5px;
            border-radius: 3rem;
            margin: 10px auto 10px auto;
        }
        .cardtop {
            width: 350px;
            height: 224px;
            background: linear-gradient(285.05deg, #23104F 0%, #E53A81 88.66%),
                linear-gradient(0deg, #411152, #411152);
            outline: #411152 solid 5px;
            border-top-left-radius: 3rem;
            border-top-right-radius: 3rem;
        }

<왼: border 속성 적용 / 오: outline 속성 적용>

 

 

 

 

 

 

  두 번째 문제는 검색을 많이 해보다가 답을 얻었는데, 일단 border에 그라데이션을 설정할 때는 border-image, border-image-slice 속성을 이용해야 한다. 원형을 border-radius: 50%; 를 적용해서 만들기 때문이다.

	.circle {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-image: linear-gradient(90deg, #110D2D 0%, #C55C8E 100%);
            background-origin: border-box;
            background-clip: content-box, border-box;
            border-image-slice: 1;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .innercircle {
            width: 200px;
            height: 200px;
            background-image: url('./001.PNG');
            background-origin: border-box;
            background-clip: content-box, border-box;
            border: solid 5px transparent;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

 

  내가 찾아본 방식은 똑같은 사이즈의 원을 두 개 만들어서 해결하는 것이었다. 바깥쪽 원형 background-image에 그라데이션을 넣어주고 안쪽 원형 border의 색을 투명하게 설정하면, 왼쪽 그림처럼 border에 그라데이션 효과를 준 것처럼 표현된다. 이 상태에서 이미지를 넣으면 오른쪽 그림처럼 적용이 가능하다.

<왼: background-color: white; 속성 적용 / 오: background-image: url('./001.png'); 속성 적용>