💻 학습 내용

💛 pc버전 x축 정렬, 모바일 버전 y축 정렬 되는 메뉴버튼 만들기

.media-menu{
	list-style: none;

	margin: 0;
	padding: 0;

	display: flex;
	justify-content: space-between;
	align-items: center;

	width: 700px;
	background-color: pink;
}

.media-menu a{
	text-decoration: none;
	color: black;
}

.media-menu li {
	width: 150px;
	background-color: yellow;
	border: solid 5px red;

	padding: 5px 15px;
	text-align: center;
}

display : flex ;
: 무조건 1행 수평으로 정렬
justify-content : space-between;
:시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬
align-items
:축이 크로스 축이면 사용가능함

.intro{
	display: flex;
	position: fixed;

	width: 100%;
	height: 80px;
	background-color: #ffffff;
}

.intro h1{
	margin: 0;
	padding: 0;
	width: 50%;
	height: 80px;
	background-color: black;
}

.intro nav{
	width: 50%;
	height: 80px;
	background-color: yellow;
}

.intro nav ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.intro nav ul li{
	width: 33.33%;
	height: 80px;
}

.intro nav ul {
	display: flex;
}


.intro nav ul li:nth-child(1){
	background-color: blue;
}

.intro nav ul li:nth-child(2){
	background-color: dimgray;
}

.intro nav ul li:nth-child(3){
	background-color: green;
}

display:flex;
:박스 모델이 플렉스가 되면 플렉서블하게 요소를 배치할 수 있음
nth-child(n)
:부모의 n번째 위치에 있는 자식을 선택하는 가상선택자

main{
	width: 100%;
	height: 20000px;
	background-color: gold;

	padding-top: 80px;
}


@media (min-width: 320px) and (max-width: 767px){
	.intro{
		position: static;
		flex-direction: column;
		height: 160px;
	}

	.intro h1{
		width: 100%;
	}

	.intro nav{
		width: 100%;
	}
}
/*
.container{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	width: 1140px;
	margin: 0 auto;
	background-color: yellowgreen;
}

flex-direction: column;
: 요소들이 세로방향으로 정렬
flex-wrap: wrap;
: 플렉스 항목을 한줄 또는 여러줄 배치되는데 wrap은 자동으로 여러행에 걸쳐 배치되게 함

공백을 없애려면 vertical-align : middle; 작성해줘야함

💛 미디어쿼리 작성 방법

1. css파일에 @media (min-width:) and (max-width:)를 pc,모바일 한번에 입력하기
2. 모바일 버전용을 새 파일로 만들어 사용 mobile.css만든 후 @media(min-width:) and (max-width:) 작성
3. <style media ="(min-width:300px) and (max-width:700px)"
   스타일 태그에 media값을 입력

📝 마무리

미디어쿼리를 활용하여 메뉴버튼을 pc버전과 모바일 버전 둘다 만드는 연습을 했다.
flex 개념이 헷갈려 인터넷으로 서치하며 제대로 된 개념을 잡아나갔다. display:flex는 큰 덩어리들을 block처럼 수평으로 쌓을 때 사용되는 속성이다.

또 코드 복습을 하는데 main태그에서 css설정이 되지 않아 오탈자가 있는지 처음부터 끝까지 검수하였는데 오탈자가 없어서 당황했다.
다시 살펴보니 .main으로 class를 호출하는 형식으로 css에 작성해서 css값이 적용되지 않은 거였다. class를 호출할 때만 . 을 쓰도록 주의를 해야겠다.

미디어 쿼리를 작성하는 방법은 총 3가지 방법이 있는데 선생님께서 우리는 1번과 2번 방법만 기억하고 있으면 된다고 하셨고, 코드가 길어지면 유지보수가 힘들어지기 때문에 css파일을 pc와 모바일 두개로 나눠서 관리하는게 더 효율적이라고 말씀하셨다.

이미지 크기를 width크기에 꼭 맞추고 싶으면 img width=100%로 설정하면
꽉 맞게 설정이 된다.