□ 네이버 뉴스 2/2

★ 작성코드

Git 링크.네이버 뉴스

1. 네이버 뉴스 메인 왼쪽 영역

● a 태그의 손모양 변화를 없앨 경우

{ cursor: default; }

● max-width 혹은 width가 필요한 경우
① max-width : i 태그가 a 태그 바로 뒤에 있어야 할 경우(→최대값 설정)
예시)

#news-main .news-left .news-main-wrap .news-main-body .news-lists li a {
    display: inline-block;
    max-width: 360px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;   
    
    vertical-align: middle;
}

② width : i 태그가 한 자리에 똑같이 있어야 할 경우(→고정값 설정)
예시)

#news-main .news-left .news-main-wrap.news-custom .news-main-body .news-lists li a {
    vertical-align: middle;
    width: 360px;
    max-width: initial;
}

● 결과 스크린샷

2. 네이버 뉴스 메인 오른쪽 영역

● image와 span 태그의 높이가 맞지 않을 경우 : 텍스트 밑에 일반적으로 공백이 있어서 오차가 남
※ position: relative와 top을 이용하여 높이를 맞춰 줌

#news-main .news-right #news-popular .news-popular-lists li .news-pupular-info span {
    position: relative;
    
    font-size: 12px;
    color: #888888;

    vertical-align: middle;

    top: 1px;
}

● 결과 스크린샷

□ 어려웠던 점

현재 브라우저에서 사용하고 있는 폰트에 따라, 보이는 모양 및 이미지와의 간격과 정렬에서 차이가 나서 이를 수정하는 것이 어려웠습니다.

□ 해결방법

브라우저의 검사를 이용하여, 수치를 조정해보면서 해결하였습니다.

□ 학습 소감

보기에는 간단해 보이지만 막상 코드를 입력하게 되면 그 양이 엄청 많다는 점을 매번 깨닫습니다. 앞서 배운 내용을 사용해서 i 태그에 background-image를 넣어보았는데, 생각보다 잘 되지 않아서 아쉬운 점이 있었습니다.