7/12 미디어쿼리 실습

💡 학습한 내용

✅ 미디어쿼리실습

✔️ Menu 만들기

💨 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 pc 작업

.media-menu {
list-style: none;
margin: 0;
padding: 0;
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;
}

💨 css media 작업

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

✔️ 덴마크 사이트 상단영역 레이아웃 작업

💨 HTML

    <3차원>
    <header class="intro">
        <h1></h1>
        <nav>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </nav>
    </header>
    
    <2차원>
    <main role(main 태그는 익스플로어에서 지원하지 않으므로 role이라는 속성값을 넣어줘야한다.)="main">
    <h1>hello world hello worldhello worldhello worldhello worldhello worldhello         worldhello worldhello worldhello worldhello worldhello worldhello         worldhello worldhello world </h1>
    </main>

💨 CSS

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

✔️ bootstrap 중간부분 pc/mobile 만들기

💨 HTML

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

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

✔️ 미디어쿼리 적용하는 방법

①

② 새로운 파일(mobile.css)을 만든 다음 link로 연결을 한다.
→ pc버전과 mobile버전을 따로 만든다.

③ <style> 사용

❌ 학습한 내용 중 어려웠던 점

이때까지 배운 것들을 총집합해서 실습을 한거라서 많이 헷갈리는 부분이 있었다. 그리고 중간부분에 멘토님과 똑같이 타이핑을 한 것 같은데 결과적인 부분에서 달라서 다시 강의를 들으면서 비교해야봐야 할 것 같다.

⭕️ 해결방법

중간에 결과가 다른부분을 다시 되짚어 봐야할 것 같으며 미디어쿼리 부분에서 pc 버전과 mobile 버전을 같이 만들면 헷갈리는 부분이 많을 것 같아 새로운 모바일 파일을 만들어서 작업하는 것이 좋을 것 같다.

🙋‍♀️학습소감

이때까지 배운 속성만으로도 다양한 웹페이지를 만들 수 있을 것 같다. 배운 내용을 토대로 실습을 계속 해서 나의 것으로 만들어야 할 것 같다.