[대구AI스쿨] 21.08.03 개발일지

임채업·2021년 8월 3일
0
post-thumbnail

□ 네이버 뉴스 – TV연예 페이지 2/3

★ 작성코드

Git 링크.네이버 TV연예

1. TV연예 메인 왼쪽 2/2

{ box-sizing: border-box }의 사용유무 차이점( ※ li{ }width 값과 border값이 있는 상태)

예시)

#ent-main .ent-left #ent-section-9 li {
    width: 200px;
    border: solid 1px #000000;
}

#ent-main .ent-left #ent-section-9 li a img {
    width: 200px;
    height: 122px;
}

① 사용하지 않을 경우 – li img{ }width 값이 liwidth값과 같아도 imgborder를 침범하지 않음

② 사용할 경우 - li img{ }width 값이 liwidth값과 같으면 imgborder를 침범함

→ 침범하지 않으려면 li img{ }width 값을 100%로 함

예시)

#ent-main .ent-left #ent-section-9 li a img {
    width: 100%;
    height: 122px;
}

● 결과 스크린샷(section-4)

● 결과 스크린샷(section-5~6)

● 결과 스크린샷(section-7)

● 결과 스크린샷(section-8)

● 결과 스크린샷(section-9)

□ 어려웠던 점

특별히 어려운 내용은 없었습니다.

□ 해결방법

이해가 안되는 부분은 강의를 반복해서 들어서 해결하였습니다.

□ 학습 소감

강의 내용을 보면서 실제 코드를 작성하였을 때, 원하는 결과값이 나오지 않을 경우 문제점을 직접 찾아서 수정을 할 수 있었습니다. 그리고 카피캣을 좀 더 비슷하게 하기위해 직접 수치나 속성값을 주어서 더 나아보이도록 노력하였습니다.

profile
반갑습니다. 잘부탁드립니다.

0개의 댓글