React | 본Zook으로 복습 Part 3

이번엔 사진에 마우스를 hover하면 MY MENU라는 박스가 뜨게 구현해봤다.

css로는 구현하기 쉬웠는데 nesting이 다 되어있으니깐 너무 헷갈렸다.. hover를 해야하는건 .zookImg면 .zookImg밖에 :hover를 해야하는건가... 폭풍검색이후에 결국 방법을 찾아냈다 ㅋㅋ 이미지에 마우스를 올리면 이미지의 child element인 myMenu가 보이게 하면 되는데 되고 나니 오~ 별거 아닌데? 라는 생각이 들었다. hover를 검색하다가 많은 hover 효과들이 있는걸 봤는데 나중에 정리해놓으면 유용하게 쓸수있을것 같다.

.zookImg{ //중요한 코드 빼곤 다 지움 주의
	.myMenu { 
      	visibility: hidden;
    	}

    	&:hover {
      		.myMenu {
        	visibility: visible;
      		}
    	}
  } 

그리고 이거 구현할때 div박스안에 글자 MY MENU를 가로세로 가운데 정렬을 하고 싶었는데 text-align: center를 쓰면 가로 가운데 정렬만 가능하고 세로로는 안됐어서...세로로 하는 방법을 찾았지만 결국 padding을 주는걸로...

nav bar hover 구현하는건 쉬웠다. 비교적 뚝딱!
아직 div박스안에 텍스트를 넣었을때 조정하는게 헷갈린다.... 많이 해보다보면 괜찮아질꺼라고 믿고...
이번에는 이런식으로 구현해봤다.

.introPhoto {
  position: relative;
  background-image: url("https://cdn.bonif.co.kr/cmdt/BF102_pic_RdqEpkMX.jpg");
  background-position: center;
  background-size: cover;
  width: 1000px;
  height: 400px;

  .introPhotoText {
    position: absolute;
    bottom: 70px;
    width: 100%;
    text-align: center;
    font-size: 40px;
    color: white;
  }
}

깔끔하게 가운데에 딱 가있게 만들고 싶은데 ㅠㅠ width: 100%로 하지않는이상 꿈쩍도 안하는... 이게 최선일건가 싶으면서도 분명 더 좋은 방법이 저 구글 너머에 있을꺼를 알기에,,,, 검색 더 해봐야겠다. 일단 오늘은 여기까지 하고 내일은 Main Nav Bar부터 시작해야지.