0524 개발일지

학습한 내용

웹사이트 레이아웃 작업에 필요한 CSS 주요 속성

• 박스 모델 box model

  웹사이트를 만들 때, 각 레이아웃의 구조를 빠르게 파악할 수 있도록 도와주는 옵션.
  margin, border, padding, content 네 가지가 있다.
  
  margin: border를 기준으로 바깥쪽
  padding: border와 content 사이 안 쪽
  margin과 padding 둘 다 content를 밀어내며 공간을 차지한다.
  CSS 속성 값 입력 시 순서대로 top - right - bottom - left (위부터 시계방향으로)
  CSS를 작성할 때 html과 body 태그에 기본적으로 적용되어있는 margin 값과 padding 값을 0으로 만들어주는 게 좋다.

  ※ box-sizing: border-box
  속성을 적용한 영역의 크기를 기준으로 크기 안쪽으로 border와 padding 값이 설정되도록 만드는 속성
  

• 마진 병합 현상

  형제 태그: 인접한 레이아웃 사이의 마진 영역이 겹쳐지는 현상. 영역이 큰 부분이 작은 부분을 병합한다.
  부모-자식 태그: 자식 태그에 들어간 마진 값이 부모 태그에도 적용되는 현상. position을 설정해 해결할 수 있다.

• display

  inline 요소를 block 요소로, block 요소를 inline 요소로 사용하고 싶을 때 사용하는 속성.
  ※ inline-block: x축 정렬이면서 width, height 값이 적용되고, 상하 배치작업도 가능!

• vertical align

  가로 정렬을 깔끔하게 해주는 속성. inline 요소에만 사용 가능.
  top: 형제 관계의 inline 요소들 중 가장 큰 값을 기준으로 상단에 배치가 됨.
  bottom: 형제 관계의 inline 요소들 중 가장 큰 값을 기준으로 하단에 배치가 됨.
  middle: 형제 관계의 inline 요소들 중 가장 큰 값을 기준으로 중앙에 배치가 됨.

• position

  position을 공부할 때 염두에 둘 세 가지 경우의 수

  1. margin-top 사용 시 부모 자식 태그 간에 발생하는 마진 병합 현상이 일어나는지
  2. top, right, bottom, left 속성을 사용할 수 있는지
  3. 자식 태그의 높이 값이 부모 태그에게 영향을 주는지

  static: 모든 태그의 기본 속성 값, 2차원
  부모-자식 태그 간 마진 병합 O
  top, right, bottom, left 속성 사용 불가
  자식 태그의 높이 값이 부모에게 영향 O

  fixed: static과 완전 반대!! 스크롤을 내려도 화면에 고정됨, 3차원
  부모 자식 간 마진 병합 X
  top, right, bottom, left 속성 사용 가능(기준: 브라우저 좌측 상단)
  자식 태그의 높이 값이 부모에게 영향 X

  relative: 2차원 + 3차원
  부모 자식 간 마진 병합 O
  top, right, bottom, left 속성 사용 가능(기준: 최초(부모) 위치)
  자식 태그의 높이 값이 부모에게 영향 O

  absolute: 3차원
  부모 자식 간 마진 병합 X
  top, right, bottom, left 속성 사용 가능(기준: 브라우저 좌측 상단, 부모의 position 속성 값에 따라 기준점이 달라짐)
  자식 태그의 높이 값이 부모에게 영향 X

학습한 내용 중 어려웠던 점 또는 해결못한 것들

position 속성의 속성값 별 차이와 특징
네 가지 속성이 가지는 특징들이 조금 헷갈리는데,
부모 태그와 자식 태그 각각의 position에 따라서도 경우의 수가 또 나뉜다고 해서 복잡함.
특히 마진 병합 현상이 차원 개념으로 이해를 하려고 해도 조금 어려움.

해결방법 작성

강의 내용을 바탕으로 직접 태그를 작성해서 일일이 테스트를 해보았다.

1. 부모 태그 position: static
   static: 마진병합O, top~속성X, 자식태그높이영향O
   fixed: 마진병합X, top~속성O(기준: 브라우저), 자식태그높이영향X
   relative: 마진병합O, top~속성O(기준: 부모 위치), 자식태그높이영향O
   absolute: 마진병합X, top~속성O(기준: 브라우저), 자식태그높이영향X

2. 부모 태그 position: fixed
   static: 마진병합X, top~속성X, 자식태그높이영향O
   fixed: 마진병합X, top~속성O(기준: 브라우저), 자식태그높이영향X
   relative: 마진병합X, top~속성O(기준: 부모 위치), 자식태그높이영향O
   absolute: 마진병합X, top~속성O(기준: 부모 위치), 자식태그높이영향X

3. 부모 태그 position: relative
   static: 마진병합O, top~속성X, 자식태그높이영향O
   fixed: 마진병합X, top~속성O(기준: 브라우저), 자식태그높이영향X
   relative: 마진병합O, top~속성O(기준: 부모 위치), 자식태그높이영향O
   absolute: 마진병합X, top~속성O(기준: 부모 위치), 자식태그높이영향X

4. 부모 태그 position: absolute
   static: 마진병합X, top~속성X, 자식태그높이영향O
   fixed: 마진병합X, top~속성O(기준: 브라우저), 자식태그높이영향X
   relative: 마진병합X, top~속성O(기준: 부모 위치), 자식태그높이영향O
   absolute: 마진병합X, top~속성O(기준: 부모 위치), 자식태그높이영향X

여전히 헷갈리지만 결과를 표로 정리해두거나, 결과 화면을 캡쳐해서 정리해두면 도움이 될 것 같다.
차이점을 중점적으로 보면서 각 속성의 특징을 이해해보는 게 좋을 듯하다.

학습 소감

HTML만 작성해볼 때보다 CSS를 작성하기 시작하면서 더 재미있다고 느낀다. 하지만 이미지 편집 프로그램처럼 내가 직접 레이아웃에 손을 대면서 편집할 수 있는 게 아니라, 텍스트로 속성을 적어서 하나씩 적용시키는 것이기 때문에 생각만큼 바로바로 결과가 나오지 않는다는 게 답답하고 뜻대로 되지 않는 부분이 어렵다. 아직까지는 그렇게 어려운 개념이 나온 건 없는 것 같지만 조금씩 헷갈려서 매일 익히는 부분을 확실하게 복습해야겠다는 생각이 든다.