⏺학습한 내용🕵️‍♂️

⭕ CSS (media query) 강의내용

✅ menu button 제작 실습

🔘 pc버전에서는 X축, 모바일버전에서는 y축 정렬

☑ 크기를 3등분 할 때에는 최대한 오차를 적게, 33.3333% 설정

.intro nav ul li {
	width: 33.3333%;![]
    }

☑ 앞선 형제tag가 3차원일 경우, 뒤의 형제tag는 앞선 형제tag의 뒤로 가면서 layout 겹침 현상이 발생한다. -> padding을 활용해서 해결

  .intro nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
  .intro nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
main {
	width: 100%;
	height: 2000px;
	background-color: gold;
	padding-top: 80px;
}

☑ img태그는 기본적으로 공백을 가지고 있기 때문에 vertical align: middle;을 default 값으로 넣어준다.

.column img {
	width: 100%;
	vertical-align: middle;
}

⭕ media query 적용법

1. 하나의 css 파일에 pc / mobile 모두 작성 (2000 code 이하 권장)

2. pc / mobile 따로 css 파일 생성 ( 2000 code 이상 권장)

3. style tag 활용

<style media="(min-width: 300px) 
		and (max-width: 700px)">
	body {
		background-color: red;
}
</style>

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

🔘 비슷한 코드를 많이 짜다보니 중간중간 오탈자 찾고 어느 기능이 막힌건지 찾아나는게 시간이 좀 걸린다,,

⏺해결방법🙋‍♂️

🔘 최대한 마우스를 안 쓰고 하려고 하다 보니 겹치게 써지거나 라인이 비뚤어지는데 그와중에 다른 기능들을 많이 터득해서 이롭긴 했다,,

⏺학습소감🙇‍♂️

🔘 css 편을 오래해서 그런지 점점 익숙해져가고 있지만 아직 탄탄한 느낌은 아니다,,그래도 아직까지도 어려운 점은 없이 잘 따라가고 있고 다만 git hub 사용법을 계속 공부중인데 수업보다 어렵다..빨리 code 올리면서 열심히 관리하고 싶다,,