21.2.17
<배운것 활용하여 color hunt 컴포넌트 만들기>
- 하다가 막혀서 고민한 흔적과 몰랐던 개념 정리
- 두 div 배경으로 겹친 후 정 가운데 정렬시키기
div{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
- 고민 : 원래 두 클래스로 나눠서 position 으로 해결하려 했음
- 해결 : div요소를 아예 묶어서 병합하여 정렬한다 생각. transform 개념 이용.
- span 값(색상 칠해진 박스 안) 상속하여 함께 정렬하기
- 고민 : position 값으로 위치 조정. 그러나 따로 움직이고 화면 크기에 따라 달리 움직임. block, inline 설정 모두 해결 방안이 아니었음.
- 해결 : span 태그를 div에 넣어서 상속시킴. 같이 묶어 가는 개념으로 해결.
- mouseover와 hover 통해 마우스 올렸을 때만 보이게 하기
span{
display: none;
color: #709fb0;
}
.colorBox span:hover{
border : 1px solid #709fb0;
background-color: #709fb0;
color: white;
opacity: 100%;
}
고민 : 컬러 박스 안에 있는 span 위에 마우스 커서를 올렸을 때 하얀 글씨가 나왔어야 함. 먼저 정렬이 완료 되었으므로 hover 이용에 대한 공부를 함.
해결 : 색상 반전과 opacity 값 이용해서 해결.
- 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 이용한 조정
Author And Source
이 문제에 관하여(21.2.17), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sinichy7/21.2.17저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)