개발일지0526

학습한 내용
오늘은 앞서 배운 레이아웃 내용을 토대로 실습을 해보았다. 먼저 네이버 메인 홈페이지의 있는 것과 같은 메뉴 버튼을 만들었다. 공간을 지정하고 각 메뉴 버튼에 들어가는 여백을 설정해 주었으며, border를 사용하여 테두리를 만들었다. 공간을 지정하는 태그가 여러 개 있어 각각 적용을 했고, border의 경우 테두리 선이 겹쳐 진해지는 현상을 막기 위해 border-top과 같은 태그를 이용했다. 가상선택자 li와 a태그에 블럭과 플롯으로 네이버 버튼구조를 만들었다.
두 번째로 카카오톡 친구 리스트를 만들어보았다. 이전에는 구성을 맞추는 작업을 대략적으로 했는데 오늘은 예시 화면과 같은 상태로 레이아웃까지 적용해서 만들어 보았다. 또한 여백도 커서를 올려놓았을 때 클릭할 수 있는 상태로 만들어주기 위해 display:block;을 적용했다. 여기서 꼭 알아야 할 핵심은 버티컬-얼라인이다. 인라인블럭성격인img와 블럭성격인 카카오인포를 둘 다 인라인블럭 성격으로 바꾸어서 버티컬-얼라인으로 x축 중앙정렬을 할 수 있었다.
다음으로 네이버 홈페이지에 리빙 파트 부분을 만들어보았다. 마찬가지로 이전에 간단한 구성을 만들었는데, 이번 시간에는 위치를 잡는 작업까지 함께 했다. html에서 본문 내용을 작성하고 div 태그로 한 파트의 내용을 묶었다. li태그를 x축으로 좌우로 정렬을 시켰다. 레이아웃 작업으로 박스 크기를 정하고 여백을 설정하고 마지막으로 vertical-align: middle;로 중앙 정렬을 했다.
추가적으로 네이버 뉴스 화면 상단을 만들어 보았다. 이전에는 메뉴의 내용을 쭉 기입했었는데 오늘은 상단 아래의 메뉴들을 버튼 속성을 활용하여 각각 양옆으로 배치해보았다. 마찬가지로 html에서 div 태그로 묶고 그 안에 메뉴 내용을 적었다. css 레이아웃에서 지난 시간에 참고할만한 사이트 중 플렉스 박스 사이트를 들어가서 메뉴를 양옆으로 배치하는 코드를 그대로 복사해서 넣었다. 패딩 속성을 활용하여 공간의 여백을 주었다.

학습내용 중 어려웠던 점
내가 생각하기에 강의 내용을 그대로 옮겨 실행한 것만 같은데 결과가 같지 않을 때 문제를 찾아내기까지 시간이 오래 걸렸다. 대부분은 코드 하나가 오타로 적혀있는데, 가끔 순서가 틀어지는 등의 문제가 생기면 해결하는 데에 애를 쓰게 된다. 그래도 고쳐졌을 때의 보람이 크다. 기초 강의를 듣고 실제로 실행하는 실습을 하는 작업이 배우는 과정보다 힘든 것 같다. 기존에 배운 코드를 응용하는 법을 아직 잘 몰라서 그런 것 같다.

해결 방법
강의 내용에 나와있는 코드와 대조해보며 어떤 것이 잘못되었는지 천천히 살피고 아무리 고민해도 알 길이 없으면 함께 공부하는 분들에게 물어보았다. 반복하는 작업 중에 찾아내는 경우도 있지만 습관적으로 하는 실수인 경우에는 찾아내는 것이 매우 어렵기 때문이다. 기존에 배운 html과 css의 이론도 다시금 복습해야 할 것 같다.

학습 소감
이전과 동일하게 내용을 반복학습하는 데에서 처음 익히는 내용을 습득하는 데에 큰 도움이 되지만 기초지식이 없는 상태에서 하려니 시간이 많이 소요된다. 여유시간 없이 마무리하는 경우가 많으니 아직까지는 복습하고 계속 따라 하는 수밖에 없을 것 같다. 그래도 처음의 프로그래밍을 하나도 모르는 상태에서 현재까지 계속 진행할 수 있었고 체계적인 커리큘럼 속에 함께할 수 있음에 감사하다.