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 버전을 같이 만들면 헷갈리는 부분이 많을 것 같아 새로운 모바일 파일을 만들어서 작업하는 것이 좋을 것 같다.
🙋♀️학습소감
이때까지 배운 속성만으로도 다양한 웹페이지를 만들 수 있을 것 같다. 배운 내용을 토대로 실습을 계속 해서 나의 것으로 만들어야 할 것 같다.
Author And Source
이 문제에 관하여(7/12 미디어쿼리 실습), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@youngeun998/미디어쿼리-실습저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)