학습한내용

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

박스모델

• 웹사이트를 제작할 때 각 레이아웃의 공백, 구조 등을 빠르게 파악할 수 있도록 도와주는 옵션

  • content : 열린 태그와 닫힌 태그안의 내용물을 칭한다.
  • border : 공간의 외각.
  • margin : border 기준으로 바깥쪽, 오브젝트의 좌표 배치 작업시에 사용.
  • padding : border 기준으로 안쪽, 오브젝트의 좌표 배치 작업시에 사용.

• 선택된 오브젝트가 주체가 되어 스스로 움직이는 것은 아니다.

• 선택한 영역에 값이 주어진 공백때문에 타의에 의해 움직이는것.
  

• 패딩에 주어진 공간값에 의해서 오브젝트의 공간이 달라질 수 있다.

  • box-sizing: 속성을적용할영역; 을 기준으로 공간값이 주어진다.

• 반복적으로 나열되는 값들을 한번에 정리할 수 있다.

  • 12시부터 시계방향 순으로 나열
    

• 태생적으로 html과 body태그, h(1~6), inline요소는 마진과 패딩값이 있다.

  • 이부분을 default값으로 0으로 만들거나 조정하여 웹사이트 제작하자.

position속성

• 웹사이트 레이아웃 작업시 큰공간을 만들면 그 공간안에 들어갈 작은구역 그 구역의 구역 그 구역의 구역~~~을 만들수 밖에 없다.
  이럴때 마진 병합현상을 겪게되는데 position의 속성을 통해 해결 할 수 있다.
  

  • margin 병합현상
    • 형제 지간 : 공간값은 더 큰값이 우선으로 적용된다.
      
  • margin 병합현상
    • 부모자식지간 : 자식관계에 공간값을 주면 부모 또한 영향을 받는다.

• display속성

  요소	특성	공간	margin(좌표설정,상하배치작업)
  inline	x축 정렬	공간을 만들지 못한다.	불가능
  block	y축 정렬	만들 수 있다.	가능함

• display-block,inline,inline-block
  - h(1~6)태그, inline도 태생적으로 공간을 가지는데 블록을 인라인처럼, 인라인을 블록처럼 적용하고 싶을 때 display 속성을 사용, 동시 적용도 가능하다.(메뉴 버튼 만들 때 주로 사용)
  
• vertical-align (inline 요소에만 적용)
  같은선상, 형제관계에 있는 inline요소 들 중 가장 크기가 큰 값을 기준으로 배치
  (top ~ middle ~ bottom)
• img태그는 inline-block성격을 가지고있다

• position 속성
  • 웹사이트는 2차원(x,y)과 3차원(x,y,z)을 적절히 섞어 제작 되는데 이것을 결정하는 속성.
  • 3가지 특징을 기준으로 하여 position 속성이 가진 특징 파악 할 수 있다.
    • margin-top 사용시 부모자식 간에 발생하는 마진 병합 현상이 일어나는가?
    • top, right, bottom, left 속성의 사용이 가는 한가?
    • 자식의 높이 값이 부모에게 영향을 주는가?

속성	마진병합	top~bottom속성	자식의 높이값이 부모에게 영향	차원
static	O	X(부모 기준)	O	2차원
fixed	X	O(브라우저 기준)	X	3차원
relative	O	O(원래 위치 기준)	O	혼합
absolute	X	O(브라우저 기준) or X	X	3차원,선택적 2차원

• 4가지 속성의 특징
  - static : 속성이 없어도 값의 변화는 없다. 즉 모든 html태그상태는 static상태(2차원)에서 시작한다.
  - fixed : 말 그대로 스크롤을 움직여도 고정되어 있으며 가장 3차원적.(쇼핑몰 배너광고처럼)
  - relative : 원래 있었던 위치 기준으로 top~bottom적용
  - absolute : 보통 부모태그가 2차원(static)상태인데 이게 바뀌면 top~bottom 이동기준이 브라우저에서 그 부모를 기준으로 형성(2차원)이 된다.
  - margin, padding은 공간 값에 의해 타으로 밀려서 이동한다. 반면에
  top~bottom 이동은 자기 자신이 주최가 되어서 움직이는 속성이다

  1. margin병합이 되었을 때
  2. margin병합이 안되었을 때
     3.top~bottom 속성순서대로 원래 위치, 원위치 기준이동, 브라우저 기준이동이다. 2차원 속성에서는 아무런 변화가 없다.
     4.자식의 높이 값이 부모에게 영향을 미칠 때부모의 높이 값이 사라지도록 설정하여도 자식의 높이 값에 의해 높이가 설정되었다.
     5.자식의 높이 값이 부모에게 영향을 미치지 않을 때부모의 높이 값이 사라지도록 설정하였을 때 자식의 높이 값과는 상관없이 사라지는 것을 볼 수 있다.

어려웠던 점

• 용어와 각 속성의 기준점이 되는 부분들이 헷갈려서 어려웠다.

해결방법

• 여러가지 시도를 해보면서 각각 어떤 특성이 있는지 재확인 하고있다.

소감

• 레이아웃이 웹사이트의 정보전달을 높이고 시각적인 부분에 많은 부분을 끼치는 요소라고 생각한다. 여러 시도를 통해 개념을 정리하고 적용할 수 있도록 해야겠다.