학습 한 내용

네이버 블로그 부분을 도면작업하는 실습을 했다. 신기하게도 강의를 듣기전에 블로그 페이지만 보고 구상을 먼저 해보았다
일단 맨 윗부분을 header로 생각을하고 header 부분에 input, button, 글자가들어가는 h2나 h3 등 그 후 각 class를 지정해주고 높이 값을 확인 해보니 1080px이므로 width값이 1080px 인 container를 css에 만들어 준후 전부 적용할 수 있도록 부모의 위치로 올린다. 높이값을 확인하고 header의 높이값 설정 후 display: flex , flex-wrap: wrap , justify-content: space-between ,align-items: center 를 이용하여 검색 창과 옆에 메뉴버튼, 통합 검색란을 x축 정렬 양 옆으로 배치시킨다. 등 이것뿐만이 아니라 다음에 할것들도 이제는 여러번 실습하고 복습해본 결과 보자마자 어느정도는 바로바로 도면작업이 가능하다 양이 많았다고 생각드는 부분들도 하는방법을 깨닫고 나선 속도가 올라가니 금방금방 해나간다. 생각보다 레이아웃 부분이 이젠 많이 적응해서 그런지 쉽다고 느껴졌을 무렵 김인권 강사님께서 매일 보시는 네이버 소스에선 float 을 많이 사용한다. flex같은 경우는 자주 보고 쓰고 했기에 너무나도 친근하고 쉽게 이용이 가능하지만 float은 아직 좀 많이 헷갈린다. 애초에 소스자체가 float보다 flex 자체가 간단하고 쉽다고 하셨다.
그런데 왜 네이버에선 모든 소스를 flex보단 float을 사용하냐면
css의 flex같은 경우는 익스플로우의 10버전에만 사용이 가능하고 6~9 버전에선 호환, 지원이 안된다. 그러기에 복잡해도 네이버에선 float을 사용하는 것이다. 만약 이때까지 한 실습들을 float을 사용했다면 정말 머리가 터졌을 것이다

그리고 처음 header 부분 소스 작성할때left 부분에 margin-top: 8px; 를 넣어 검색란이 조금더 중앙에 배치할 수 있도록 추가로 넣었었지만 오른쪽에 로그인과 메뉴 부분을 도면작업 마무리 하고 나니 중앙에 정렬 되있던 검색란이 조금 내려가 있는 모습을 확인 할 수 있었다
왜냐하면 flex를 사용하여 y축 정렬을 시켰지만 옆에 대상이 없어서 x축에 대해 y축정렬이 되지 않았었다. 로그인 부분을 완성시키고나니 대상이 생겨 x축에 대한 y축 정렬이 가능했고 중앙으로 배치하려고 적었었던 margin-top: 8px; 에 의해 정렬되있는 검색란이 아래로 내려갔었던 것이다.

학습 후 소감

항상 같아보이는 실습이지만 미세하게 다른내용들이고 비슷한 부분들은 강의를 보지않고도 할 수 있을 정도로 실력이 나름 갈고 닦인것 같다. 아직 많이 부족하지만...
이제는 도면작업이 생각보다 스스로 해갈 수 있다보니 황홀해진다.
정말 늘 친절하시고 명강의 해주시는 김인권강사님 감사합니다.
대구AI스쿨 관리자분들 사랑합니다