⏺학습한 내용🕵️‍♂️

⭕ CSS (layout) 강의내용

✅ 메뉴창 실습

<nav class="menu">
	<ul>
		<li>
			<a href="index.html">메뉴 버튼</a>
		</li>
		<li>
			<a href="kakao.html">카카오</a>
		</li>
		<li>
			<a href="naver.html">네이버</a>
		</li>
	</ul>	
</nav>

.menu ul {overflow: hidden;}
.menu li {display: inline-block;
          float:  left;}

block간의 공백이 있기 때문에 display는 삭제 -> float으로 변경

float 의 부모로 overflow:hidden을 적용해서 부모의 높이값을 변경할 수 있다.

---

🔷 button 안의 text를 x축 정렬한 후, y축 정렬하는 2가지 방법

1. 버튼의 높이값이 존재했을 때, 글자 간 위아래 간격에 영향을 미치는 line-height 속성값에 동일한 값을 넣어준다 (pont에 따라 미묘하게 차이가 있다)

2. button의 높이값이 없는 경우, padding-top / padding-bottom 으로 동일한 공백을 준다.

---

🔷 button의 글자 이외공백에 커서를 둬도 활성화가 되게 하기

block요소를 주고 a tag기준으로 설정을 다시 해준다.

---

🔷 layout 정렬

.kakao-lists li a {
	display: block;
	padding-left: 25px;
}
.kakao-lists li img,
.kakao-lists li .kakao-info{
	vertical-align: middle;
}
.kakao-lists li img{
	border-radius: 20px;
	margin-right: 10px;
}
.kakao-lists li .kakao-info {
	display: inline-block;
}

point ! => vertical-align : middle; 설정

img => 기본적으로 display inline-block 성격을 가짐

kakao-info => display inline-block 요소로 바꿔줌

따라서 vertical-alighn:middle로 x축 정렬이 가능해짐.

🔷 CSS reference site

⏺학습내용 중 어려웠던 점🤦‍♂️

🔘 오늘은 좀 허둥지둥 했는데 저번 시간의 차원간의 특징을 아직 완벽하게 숙지를 못해서 발생하는 문제였다.

⏺해결방법🙋‍♂️

🔘 차원간의 여러가지 특성 조합을 통해 나오는 결과와 정렬과정에서의 특성을 빠르게 익히자

⏺학습소감🙇‍♂️

🔘 요즘 아침에 배탈때문에 고생중인데 역시 공부는 컨디션 조절도 중요한 것 같다,,다들 잘 먹고 잘 자고 운동도 하면서 공부하시길,,,