21.2.17

<배운것 활용하여 color hunt 컴포넌트 만들기>

• 하다가 막혀서 고민한 흔적과 몰랐던 개념 정리

1. 두 div 배경으로 겹친 후 정 가운데 정렬시키기

div{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

• 고민 : 원래 두 클래스로 나눠서 position 으로 해결하려 했음
• 해결 : div요소를 아예 묶어서 병합하여 정렬한다 생각. transform 개념 이용.

2. span 값(색상 칠해진 박스 안) 상속하여 함께 정렬하기

• 고민 : position 값으로 위치 조정. 그러나 따로 움직이고 화면 크기에 따라 달리 움직임. block, inline 설정 모두 해결 방안이 아니었음.
• 해결 : span 태그를 div에 넣어서 상속시킴. 같이 묶어 가는 개념으로 해결.

3. mouseover와 hover 통해 마우스 올렸을 때만 보이게 하기

span{
  display: none;
  color:  #709fb0;

}

.colorBox span:hover{
  border : 1px solid #709fb0;
  background-color: #709fb0;
  color: white;
  opacity: 100%;

}

고민 : 컬러 박스 안에 있는 span 위에 마우스 커서를 올렸을 때 하얀 글씨가 나왔어야 함. 먼저 정렬이 완료 되었으므로 hover 이용에 대한 공부를 함.
해결 : 색상 반전과 opacity 값 이용해서 해결.

3. flex 속성을 사용한 button과 텍스트 간격(aside)

• 고민 : 컨테이너 없이 (공통분모) 단순히 플렉스값 저장하다 보니 자꾸 중앙에 버튼과 텍스트가 모임
• 1차 해결 : 먼저 공통의 flex 컨테이너를 큰 div class에 지정 후 간격 %로 조정
  힌트 :

.flex-container{
　width:100%;
　-webkit-display:flex;
　display:flex;
　padding-bottom:20px;
　border:1px dotted #F60;
　}

실행

.btnday{
  width: 70%;
  -webkit-display : flex;
  display: flex;
  justify-content: space-around;
}

• 문제점 : 사각형 밖으로 모두가 나가버림.
• 2차 해결 : 사각형 안 div 로 넣어서 상속시켜버림.

.btnday{
  width: 120%;
  -webkit-display : flex;
  display: flex;
  justify-content: space-around;
  margin-top : 150px;
}

• 3차 문제점 : 중앙에 위치해서 내려가질 않음. 버튼 위치는 하단
• 해결 : margin-top 이용한 조정