1)학습한 내용

CSS Layout

1. box-model(박스 모델)

박스 모델이란, 웹사이트를 만들 때 각 레이아웃의 공백이나 구조를 빨리 파악할 수 있도록 도와주는 일종의 옵션.

<박스모델의 속성 종류>

• margin : border를 기준으로 다른 요소와의 바깥쪽 여백
• padding : content 영역과 border 사이의 안쪽 여백
• border : padding 영역과 margin 사이의 테두리
• content : 요소의 콘텐츠가 표시되는 영역

(index.html)

• 열린 태그와 닫힌 태그 사이의 내용물을 콘텐츠 라고 한다.
  ex) Hello World

(style.css)

☆ 한 줄 주석처리 쉽게 하는 팁! -> Ctrl+/

margin 과 padding 은 어떤 오브젝트의 특정 위치에 공백을 넣어 좌표를 옮기고자 할 때 사용한다.

• margin : border를 기준으로 바깥쪽
• padding : border를 기준으로 안쪽

margin과 padding은 선택된 영역이 주체가 되어서 움직이는 것이 아니라, 빈 공백에 의해서 타의적으로 움직인다.

padding 속성값이 있을 경우, 선택된 영역의 공간의 크기가 달라질 수 있다.

ex)
width : 200px;
height: 200px;
padding-left: 100px
=>공간의 크기는 300px이다.

만약 공간의 크기는 유지하는 상태에서 padding으로 위치를 변경할 경우, CSS에서 box-sizing: border-box;를 넣는다.

• 속성을 적용한 영역의 크기를 기준으로 해서 크기 안에서 값이 설정된다.

• 왼쪽부터 시계방향, 값이 없는 경우에는 비워두면 된다.
• 코드가 짧을 수록 용량이 작아서 로딩 시간을 줄일 수 있기 때문에 줄여 쓰는 것이 좋다.ex) margin: (top)-(right)-(bottom)-(left)

태생적으로html, body태그에는 margin과 padding이 default로 적용되어 있다. 그래서 웹사이트를 만들 때 두 태그를 모두 선택하여 값을 0으로 설정해주어야 한다.

2. margin 병합 현상

• 형제지간에 발생하는 마진 병합 현상
• 부모자식지간에 발생하는 마진 병합 현상

1) 형제지간에 발생하는 마진 병합 현상

margin-one에는 margin-bottom 값을 주고, margin-two에는 margin-top 값을 주었을 경우, 둘 중 큰 값이 작은 값을 병합해버린다. 둘 사이의 값이 동일한 경우 그 값을 공유한다.

2) 부모자식지간에 발생하는 마진 병합 현상

• 웹사이트 레이아웃 작업시 가장 많이 접하게 되는 현상.
  CSS에 margin-child에 margin-top 값(100px)을 주었을 경우, margin-child만 100px 밑으로 밀리는 것이 아니라 margin-parent도 같이 100px 밑으로 밀려난다.

• 부모자식지간 마진 병합 문제 해결 방법
  child만 위로 공백을 주기 위해, "position:을 사용한다.
  .margin-child { position : absolute; }를 넣어준다.

3.display

1. inline(span, x축); - 기본 값, 요소를 inline 요소처럼 표시, 앞 뒤로 줄 바꿈이 되지 않는다. 각각의 영역 사이에 공백들을 갖고 있다.
2. block(h1, y축); - 요소를 block 요소 처럼 표시, 요소 앞 뒤로 줄 바꿈이 가능하다.
3. inline-block; - 요소는 inline 인데 내부는 block 처럼 표시함, 박스 모양이 inline처럼 옆으로 나열된다. 주로 메뉴버튼을 만들 때 주로 사용된다.

h1 태그도 태생적으로 margin, padding 값을 가지고 있다. 정확한 레이아웃 작업을 위해 값을 0으로 설정해야한다.

4.vertical-align

• inline이나 linline-block-요소에만 적용된다.(div태그에서는 작동 X)
• 요소 자체만을 정렬하고, 내용에는 영향을 미치지 않는다.
• 형제관계에 있는 inline요소들 중에서 가장 숫자(크기)가 큰 값을 기준으로 (top,bottom,middle)에 위치한다.

5.position

• 1차원: 선
• 2차원: 평면 / 주변 요소 이동하면 그 옆의 요소도 다같이 움직인다.
• 3차원: 깊이, 레이어 / 한 요소가 움직여도 깊이가 다르면 다른 요소 움직임에 영향을 미치지 않는다.
• 웹사이트는 2차원과 3차원의 조합으로 만들어진다.

position을 공부할 때 고려할 3가지 경우의 수

• margin-top/bottom 사용시 부모 자식 지간에 발생하는 마진 병합 현상이 일어나는가 (2차원 O, 3차원 X)
• top, right, bottom, left 속성을 사용할 수 있는지 (2차원 X, 3차원 O)
• 부모 태그에 높이 값이 없는 경우, 자식 태그의 값이 부모 태그에 영향을 줄 수 있는가 (2차원 O, 3차원 X)

■ position 의 속성값 4가지

1) postion: static

• margin-top/bottom을 사용하면 부모자식지간 마진 병합 현상이 생긴다.
• top, right, bottom, left를 사용할 수 없다.
• 부모 태그에 높이 값이 없는 경우, 자식 태그의 값이 부모 태그에 영향을 줄 수 있다.

즉, position: static은 2차원에 포함되는 속성값

모든 html 태그는 기본적으로 position: static 상태이다 → 모든 html 태그는 2차원에서 시작한다.

2) position: fixed

• margin-top/bottom을 사용하면 부모자식지간 마진 병합 현상이 생기지 않는다.
• top, right, bottom, left를 사용할 수 있다. 단, 좌표 기준점이 브라우저를 기준으로 바뀐다.
  ③ 부모 태그에 높이 값이 없는 경우, 자식 태그의 값이 부모 태그에 영향을 줄 수 없다.

즉, position: fixed는 3차원에 포함되는 속성값

3) position: relative
① margin-top/bottom을 사용하면 부모자식지간 마진 병합 현상이 생긴다.
② top, right, bottom, left를 사용할 수 있다. 좌표 기준점이 처음 있었던 위치가 기준이다.

• 부모 태그에 높이 값이 없는 경우, 자식 태그의 값이 부모 태그에 영향을 줄 수 있다.

※ 자기자신이 주체가 되어서 움직이는 속성
즉, position: relative는 2차원의 특징과 3차원의 특징을 모두 가지고 있는 속성값

4) position: absolute

• margin-top/bottom을 사용하면 부모자식지간 마진 병합 현상이 생기지 않는다.
• top, right, bottom, left를 사용할 수 있다. 단, 좌표 기준점이 브라우저를 기준으로 바뀐다.
• 부모 태그에 높이 값이 없는 경우, 자식 태그의 값이 부모 태그에 영향을 줄 수 없다.

※ position: absolute 의 좌표 기준점은 부모의 postion이 달라지면 좌표 기준점도 달라진다.
예) 부모의 position 이 3차원(fixed, relative, absolute)이 되면, 자식의 좌표 기준점이 처음 있었던 위치 기준으로 바뀐다.

즉, position: absolute는 3차원의 특징을 가지고 있는 속성값

2)학습내용 중 어려웠던 점 또는 해결하지 못한 점
강의 내용을 완벽하게 이해하지는 못한 것 같다. 오전 1회독 오후 1회독을 권장하고 있지만, 개인적으로는 하루가 빠듯하다. 내가 학습의 속도가 느린 것은 알고 있으나, 매일 진행되는 진도가 다소 벅찬 감이 있다.

3)해결 방법
강의를 놓치더라도 그냥 그 부분을 비워두고 1회독을 한번 마친 후에 2회독 때 조금 더 자세하게 듣는 식으로 시간을 조금 줄였다. 이번주 내내 2회독을 다 마치지 못해 일지 작성을 못했었는데 오늘 처음으로 2회독을 마쳤다.

4)학습 소감
매일매일이 쉽지는 않다. 어디선가 들어본 것 같으면서도 매번 새로운 내용들이 너무 많아 정리가 잘 되질 않는다. 전체 내용을 요약하는것도 조금 어렵다. 이제 7월의 시작인 만큼 이달이 끝날 때는 보다 익숙해져 있을 수 있도록 노력해야겠다.