[TeamProject] 20230108 원 배치 과정②

문제점

반응형 화면을 적용해보았을 때 선과 원이 따로 분리되는 문제가 발생.

---

하려고 했던 것 

화면의 오른쪽, 왼쪽 여백을 주기 위해 만든 :  .introduction-items-wrapper :    border: 1px solid yellowgreen;

동그라미 감싸기 위해 만든 : .introduction-circles-wrapper :   border: 1px solid blueviolet;

선 감싸기 위해 만든 :  .introduction-lines-wrapper :   background-color: yellow;

 

---

어떻게 할까?

관련해서
.introduction-circles-wrapper
.introduction-lines-wrapper
의 scss 포지션(position) 속성에 대해서 수정할 필요성을 느꼈다. (더불어 이해와 응용부족도.)

---

공부정리

 

static : 일반적인 흐름을 따라 요소를 배치하는 속성.

기본 포지션 속성.

relative : 일반적인 흐름을 따라 요소를 배치하고, 자신을 기준으로 위치 값을 적용.

static 과 같이 일반적인 순서에 따라 요소를 표시하지만, 추가적으로 부여되는 top, right, bottom, left와 같은 속성을 자기 자신을 기준으로 적용.

각 요소들이 static 에서의 위치를 기준으로 각각 적용한 속성을 따라 해당 픽셀만큼 요소가 이동.

즉, relative는 static 에 위치 등의 속성을 부여하는 개념.
absolute : 요소를 일반적인 흐름이 아닌 가장 가까운 특정 부모 요소에 따라 상대적으로 배치. 부모에 특정한 포지션 속성이 없다면(static 포함) 상위 컨테이너 블록을 기준으로 함.

absolute는 static이 아닌 속성이 부여된 부모를 기주능로 위치를 설정. 

부모에 부여된 속성이 없을 경우, body를 기준으로 정렬.

fixed : 요소를 일반적인 흐름이 아닌 뷰포트의 컨테이너 블록을 기준으로 배치.

화면사으이 특정한 위치에 고정.
sticky : 일반적인 흐름을 따라 요소를 배치하고 스크롤되는 가장 가까운 부모 컨테이너 블록을 기준으로 위치값을 적용.

 

참고 사이트 
CSS 포지션 속성 설명 : absolute, fixed, relative 차이 설명

※핵심요약 4줄※

static은 기본 포지션 속성. 요소를 기본 흐름에 따라 표시.

relative는 static위치에서 부여된 값에 따라 포지션이 변경.

absolute는 static이 아닌 다른 속성을 갖고 있는 부모를 기준으로 포지션 설정.

fixed는 화면상의 특정한 위치에 요소의 포지션을 고정.

---

현재상황

.introduction-items-wrapper {
  border: 1px solid yellowgreen;
  margin: 3rem;
  padding: 3rem;
}

.introduction-circles-wrapper {
  border: 1px solid blueviolet;
  display: flex;
  align-items: center;
  // justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
  position: relative;
  z-index: 2;
  height: 37rem;
  width: 50rem;
  min-width: 50rem;
  margin: 0 auto;

.introduction-lines-wrapper {
  // height: 37rem; // introduction-circles-wrapper 값과 같게
  width: 50rem; // introduction-circles-wrapper 값과 같게
  height: 40rem;
  background-color: yellow;
  position: relative;
  z-index: 10;
  // top: -37rem; //height 값과 같게

위에서 

.introduction-lines-wrapper 의 

positon : relaitive; 를 

absolute;로 바꾸어보면 

absolute 에서 top 값을 주게 되면, 부모인 .introduction-items-wrapper 의 위로 올라가게 되고 , 

top: - 값을 주어서 올리려고 했는데 그러면 화면상에서 사라지기 때문에 top : 40rem 을 준 모습)

 

그러므로 static, 제 위치에서 lines만 담긴 wrapper 종이를 올리고 싶으므로 

position 값은 relative로 사용하고,

top :  -(circles-wrapper의 hight 값) 을 주는 것이 맞겠다.

또한 위치를 파악하기 위해 넣어주었던 

width값과 height 값중 

height 값때문에 밑에 공백이(갈색상자) 생기므로 height 값을 없애 주는 것이 좋겠다.

추가로 circles-wrapper와 마찬가지로,

margin : 0 auto를 주어 wrapper 가 화면중앙에 배치하도록 한다.

+ 선들 위치조정 (top bottom left right 값 주어서 배치) 도 어느정도 한 모습이다.

위치확인을 하기 위해 주었던 백그라운드 색깔과,

(요소의 쌓임 순서 지정) 하는  z-index 값을 cicles-wrapper보다 아래로 지정해 준다.

.introduction-items-wrapper{
  z-index 속성 부여 x;}
.introduction-circles-wrapper {
  z-index: 2;}
.introduction-lines-wrapper {
background-color: yellow;
z-index: -1;}

---

z-index 속성

 

참고 사이트

[CSS] z-index (요소의 쌓임 순서 지정)

Next To do 

원 공백 사이의 선을 정리해보도록 하자!

현재 상황                     |                                  목표사진