텍스트에 Linear-gradient 적용하기텍스트에 그라데이션 효과를 주기 위해 linear-gradient를 사용하여 다음과 같이 스타일을 적용할 수 있습니다..gradient-text { display: inline-block; background-image: linear-gradient(90deg, #0ea5ea, #0bd1d1 51%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text;}1. display: inline-block;텍스트 요소는 일반적으로 h1, p처럼 블록 요소이기 때문에 너비가 전체 화면을 차지합니다.inline-block으로 변경해서 ..

포트폴리오 사이트 프로젝트에서 화면이 768px 이하로 줄어들면, 탭 메뉴가 최상단에서 레이아웃의 중앙으로 배치되도록 했고,position sticky로 변경되도록 구현했습니다.그런데 탭 메뉴의 상위 부모 컨테이너에 padding: 10px이 적용되어 있어, fixed로 되어 있는 헤더와 통일감을 주기 위해 탭 메뉴의 너비를 화면 전체로 설정하고 싶었습니다.이를 해결하기 위해 다음과 같은 CSS 코드를 사용했습니다.@media screen and (max-width: 768px) { .list { position: sticky; top: var(--header-height); z-index: 10; width: 100vw; margin-..

개인 프로젝트를 진행하면서, 텍스트가 일정한 줄 수를 초과할 경우 깔끔한 레이아웃을 유지하기 위해 자동으로 생략(...) 처리해야 하는 상황이 발생했습니다. 텍스트를 제한된 줄 수 안에 표시하기 위해 CSS의 -webkit-line-clamp 속성을 사용합니다.이 속성은 주로 WebKit 기반의 브라우저(예: Chrome, Safari)에서 지원되며, 여러 줄에 걸친 텍스트를 클램핑하는 데 사용됩니다..title { font-size: 16px; font-weight: bold; color: var(--color-title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; over..

개인 프로젝트를 진행하는 도중, 이미지가 완전히 로드되기 전에 이미지 영역이 빈 상태로 남아 있어 레이아웃이 잠시 동안 무너지는 문제가 발생하였습니다.이를 방지하기 위해, 단순히 태그에 이미지만 넣는 것이 아니라, 이미지가 로드되기 전에도 일정한 영역을 차지하도록 설정하여 레이아웃을 안정적으로 유지할 수 있도록 하였습니다. .img-container { width: 100%; padding-top: 56.25%; /* 16:9 비율을 유지 */ position: relative; background-color: #f0f0f0; overflow: hidden;}.img { width: 100%; height: 100%; position: absolute;..