내용

5.position
홈페이지는 2차원과 3차원을 조합해서 이루어져있다.
position은 3가지 경우의 수를 기억하면 된다.
1. margin-top 사용시 부모 자식 지간에 발생하는 마진병합현상이 일어나는지...
2. top,right,bottom,left 속성을 사용할 수 있는지.
3. 자식의 높이 값이 부모에게 영향을 주는지

position: static;

1. margin-top 사용시 부모 자식 지간에 발생하는 마진병합현상이 일어나는지.->일어남
2. top,right,bottom,left 속성을 사용할 수 있는지.->사용할 수 없음
3. 자식의 높이 값이 부모에게 영향을 주는지->영향을 줌
이러한 특징은 2차원이 가지고 있는 특징이다.
모든 html태그는 기본적으로 position: static; 상태이다. 다시말해, 모든 모든 html태그는 2차원의 특성을 가지고 있다.

position: fixed;

정리하면, position: fixed;의 특징은

1. margin-top 사용시 부모 자식 지간에 발생하는 마진병합현상이 일어나는지.->X
2. top,right,bottom,left 속성을 사용할 수 있는지.->O(단, 좌표기준점이 브라우저상단기준으로 바뀜)
3. 자식의 높이 값이 부모에게 영향을 주는지->X

이러한 특징이 바로 3차원의 속성이다. position: fixed;은 3차원특징을 가지고 있다.

position: relative;

정리하면, position: relative;의 특징은 

1. margin-top 사용시 부모 자식 지간에 발생하는 마진병합현상이 일어나는지.->O
2. top,right,bottom,left 속성을 사용할 수 있는지.->O(단,기준점이 최초 파란색박스가 있었던 위치를 기준으로 움직이고 있다. )
3. 자식의 높이 값이 부모에게 영향을 주는지->O

position: relative;은 2차원과 3차원의 특징 모두를 가지고 있다. 혼합형이다.

position: absolute;

정리하면, position: absolute;의 특징은

1. margin-top 사용시 부모 자식 지간에 발생하는 마진병합현상이 일어나는지.->X
2. top,right,bottom,left 속성을 사용할 수 있는지.-> O(단, 좌표기준점이 브라우저상단기준으로 바뀜)
3. 자식의 높이 값이 부모에게 영향을 주는지->X

3차원의 특성을 가지고 있다.

position의 4가지특성 그리고 3가지 경우의 수를 모두 숙지해야 레이아웃을 잘 만들수가 있으니, 꼭 숙지할 것.

6. z-index
   z축은 3차원에 있는 것이므로, 3차원 속성을 가지고 있는 position (relative, fixed, relative)에서만 사용이 가능하다. static은 2차원 속성이라 애초에 z축이 존재하지 않기 때문에 z-index를 사용할 수가 없다.

.z-one
width: 200px;
height: 400px;
background-color: yellow;
/ z-index: 10; /
.z-two {
width: 200px;
height: 300px;
background-color: blue;

/* z-index:20; */

첫 번째 형제의 포지션에 absolute 사용하면 두 개의 레이어가 겹침.
그런데 두 번째 형제의 포지션에 absolute 사용하면 두 개의 레이어가 겹치지 않음.
즉,
첫 번째 형제의 포지션이 2차원인지 3차원인지에 따라서, 레이어가 겹칠지 안겹칠지가 결정됨.
브라우저상에서 큰 공간을 작업할 경우에, 레이어가 겹치는 문제가 있기 때문에 2차원으로 작업을 하는 것이 좋다.

7. float과 clear
   float : x축으로 정렬하게 만든다.
   

이렇게 y축으로 정렬되어있던 것을

float을 사용할 때 같이알아야할 개념이 바로 clear!
정리하면,
float은 같은 선상(x축)에 배치하고 싶을 때 사용하는 것이고,
clear은 그 기능을 다시 끄고자할 때 사용하는 것.

첫 번째 주의점) float의 단점은 브라우저의 크기를 줄였다 늘렸다했을 때 레이아웃이 틀어질수도 있다.
그래서 이를 방지하기 위해서 section 태그를 사용한다.
그럼 section이 고정되어있기 때문에 레이어들이 틀어지지 않는다.
즉, 고정된 section내에서 float을 사용해야 레이어들이 틀어지는 것을 방지할 수 있다.

두 번째 주의점) float을 사용한 영역(자식) section(부모)
이때 부모의 height값을 없애면 높이값이 사라지게된다. 자식의 높이값이 부모의 높이값에 적용되지 않는다.

세 번째 주의점) float을 사용할 시에, position의 상태는 static,relative 만 적용해야한다.
순수3차원의 속성인 absolute,fixed는 float과 같이 사용할 수가 없다.

float = 3차원의 성질을 가지고 있다.
같은 3차원이기 때문에 그 기능이 상쇄됐다로 이해하면됨.

8. overflow
   박스내에 있는 글자들이 많아서 박스밖으로 벗어나지 않고, 감추는 것.
   코드는 overflow: hidden;
   

이런식으로 노란박스를 벗어나지않고 박스내에 글자들이 숨게된다. 그런데 숨은 글자들을 스크롤바를 생성해서 보이게 하고 싶다면, overflow-y: scroll; 하면 y축으로 글자들이 정렬하게 된다. overflow-x: scroll; 하게되면 x축으로 정렬하는건데 박스내에서 x축으로 더 갈수가 없으니 화면상에서 출력이 되지 않는다.

자식(left-2,right-2)이 3차원(float 갖고있으니까)이기 때문에, 자식의 높이값이 부모의 높이값에 적용되지 않아서 브라우저상의 부모(section)의 색인 오렌지색 박스가 생성되지않는다.
단, 이때

overflow: hidden; 사용하면 오렌지박스가 나옴!

즉, overflow와 float을 결합해서 사용하게 되면 자식의 높이값을 인식시켜서 부모의 높이값으로 만들수가 있어서 오렌지박스가 나옴!

9. flex
   float보다 발전된 개념. float보다 수월하게 웹사이트 배치작업할 때 사용.

좀더 명확한 flex의 기능을 확인하고자 높이값을 변경했음.

10. 중앙정렬 하는 방법

11. 가장 쉬운 방법: margin 상/하 좌/우 여서 margin 0 auto;
    

12. position: relative; 이용 / relative는 left 속성사용 가능, margin-left: -150px;(width의 절반값 사용)
    

13. 실습 : 기본 레이아웃
    메뉴 태그는 nav태그로 감싸야한다.

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

외워야할 개념이 너무 많아서 개념설명듣고 바로 실습하는데 따라가는데 어려웠던 것 같다. 특히 position의 4가지 속성. 2차원과 3차원으로 나누어서 이해하는 것이 어려웠다.

해결방법 작성

개념을 외우지 않으면 선생님께서 작성하는 코드를 그대로 받아적는 것밖에 되지 않아서 외워야되는 개념은 필기(노트북에도, 노트에도!)를 해서 속성을 보면서 코드를 이해했다. 아직 다 암기는 못했지만 왜 여기서 이러한 태그를 써야하는지는 전부 이해했다.

학습 소감

어렵다.. 어렵긴한데 재밌다..뭔소린지 모르겠는데.. 알 것같다.^_^;