7월 12일 월

학습한 내용
진도와 학습한 내용을 작성, 소스파일을 실행한 결과 첨부

https://helbak.com/

https://startbootstrap.com/previews/agency

http://via.placeholder.com/250x150

https://flexbox.help/

오늘 실습할 목표물의 이미지와 목표 웹사이트 및 참고 사이트를 정리하였다.
헬백과 부트스트랩 사이트의 설계와 css 부분을 실습하였다.

미디어쿼리를 적용하는 방법 3가지
1. pc와 모바일 모두 하나의 css 파일로 작성한다. (2000코드 이하 일때 권장)
2. pc버전과 모바일 버전 css파일로 분리한다. (2000코드 이상일 경우 권장)
3. style태그를 이용하여 관리를 한다. (비추천 입문자에겐 우선 알아만 두길 권장)
스타일 태그 예시)

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

• menu 1
• menu 2
• menu 3

<!-- 3차원 -->

 <header class="intro">
	<h1>Logo</h1>
	<nav>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</nav>
</header>

<!-- 2차원 -->

<!-- <main role="main">
	<h1>Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World
	Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World</h1>
	


</main>

Title

<div class="container">

Title

Title

Title

Title

Title

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

width: 700px;
background-color: black;

}

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

.media-menu li {
width: 150px;
background-color: yellow;
border: solid 5px red;
padding: 5px 15px;
text-align: center;
}

@media (min-width: 320px) and (max-width: 767px) {
.media-menu {
flex-direction: column;
align-items: flex-start;
width: 190px;
}
.media-menu li {
margin-bottom: 10px;
}
.media-menu li:last-child {
margin-bottom: 0;
}
}

/pc/

/*.intro {
display: flex;
position: fixed;

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

}

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

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

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

.intro nav ul li {
width: 33.3333;
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: gray;
}

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

main {
width: 100%;
height: 2000px;
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%;
}
main {
	padding-top: 0;
}

}*/

/*.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;

width: 1140px;
margin: 0 auto;
background-color: pink;

}

.column {
width: 355px;
background-color: #ffffff;
border: solid 2px red;
margin-bottom: 10px;
}
.column:nth-child(4),
.column:nth-child(5),
.column:nth-child(6) {
margin-bottom: 0;
}

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

.image-info {
padding: 20px 0;
text-align: center;
}

.image-info h2 {
margin: 0;
}

@media (min-width: 540px) and (max-width: 720px) {
.container {
width: 720px;
}
.column:nth-child(4),
{
margin-bottom: 0;
}
}

@media (min-width: 320px) and (max-width: 539px) {
.container {
width: 100%;

	padding: 0 20px;
}
.column {
	width: 100%;
}

.column:nth-child(4),
.column:nth-child(5) {
	margin-bottom: 10px;
}

}

*/

학습한 내용 중 어려웠던 점 또는 해결못한 것들
flex-wrap: wrap;가 적용되지 않는다.
줄바꿈이 일어나야하는데 1줄 세워진다.

해결방법 작성

Title

학습 소감
일단 수업을 따라가는 건 아직 괜찮다.