학습내용

HTML

    <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;
    
    display: flex;
    justiry-content: space-between;
    align-items: conter;

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

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

• flexbox.help

HTML

<!-- 3차원 -->
<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 </h1>

</main>

CSS

.intro {
	display: flex;
    
	width: 100%;
    height: 80px;
    background-color: #ffffff;
}

.intro nav 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: 88px;
}

@media (min-width: 320px) and (max-width: 767px) {
	.intro {
    	position: static;
    	flex-direction: column;
    	height: 160px;
    }
    
    .intro h1 {
    	height: 100px;
    }
    
    .intro nav{
    	width: 100px;
    }
    
    main {
    	padding-top: 0;
}

• display로 flex 적용, x,y로 완성

• 헤더와 메인의 공간이 헤더 영역만큼 겹치게 됨

• 공간마다 높이값을 적용해서 연습

HTML

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

CSS

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

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

.column {
	width: 355px;
    back-ground-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: 10px;
    }
    
@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;
    }    
}

HTML

<!DOCUTYPE html>
<html>
<head>
	<meta charset="utf-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/mobile.css">
    
    <style media="(min-width: 300px) and (max-width: 700px)">
    
    	body {
        	background-color: red;
        }
     
     </style>
     
</head>
<body>

• 코드가 길어질 때, pc버전과 mobile 버전 따로 만듦

• 유지보수 상황에 맞춰 파일을 분할할 것인지, 하나의 파일안에 몰아서 작업할 것인지 결정

• style 코드 안쪽에 media를 넣어서 모바일 버전에 대응하는 방식

어려운점

• 미디어쿼리 활용법에 대한 지식이 부족하다고 느낌

• 모바일 페이지에서 일정 크기가 넘으면 PC화면 전환에 대한 기술적이해 부족

• 3가지 미디어쿼리 사용 법 중에 어떤것이 가장효율적인지 고민

해결방법

• 영상도 좋지만 따로 기능에 대해 알 수 있었으면 좋겠다는 생각이 들어 찾아봄

• 상황에 따라 다르겠으나 최대한 줄일 수 있는 것이 효율적

학습소감

• 반복을 제외하고 구체적으로 홈페이지를 만들어 보는 작업을 해보는 것이 필요하다고 생각함

• 쉽게 느껴지면 좋겠지만 힘들기 때문에 더 열심히 복습해봐야겠다고 생각함