[배운내용]

1. 네이버 쇼핑페이지 실습1

<쇼핑 페이지 구성>
① 상단 - top라인 / middle라인(검색창) / nav라인
② 중앙 - 4개의 열로 구성 (적응형웹사이트지만 실습에는 pc버전만 적용)
③ 하단 - 공지사항, 회사소개 약관 등

1) 상단

(1) 상단 html

컨테이너 클래스를 사용할때

(2) 상단 css

2) 중앙

(1) 중앙 html

(2) 첫번째 list_item

(3) 두번째 list_item

#shop_main .list_item.banner img{
	width: 100%;
	height: 100%;
}

→ list_item과 banner사이에 띄어쓰기를 안한 이유는 여러 개의 list_item중에서 banner만 적용을 하겠다!라는 뜻★★

[어려웠던 점]

em태그? 배우진 않았지만 오늘 언급된 태그라 궁금

오늘도 브라우저 비율을 바꿨을 때 디자인이 깨지는 현상이 생겼다. 네이버 메인을 할때 검색창을 만들 때 브라우저 비율을 바꿨을 때 버튼아래에 미세한 여백이 생겼었는데, 오늘도 비슷한 오류가 있었다. list_item첫번째를 할 때 브라우저 배율을 바꾸니 볼더 값이 커져서 안의 공간도 줄어들었다.

[해결방법]

멘토님께 질문을 드렸을 때 네이버에서 사용한 코드와 비교해 보라고 하셔서, 네이버 화면에서 한참 비교해봤지만 아직은 코드보는게 익숙치 않아서 그런지 차이점을 찾기가 쉽지않았다.

그러다 어제 배운 calc()값이 떠올라서, list_item에서 left의 너비가 124px이니까 right를 calc(100% - 126px)로 지정했더니 더 이상 오류가 나타나지 않았다.

[학습소감]

왜 똑같은 코드를 작성하고 다른 사람에게 나타나지 않는 오류가 나에게 나타나는지 아직도 참 의문이지만 이런식으로 하나씩 해결 방법을 찾아가야겠다.

철저히 문과생 마인드를 가진 사람으로서 코딩을 배우기 전에는 저런 일에서 어떤 재미를 느낄것인가? 가 가장 의문이었던 것 같다. 하지만 생각보다 표현 방법도 다양하고 빈 공간을 하나씩 채워나간다는 것 자체로 즐겁고 흥미로운 경험이다. 지금까지 실습에서는 아직 배운 부분에서만 하느라 카피하는데도 한정적인 부분만 카피하고 있는데, 실제 네이버 화면과 비교하면서 이런건 어떻게 한걸까? em이란 태그는 뭘까? 여러가지 호기심이 생기는 것이 스스로도 신기하다.