때는 바야흐로 시험공부가 너무 하기 싫은 시험 3일 정도 남은 토요일…

사실 시험 공부 빼고 뭐든지 재밌을 때!! 하지만 그냥 놀기에는 죄책감이 든다!!

그래서 죄책감을 덜기 위해서 코딩을 했다! 이것도 전공공부 아닌가요? ㅎㅎ

암튼 무슨 코딩을 했냐하면, 사실 뭔가 각잡고 리팩토링하거나 기능 추가하는 것은 너무 오래걸릴 것 같아 학교 도서관 어플을 편하게 사용할 수 있게 만들었던 웹 페이지의 CSS를 전면 리팩토링했다. (해당 웹 사이트는 학교 몰래 만들었고, 몇가지 루트를 통해서 편의성을 극대화해둔 것이라서 우리 컴공 학생회만 쓸 수 있게 해놨다 ㅎㅎ)

암튼 난 CSS를 잘 못하기도 하고, 디자인 쪽에는 영 소질이 없기 때문에 CSS, SQL에서는 정말 좋은 성능을 보여주는 GPT에게 부탁했다. (CSS는 특히 디자인의 영역인 경우가 많아서 그런가 진짜 잘 만들어주는 경우가 많다.)

그렇게 내가 원하는 부분대로 조금씩 바꿔가면서 적용을 다하고 나니.. 뭔가 이상한게 보였다.

뭐가 문제인지 보이는가? 한 번에 보인다면 당신은 프론트가 잘 맞을 수도 있다!!

문제는 바로 왼쪽과 오른쪽 border 부분이다. linear-gradiant를 적용해서 그런지는 몰라도 왼쪽과 오른쪽 border가 반전되어 보이는 상황이다.

이를 해결하려고 열심히 검색해봤지만.. 일단 검색어 키워드를 찾지 못하였고… 또한 내가 처음 겪어보는 일이다보니 어느 CSS를 수정해야하는지 감이 잡히지 않았다. 그래서 이번에도 어쩔 수 없이 GPT의 도움을 받아보았다. (나 원래 진짜 코딩할 때 코파일럿 빼고는 거의 안쓰는데… 억울..)

맨 처음 조언은 linear-gradiant의 기울기를 바꿔보라는 것이었다. 하지만 이는 해결이 되지 않았다.

사진을 찍어서 직접 표시해주면서 문제가 되는 부분을 알려주고 나니 한 가지 방법이 눈에 띄었다.

바로 background-origin 속성이었다. 내가 사용해본적이 없었는데 아래와 같이 작성하면 된다.

background-origin: border-box;

해당 속성은 background가 어디서부터 시작하고 끝나는지에 대해 작성해주는 속성으로 나 같은 경우 border-box로 지정해주었다. 그렇게 지정해주니깐 아래와 같이!