styles.css

.background {
  height: 100%;
  width: 100%;
  background: linear-gradient(
    #f0edcc 70%,
    #0f4753
  ); /*첫 컬러의 영역을 70%지점까지 가지는 두 컬러의 그라데이션 지정 함수 */
  z-index: -1; /*z-index로 Z축 포개짐 정도를 조정 할 수 있음*/
  position: fixed; /*화면 기준 고정 포지션*/
  top: 0;
}
.baseDiv {
  margin: 5% 0px 0% 10%;
  height: 80%;
  width: 70%;
  border: 3px;
  border-style: solid;
  border-color: rgb(92, 230, 92);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.stacker {
  grid-column: 1/3;
  grid-row: 1/4;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  z-index: 1;
}

.staker_child {
  height: 30%;
}

.staker_A {
  background-color: red;
}
.staker_B {
  background-color: orange;
}
.staker_C {
  background-color: yellow;
}
.staker_D {
  background-color: green;
}
.staker_E {
  background-color: rgb(28, 76, 209);
}

.basePtag {
  position: relative;
  text-align: end;
  right: 0;
  grid-column: 2/3;
  grid-row: 1/2;
  z-index: 2;
}

.divone {
  grid-column: 1/3;
  grid-row: 1/3;
  position: relative;
  top: -5%;
  /*그리드가 활성화되어 상위Div가 아닌 상위Div의 그리드 한칸을 기준으로 움직임 
  때문에 현 Div 또한 상위Div의 크기에 따라 변화할 수 있도록 높이 너비를 %단위로 지정해주어야 깔끔한 grid가 나옴
  안그러면 Grid크기를 auto로 설정했을 때 상위 div보다 더 커질 수 있음*/
  left: -10%;
  height: 55%;
  width: 60%;
  border: 3px;
  border-style: solid;
  border-color: brown;
  background-color: brown;
  z-index: 2;
}

.divone_child {
  position: absolute;
  bottom: -10%;
  right: -10%;
  height: 25%;
  width: 25%;
  border: 3px;
  border-style: solid;
  border-color: rgb(42, 57, 189);
  z-index: 3;
  background-color: rgb(42, 57, 189);
}

.gglink {
  width: 100%;
  margin-top: 10%;
  text-align: center;
}
.gglink a {
  text-decoration: none;
}
a:link {
  color: #f0edcc;
}
a:visited {
  color: #f0edcc;
}
a:hover {
  color: #0f4753;
}
a:active {
  color: #0f4753;
}

.divtwo {
  grid-column: 1/3;
  grid-row: 1/3;
  position: relative;
  bottom: -50%;
  right: -50%;
  height: 55%;
  width: 60%;
  border: 3px;
  border-style: solid;
  border-color: brown;
  background-color: brown;
  z-index: 1;
}

* {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*
이번에 배운 것
1.Position
2.linear-Gradient
3.*{margin,padding:0}
4.Flex
5.Grid
6.a:link / a:visited / a:hover / a:active {} 새창열기는 html <a target="blank"></a>
*/