이미지 가운데 정렬

• 이미지를 margin: auto; 를 이용해서 가운데 정렬할 때, 이미지는 inline 요소이기 때문에 display: block; 을 이용해서 블락 요소로 변경 후 사용하면 된다.

버튼 여러개 가운데 정렬

button {
text-align: center;
}

hover

• hover은 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 뜻한다.
• 쉽게는 사용자의 커서(마우스의 포인터)가 요소에 올라가 있을 때 적용된다.

.colorBox:hover .colorName {
  opacity: 0;
}

• 요소가 hover를 적용한 요소의 안에 있을 때는 한 칸 띄워주고 CSS를 적용하면 된다.

.colorBox:hover .colorName {
  opacity: 1;
}

.colorName {
  opacity:0;
}

• opacity를 이용하여 마우스를 요소에 올리느냐 올리지 않느냐에 따라 보이지 않게도 할 수 있고 보이게 할 수도 있다.

flex

<div class="container">
	<div class="item">item1</div>
	<div class="item">item2</div>
	<div class="item">item3</div>
</div>

• 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부른다.
• 자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부른다.
• 컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것이다.

flex 속성

• flex 속성은 크게 컨테이너에 적용하는 속성과 아이템에 적용하는 속성으로 나뉜다.

컨테이너 속성

.container {
	display: flex;
	/* display: inline-flex; */
}

• 컨테이너에 display: flex; 를 적용해준다.

아이템 속성

<참고>

• https://velog.io/@aerirang647/hoverhover-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%95%8C%EC%9E%90
• https://m.blog.naver.com/parangbee/221739061995
• https://studiomeal.com/archives/197