반응형 디자인과 미디어 쿼리 소개
강의
소스코드
미디어 쿼리를 이용해서 반응형 디자인 구현하기
강의
소스코드
댓글
-
2021.09.21 -
border 설정을 하면 글씨를 감싸는 테두리 말고 위에 한줄이 더 그어지는 현상이 발생해서 검사를 해봤더니 border# screen color temperature over 이렇게 뜨는데 해결 방법이 있을까요??
-
2021.09.14 AM1:32 -
20210831
-
20210830 슬슬 머리가 어지러워ㅠ
-
20210821
-
감사합니다 -
화이팅!!
-
2021.8.3
-
2021.08.02 완료 -
완료
-
완료
-
210722 성공
감사합니다~ -
완료
-
감사합니다~
-
- mediaquery : 조건(ex> 화면 크기)에 맞춰 디자인을 가변 적용
- @media(조건) { ... } -
완료!
-
스스로 응용하는 게 시간은 걸리지만 너무 재밌어요!!
-
2021 7월 6일 완료
-
20210706 -
21.06.30 시청 완료
-
21.6.27 -
2021.06.23.(수) 진행중
-
21.06.21 이번시간이 제일 재미있었네요
-
잘봣습니당^^
-
잘 봤습니다~
-
2021 05 22 -
2021.05.18
-
210518 ok
-
2021.05.14
-
210514
-
K01_20210511
-
2021/05/08
-
@media(조건){ 실행할 문장 } -
저도 크롬을 사용하는데 max-width:800px를 설정하니까 1,000px일때 줄어들더라구요. 왜그런가해서 찾아봤더니 글꼴크기가 125%로 되있어서 그런거였어요. 100%로 설정하니까 800px일때 줄어들더라구요. 한번 확인해보세요.
-
20210429 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WEB1 - CSS</title>
<style>
body {
margin: 0px;
}
a {
color: black;
text-decoration: none;
}
h1 {
font-size: 150px;
margin: 0px;
text-align: center;
border-bottom: 1px solid gray;
padding: 20px;
}
#grid ol {
border-right: 1px solid gray;
width: 120px;
margin: 0px;
padding: 20px;
padding-left: 40px;
}
#grid {
display: grid;
grid-template-columns: 200px 1fr;
}
#article {
padding-left: 25px;
}
@media(max-width: 800px) {
@@@@@@@@@@@@media 적용이 안돼요
@만 흰색이에요 media는 보라색인데...
#grid {
display: block;
}
ol {
border-right: none;
}
h1 {
border-bottom: none;
}
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<div>
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
</div>
<!--
<ol>
<h1><a href="index.html"><font color="red">WEB</font></a></h1>
<li><a href="1.html"><font color="red">HTML</font></a></li>
<li><a href="2.html"><font color="red">CSS</font></a></li>
<li><a href="3.html"><font color="red">JavaScript</font></a></li>
</ol>
-->
<div id="article">
<h2 style="color:orange; font-size:50px;">WHAT is CSS ?</h2>
<p>
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files<br>
<img src="css_img.jpg" width="350px">
</p>
<p>
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
</p>
<p>
The style definitions are normally saved in external .css files.<br>
With an external stylesheet file, you can change the look of an entire website by changing just one file!
</p>
</div>
</div>
</body>
</html> -
2차 - 21.04.24
-
2021.04.22 완료했습니다.
@media (미디어쿼리를 이용해서 사이트를 꾸몄다) -
2021.04.12 완료
-
4/12 done
-
완료
-
감사합니다
-
4/4 완료
-
완료
-
2021.03.26 완료
-
2021-03-25
-
완료
-
완료
-
재밌어유
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
