학습한 내용

x축 정렬과 y축 정렬, 중앙정렬을 이용해여 메뉴 버튼, 카카오톡 친구목록, 네이버 경제에 대해 심화적으로 실습을 했다. 확실 한건 수업을 정지 시키고 스스로 만들어 보려하니 머리가 하애졌다. 그래서 한번은 강사님께서 하시는대로 따라하면서 이해를 하자고 생각했다. 중앙정렬에는
1) margin: 0 auto; = 순서대로 상하는 0 픽셀 좌우는 자동으로 맞춘다
2) position: lelative; , left: 50%; , margin-left -박스의 절반값;
이 있다 그리고 다음 메뉴 버튼 만들기 에선 x축 정렬을 사용했는데
1) display: inline-block; = 태생적으로 공백을 가지고 있어 사용않지 않고
2) float: left; = 플롯을 사용할 때 overflow: hidden; 을 사용하면 부모의 높이값을 인식 한다 li 값 안에는 x축 정렬로 text-align: center; 를 사용했고 y축 정렬로는 1) line-heightL 50px; (기본 높이값과 동일하게)
2) html의 li와 a는 공백을 만들기 위해 padding top, bottom에 15px씩 적용했다 (기본 높이 값이 없을 때 사용가능) 여기서 글자에만 아닌 여백에도 클릭 할 수 있게 하기 위해선 display: block; 을 주었다. 저번에 시간에 배운 a:hover {color: blue;}를 사용하여 마우스를 올렸을 때 색깔까지 변화 시켰다. 이와같이 오늘만 배운게 아닌 저번에 배웠던 것들이 조화를 이뤄 실습을 하다보니 생각보다 멍 했지만 상당히 재미있다. 메뉴 버튼에 border: solid 1px red; 값을 주면 메뉴박스에 테두리가 생긴다. 허나 겹치는 부분은 1px이 아닌 2px로 인식이 되므로 좀더 자세하게 top, bottom, left에 border을 일일이 적용 시키고 .menu li:last-child {border-right: solid 1px red;} 를 사용했다 즉 li중 마지막 자식에게 오른쪽 테두리를 적용시키는 것이다. 하나하나 다 중요하기 때문에 실습할 때도 일일이 메모하고 하라는대로 따라하기만 하지않고 사용하는 속성값, 어떨 때 사용하는지 계속 인지하며 실습을 했다.
카카오톡 친구목록 같은 경우 저번에 했던 실습을 바탕으로 큰틀을 만들고 x축 정렬로 인해 우리가 흔히 봐왔었던 카카오톡 친구목록이랑 비슷한 느낌을 받을 수 있었다. 개발일지에 일일이 다 적긴 힘들지만 오늘 강의가 이때까지의 강의들 보다 어렵고 재밌었다. 어려운걸 해낼 때의 뿌듯함이랄까..

학습 중 어려웠던 내용

이제는 웹페이지만 보고 html에 코드를 짜는건 어느 정도 완성을 시킨다 허나 css에 어떤 속성을 사용하고 언제 사용하는지가 아직까지도 너무 어렵다.
이 처럼 새로운 연습용 폴더를 만든 후 도움을 받지 않고 혼자서 작성하는 html은 이젠 금방 작성한다 css같은 경우에는 막히는 부분적인 것들이 많았다
.qwe li img,
.qwe li .qw { vertical-align: middle; } 을 사용하여 이미지랑 글귀들을 x축 정렬을 시도 하였으나 속성값은 제대로 입력했는데 결과에는 적용이 안되길래 계속 머리를 굴리는 도중 아래에 보면 .qwe li .qw { display: inline-blokc;} 의 속성을 적용시키지 않고 실행을 시켰기에 되지 않았던 것이 였다.
아직 css작성에는 많은 어려움을 느끼고 있다

해결 방법

이 처럼 연습 용 sublime text의 new folder를 생성하여 직접 부딪혀 보며 알아가는 수 밖에 없는 거 같다. 내가 어느 부분에서 부족한지 알아야 그 부분을 집중적으로 파헤칠 수 있고 css작성이 어렵다고 해도 그 어려움 중에 어느부분이 가장 헷갈리고 어려워하는지 직접 알아 차릴 수 있기에 부족한 부분을 채울 수 있는 기회라고 생각든다 이 방법이 맘에 드는 이유는 도움 없이 직접 html과 css를 작성하고 적용시켜 결과를 볼 때 원하는 결과 값이 나오면 뿌듯함의 수치가 극도로 높아진다.
그러므로 안되더라도 안된다고 바로 베끼며 여기엔 이게 들어 갔었구나 외워야 겠다가 아닌 안되더라도 최대한 지식을 짜내서 내가 직접 맞춰가는 것이 훨씬 더 머릿속에 잘 들어오는 거 같다.

학습 후 소감

그 어렵다던 레이아웃의 강의가 끝이 났다. 단순 지식뿐만 아니라 도형의 특징을 알고 그 특징에 맞는 속성과 속성값을 사용하는 이미지적인 센스가 많이 필요하다고 생각한다 그래서 더 머릿속에 그림을 그리려 하고 단순 외움보단 이해를 시켜주시는 김인권 강사님께 오늘도 리스펙 했다.
다시한번 감사의 말씀 드리고 싶습니다
김인권 강사님 대구 AI 스쿨 감사드립니다 포에버~