● { 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
값이 li
의 width
값과 같아도 img
가 border
를 침범하지 않음
② 사용할 경우 - li img{ }
의 width
값이 li
의 width
값과 같으면 img
가 border
를 침범함
→ 침범하지 않으려면 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)
특별히 어려운 내용은 없었습니다.
이해가 안되는 부분은 강의를 반복해서 들어서 해결하였습니다.
강의 내용을 보면서 실제 코드를 작성하였을 때, 원하는 결과값이 나오지 않을 경우 문제점을 직접 찾아서 수정을 할 수 있었습니다. 그리고 카피캣을 좀 더 비슷하게 하기위해 직접 수치나 속성값을 주어서 더 나아보이도록 노력하였습니다.