강의

• 1:01:41부터

1. 수업

1. 메뉴

• x축 정렬에서 모바일로 갈때 y축 정렬로 바꾸기

• 우선 메뉴

  <ul class="media-menu">
  	<li><a href="#">menu 1</a></li>
          <li><a href="#">menu 2</a></li>
          <li><a href="#">menu 3</a></li>
  </ul>

• CSS

  .media-menu{
  list-style: none;
  margin: 0;
  padding: 0;
  width: 700px;
  background-color: black;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: stretch;}

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

  .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;
     width: 190px;
  	 }
  	.media-menu li{
  		margin-bottom: 10px;
  	 }
  	 .media-menu li:last-child{
  		margin-bottom: 0;
  	 }}

2. helbak

• 가장위에부분 따라만들어보기

  <header class="intro">
  	<h1></h1>
  <nav>
  	<ul>
  		<li></li>
  		<li></li>
  		<li></li>
  	</ul>
  </nav>
  </header>
  <!-- 2차원 -->
  <main role="main">
  <h1>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World 	</h1>	
  </main>

• CSS

  /* PC */
  	.intro {
  	display: flex;
  	position: fixed;
  	width: 100%;
  	height: 80px;
  	background-color: #ffffff;}

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

  .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.3333333333333333333333333333333333333333333%;
  	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;}

  • 기본적인 PC부분
  • flex를 활용해서 스크롤내려도 딸려오게 설정
  • nth-child는 각각 색지정을 위해서

• 모바일부분 미디어쿼리

  @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;
  	}}

  • 모바일부분에선 위에 메뉴바가 고정되어있어야하니 다시 static으로 바꿔주고 column을 써서 위아래로 표현되게한다.
    -main겹쳐졌던 부분이 static으로 해결됬으니 다시 0으로 바꿔줌

3. bootstrap

• 포트폴리오 부분 따라해보기

  <div class="container">
  	<div class="column">
  		<img src="https://via.placeholder.com/250x150">
  		<div class="image-info">
  			<h2>Title</h2>
  		</div>
  	</div>
  	<div class="column">
  		<img src="https://via.placeholder.com/250x150">
  		<div class="image-info">
  			<h2>Title</h2>
  		</div>
  	</div>
  	<div class="column">
  		<img src="https://via.placeholder.com/250x150">
  		<div class="image-info">
  			<h2>Title</h2>
  		</div>
  	</div>
  	<div class="column">
  		<img src="https://via.placeholder.com/250x150">
  		<div class="image-info">
  			<h2>Title</h2>
  		</div>
  	</div>
  	<div class="column">
  		<img src="https://via.placeholder.com/250x150">
  		<div class="image-info">
  			<h2>Title</h2>
  		</div>
  	</div>
  	<div class="column">
  		<img src="https://via.placeholder.com/250x150">
  		<div class="image-info">
  			<h2>Title</h2>
  		</div>
  	</div>
  </div>

• PC부분 CSS

  .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;}

  • 1140px 안에서 자동으로 줄을 바꾸기위해 wrap사용
  • 공간을 주기위해 space-between
  • 이미지아래 작은 빈칸을 없애기위해 middle
  • h2는 기본적인 margin값이 있으니 0

• 태블릿

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

  • 위에서 햇던 4,5,6번칸에 margin잡아놓은게 이상하니까
    다시설정해준다.

• 모바일

  @media (min-width: 320px) and (max-width: 539px){
  .container{
  	box-sizing: border-box;
  	width: 100%;
  padding: 0 20px;
  	}
  .column {
  	width: 100%;
  }
  .column:nth-child(4),
  .column:nth-child(5) {
  margin-bottom: 10px;
  }}

  • box-sizing와 padding으로 좌우 여백을 만들어줌

4. 미디어쿼리를 적용하는 3가지방법

• 1. CSS파일안에 media

  • ex

    @media (min-width: 320px) and (max-width: 539px){}

• 2. 모바일용 CSS를 따로만들기

  • 말그대로 그냥 css파일을 하나더만들어서 html파일에 link를 하나 더걸어버린다

    <link rel="stylesheet" type="text/css" href="css/mobile.css">

• 3. style태그 사용

  • ex

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

2. 어려웠던점

• 이전에 했던것들이 점차 머릿속에서 지워지고있다.

3. 해결

• 내가 썻던 개발일지를 다시 보고
• 구글링을 다시하면서 복습

4. 소감

• 어떤 공부던 복습의 소중함을 다시 깨닫는,,
  다시 안보고 하니까 머릿속에서 까먹는다.

Git