미디어쿼리 (2)

미디어쿼리 실습

<meta charset="utf-8">

<meta name="viewprot" content="width=device-width, initial-scale=1.0">

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

<!-- 모바일용 css 파일 연결 -->
<link rel="stylesheet" type="text/css" href="css/mobile.css">

<!-- style태그 사용하여 mediaquery 적용 -->
<!--
<style media="(min-width: 300px) and (max-width: 700px)">
    body {
        background-color: red;
    }
</style>
-->

<!-- menu 버튼 pc버전 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>



<!-- helbak.com 메뉴 pc버전 1줄-고정, 모바일 버전 2줄-비고정 -->

<!-- 3차원 -->
 
<header class="intro">
    <h1></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 worldHello world</h1>
    <h1>Hello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello world</h1>
    <h1>Hello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello world</h1>
    <h1>Hello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello world</h1>
    <h1>Hello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello world</h1>
</main>



<!-- bootstrap Portfolio 파트 콘텐츠 PC버전, 모바일버전 -->

<!-- PC버전(3x2) -->

<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>

학습시 어려웠던 점

강의를 멈춰가면서 따라함에도 불구하고 출력이 제대로 되지 않을 때가 있었습니다.
분명 오탈자가 있거나 실수가 없었던 것 같은데 오류를 찾지 못했습니다.

해결방법은 기존의 sublinetext를 지우고 처음부터 새로 시작했습니다. 오류를 고치지 않고 그냥 넘어가는 식으로 해봤더니 다른 예제에서도 오류가 생겨서 저방법이 제일 확실했습니다.

학습소감

오늘 날씨도 갑자기 무더워지고 출력값도 잘 나오지 않아서 개인적으로는 조금 힘들었던 하루였던것 같습니다. 오늘 일부 조금 미흡한 부분은 추후 복습때 다시 한번 찬찬히 복기하겠습니다!