관련사이트 CSS 수정

티스토리 오딧세이 "관련사이트" 박스 수정

블로그 관리에서 "나의링크"를 이용하여 자주 찾는 사이트를 정리해 둬었는데,

사이트 제목+설명을 함께 넣다 보니 링크제목이 너무 길어 지는 단점이 있었다.

그래서 박스의 글자가 2줄로 나오는 단점이 발생했는데, 

폭을 250px 으로 늘려서 해결 했다.

Chat GPT는 아무리 생각해도 대단한거 같다.

#footer .box-site ul {
  width: 250px;
}


#footer .box-site ul li {
    margin: 0;
    padding-left: 13px;
}

#footer .box-site ul li a {
    display: block;
    background: #fff;
    color: #999;
    text-decoration: none;
}

#footer .box-site ul li a:hover {
    color: #333;
}

#footer .box-site ul.on {
    opacity: 1;
    transition: opacity .2s ease-out;
}

이 CSS는 웹 페이지의 푸터(footer) 영역에 속하는 .box-site 클래스 안에 있는 목록(ul) 요소들에 대한 스타일을 정의. #footer .box-site ul: 푸터 영역 안의 .box-site 클래스 안에 있는 목록 요소들의 너비를 250px로 설정합니다. #footer .box-site ul li: 목록 요소들(li)의 왼쪽과 오른쪽 여백을 0으로 설정하고, 왼쪽 패딩을 13px로 설정합니다. #footer .box-site ul li a: 목록 요소 안에 있는 링크(a)에 대한 스타일을 정의합니다. 링크는 블록(block) 요소로 설정되며, 흰색(#fff) 배경과 회색(#999) 글씨 색상, 그리고 밑줄(text-decoration)이 없도록 설정됩니다. #footer .box-site ul li a:hover: 마우스 오버 시 링크 글씨 색상이 어두운 회색(#333)으로 변경됩니다. #footer .box-site ul.on: .on 클래스가 적용된 목록 요소들에 대한 스타일을 정의합니다. 여기서는 불투명도(opacity)를 1로 설정하고, 불투명도가 변경될 때의 전환 효과(transition)를 지정합니다.