음수(-)margin

margin으로 .con안에 있는 setion 엘리먼트의 사각형를 부모 태그 밖으로 나오게해보자 .

section태그에게 margin값을 주게 되면 부모인 div태그와의 간격이 늘어나게 되는데, 이 margin을 0보다 작은 값을 주게 된다면 자연스럽게 부모인 div를 넘어가게 되는것이다.

이번에는 위의 사각형을 마진값을 이용해 아래처럼 모두 빨간색 틀의 사각형을 벗어나게 만들어보자

<div class="con">
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</div>

.con {
  width:300px;
  height:200px;
  margin-top:200px;
  margin-left:auto;
  margin-right:auto;
  border:10px solid red;
}

.con > section {
  height:100px;
}


.con > section:nth-child(1) {
  margin-top:-100px;
  background-color:gold;
}

.con > section:nth-child(2) {
  background-color:darkgray;
  margin-left:-100%;
  width:100%;
}

.con > section:nth-child(3) {
  background-color:pink;
  margin-right:-100%;
  margin-left:auto;
  width:100%;
}

.con > section:nth-child(4) {
  background-color:blue;
}

위 예제에서 가장 중요한 점은 분홍색 사각형을 움직일 때, 우측으로 가게하는 margin-right:-100%;가 올바르게 적용되지 않는다는 것이다. 이유는 margin-left,right값은 모두 기본값이 0인데 right값보다 left값이 우선 적용된다. 그래서 margin-left를 auto값으로 풀어주지 않으면 right값이 적용되지 않는것이다.
css에서 우선순위는 width > margin-left > margin-right 순이다.

*참고 넓이를 수식으로 표현

위 코드에서
.box-1 > img:not(:nth-child(5n))는
5의 배수에 해당하는 엘리먼트들을 제외한 나머지들에게를 뜻한다.

width:calc(100% / 5 - 20px (5 - 1) / 5);는
한줄에 양끝을 제외한 부분에 20px씩 여백을 주고 이미지의 넓이를 입력하기 위한 식인데
100%/5(모든 넓이를 이미지의 수만큼 나눈값에) - {20px(5-1)}/5}(맨 끝을 제외한 4개의 이미지의 여백 20*4=80px을 다시 이미지의 수로 나눈값)을 의미한다.

position

position이라는 css속성에 대해 알아보자.
우리가 html코드에 글을 쓰고 그 아래에 엘리멘트를 만든다면 이런 모습일 것이다.

그렇지만 저 div의 속성안에 이제부터 사용할 position값을 absolute로 준다면

위 글과 전혀 상호작용하지 않는 위치로 이동한다. 이것이 position속성이다. 한마디로 컴퓨터그래픽에 비유하자면 하나의 또 다른 레이어에서 움직이는 것이다. 이것의 속성을 표로 나타내면 이렇다.

static은 우리가 알고있는 원래의 속성이고 absolute와 fixed는 유령화라고 표현하는데 top, left, right, bottom값으로 위치를 조절할 수 있다.

위처럼 부모요소를 벗어날수도 있게된다.