개발일지

[학습한 내용]
서브라임텍스트 프로그램을 활용하여 html과 css파일을 생성하고 오늘은 레이아웃에 대해 알아보았다. 레이아웃 작업에서 css지원 속성에 대해 알아보았다. 크게 박스 모델, 마진 모델, 디스플레이, 버티컬. 포지션 속성이 있다.
마진과 패딩속성을 이용하여 박스 모델의 웹페이지상의 위치를 조절할 수 있다. 이때 참고로 위치는 주체적인 위치가 아닌 공백을 활용하여 밀린 위치라고 생각하면 된다. 또한 패딩을 사용하게 되면 공간의 크기가 달라질 수 있으니 주의해야 한다. 공간을 그대로 유지하고 싶다면 box-sizing : border=box코드를 이용한다.
마진과 패딩을 각각 좌우위아래로 적용하게 되면 코드가 길어진다. 이 경우 마진 속성 하나로 시계방향 순서로 한 줄 안에 작성이 가능한다. 이렇게 표시하므로서 브라우저 로딩 속도를 줄일 수 있다. 웹사이트를 만들면 박스에 태생적으로 약간의 마진과 패딩, 즉 조그만 공백이 기본값으로 생기므로 이를 제거하기 위해서는 css 맨 위에 html, body를 마진:0, 패딩:0으로 설정하는 것이 좋다.
마진은 병합현상이 나타날 수 있다. 이는 레이아웃 작업시 가장 많이 나타나는데, 형제지간과 부모지간에서 병합현상이 나타난다. 부모지간 병합현상은 마진차일드의 탑에 픽셀을 적용하면 마진페어런츠, 즉 부모도 함께 위치가 밀리게 되는 것을 의미하는데, 이는 포지션 속성으로 해결가능하다.
디스플레이 속성에서는 html의 두 요소 inline과 block요소를 통해 그 의미를 알아볼 수 있었다. 정리하면 inline요소는 공간을 만들 수 없고 마진 탑, 바텀과 같은 상하배치작업이 불가능 했다. block은 이와 반대로 공간과 상하배치작업이 가능했다. 여기서 inline요소를 block요소로, 혹은 block요소를 inline 요소로 활용하고 싶을 때 사용되는 것이 display이다. 디스플레이 속성을 활용하여 태그 진영을 바꿀 수 있다. 두 개의 요소를 모두 활용하고 싶다면, 디스플레이:inline-block을 사용한다.
속성들을 정렬된 상태로 보고 싶을 때 사용하는 속성이 align속성이다. css에서 vertical-aline:top 혹은 bottom 혹은 middle 이런 식으로 배치가 가능하다. 여기서 참고할 것은 img태그도 inline-block의 속성을 가지고 있다는 것이다. 왜냐하면 img는 블럭요소와 달리 x축으로 나열이 가능하고 공간에 대한 크기를 가지기 때문이다.
포지션 속성은 레이아웃에서 가장 중요하다. 포지션 개념을 알기 위해서는 1차원, 2차원, 3차원의 개념을 알고 있어야 하는데, 웹사이트는 2차원과 3차원의 적절한 혼합이다. 포지션으로 속성값의 차원을 결정짓는 것이라 보면 된다. 포지션은 3가지 경우의 수를 기억한다. 첫째, margin-top 사용 시 부모 자식 지간에 발생하는 마진 병합 현상이 일어나는지. 둘째, top, right, bottom, left 속성을 사용할 수 있는지. 셋째. 자식의 높이 값이 부모에게 영향을 주는지. 이에따라 포지션이 달라진다.
포지션 첫번째로 스테틱은 마진 탑을 사용시 부모자식간 마진병합현상이 일어나고 탑 바텀 라이트 레프트 사용이 불가능하며 부모가 높이 값이 없을때 자식의 높이가 부모에게 영향을 줄 수 없다. html태그는 기본적으로 포지션 스테틱 상태이다. 이는 2차원의 속성값이 기본임을 말한다. 같은 예시로 포지션 픽스드를 적용해보면 정반대의 결과가 나온다. 이렇게 포지션 앱솔루트와 릴레티브를 적용해본다. 정리하면 static은 2차원, fixed와 absolute는 3차원, relative는 2차원과 3차원의 속성 두가지를 모두 가지고 있다고 보면 된다.

[학습한 내용 중 어려웠던 점 또는 해결못한 것들]
학습하는 내용이 지난 주에 배운 html과 css에 비해 조금 더 디테일해서 적용해보고 이해하는데에 시간이 더 오래 소요되었다. 강의를 보며 내용을 그대로 적용하는 것은 시간이 걸려도 결과물을 보며 맞게 작성해가고 있는지 확인이 가능한데, 실질적으로 적용해야 하는 실습 내용은 그러할 수 있을지 의문이었다.

[해결방법 작성]
우선은 시간이 허용되는 대로 처음부터 끝까지 따라해 보았다. 내용을 이해하는 데에는 내용정리와 반복이 필요할 듯 보인다. 그래도 css에서 가장 중요한 작업인 레이아웃에 대해 알게 되니 조금은 보람찬 느낌이 들었다. 계속 연습하고 눈과 손을 익숙하게 하는 방법 밖에 없는 것 같다.

[학습 소감]
이전에 알고 있던 부분의 내용들이 아니니 강의가 진행될 수록 원래의 내용에 더해 하는 것들이 더욱 어렵게 느껴진다. 시간이 좀 소요될 것으로 보이나 주어진 시간 안에서 습득할 수 있는 부분을 해내야 겠다고 생각했다.