반응형 디자인과 미디어 쿼리 소개
강의
소스코드
미디어 쿼리를 이용해서 반응형 디자인 구현하기
강의
소스코드
댓글
-
완료 -
완료! -
@media{ div{ } }
}빠졌어요
@media (min-width:700px) {
div {
display:none;
}
} -
강의에 나온 아래 구문이 왜 동작이 안될까요 ㅠㅠ?
max로 고치면 동작합니다...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
border:5px solid green;
font-size:60px;
}
@media (min-width:700px) {
div {
display:none;
}
</style>
</head>
<body>
<div>
Reponsive
</div>
</body>
</html> -
190504 감사합니다. -
완료! -
저도 soul님과 같이 압니다.
그래서
<meta name="viewport" content="width=device-width, initial-scale=1">
이 코드를 넣어줘야 하는걸로 압니다. -
완료요~~^^
-
완료!
-
완료~~!
-
감사합니다.
-
감사합니다.
-
웹 개발자들은 모니터, 스마트폰, 미래의 가상현실과 같이 변화하고 발전하는 화면의 형태에 각각 최적화된 웹페이지를 만들고자 합니다. 이에 사용되는 기술이 미디어 쿼리입니다.
미디어 쿼리는 <style> 태그 내에 @media( ) 코드를 통해 적용할수 있습니다. 예로 화면크기가 800px 보다 작을 경우를 가정하려면 @media(max-width:800), 화면 크기가 1500px보다 클 때부터를 가정하려면 @media(min-width=1501) 과 같이 ( ) 안에 조건을 입력하는 방식입니다.
그 후 화면 크기에 따라 변화시키고 싶은 태그, 혹은 그리드는 <style> 태그 내에 있는 코드를 복사해 원하는대로 편집하면 간단합니다. -
왜 저는 사파리에서는 정상으로 작동 되는데 크롬에서는 밑으로 떨궈지지가 않고 왼편 ol쪽이 글씨만 작아지는 지 모르겠어요.
댓글에 사진을 첨부하고 싶은데 사진은 못 올리는군요. -
완료!
-
완료
-
css 이렇게 쉽게 알려주시니 너무 감사해요!
-
미디어쿼리가 안 되네요.
아무리 봐도 틀린 부분이 없는데...
좀 봐주세요^^
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>web-index.html</title>
<style>
a {
color:black;
text-decoration:none;
}
h1 {
font-size:45px;
text-align:center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
ul {
border-right:1px solid gray;
width:70px;
margin:0;
padding:20px;
}
#grid {
display: grid;
grid-template-columns: 140px 1fr;
}
#grid ul {
padding-left:32px;
}
#grid #article {
padding-left:15px;
}
@media (max-width: 800px){
#grid {
display: block;
}
ul {
border-right:none;
}
h1 {
border-bottom:none;
}
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ul>
<li><a href="1.html">html</a></li>
<li><a href="2.html">css</a></li>
<li><a href="3.html">javascript</a></li>
</ul>
<div id="article">
<h2>web</h2>
<p>
The World Wide Web, commonly known as the WWW and the Web, is an information space where documents and other web resources are identified by Uniform Resource Locators (URLs, such as https://www.example.com/), which may be interlinked by hypertext, and are accessible via the Internet.[1] The resources of the WWW may be accessed by users via a software application called a web browser.</p>
<p>
Web resources may be any type of downloadable media, but web pages are hypertext media which have been formatted in Hypertext Markup Language (HTML).[2] Such formatting allows for embedded hyperlinks which contain URLs and permit users to easily navigate to other web resources. In addition to text, web pages may contain images, video, audio, and software components that are rendered in the user's web browser as coherent pages of multimedia content.<a href="http://naver.com">web</a> is important.
</p>
</div>
</div>
</body>
</html>
추가로 글 올립니다.
크롬을 쓰고 있는데... 댓글보고 할 건 다해봤습니다.
아무래도 코딩문제라기보다는 다른문제인것 같아요! -
완료! -
감사합니다.^^ 잘배우고 갑니다.
-
2019-02-16 완료
-
감사합니다 -
완료:)
-
감사합니당
-
요즘 스마트폰 해상도는 가로 사이즈가 1000px은 가볍게 넘어서 아마 동작을 안 하는 것 같네요.
-
용어는 어디선가 많이 들어서 익숙했는데 반응형 디자인을 구현 가능하게 하는 명령이라는 걸 처음 알았네요! 이거 아주 재밌네요 ㅎㅎ
-
완료
-
완료
-
저는 왜 @media 아래에 #grid를 넣으면 태그가 안걸릴까요?
@media {max-width: 700px}{
#grid {
display: block;
}
}
여기서 #grid의 색깔이 회색으로 변해버립니다.(아톰에서요.)
아 괄호를 잘못쳤네요{} > () 로 수정 -
완료!
-
좋은 강의 감사합니다!
-
감사합니다! 사이트 넓이에 따라 변화하는 코드를 알게 되서 즐겁습니다!
다만 저는 이게 스마트폰에도 적용될 거라고 생각하고, 스마트폰은 화면 넓이가 적어도 800px보다는 작을 거라고 생각해서 미디어쿼리를 이용해 수정한 작은 화면용 사이트가 나올줄 알았는데 스마트폰에는 적용이 안돼요ㅠㅠ 왜 이런 걸까요? -
완료했습니다. ^^!
-
반응형 디자인 - 화면의 특성에 따라 웹페이지의 각 요소들이 반응해서 동작하도록 구현하는것
미디어쿼리 - CSS에서 반응형 디자인을 구현할때 사용하는것
@midia(어떠한조건) {
selecter{
어떠한조건에서 작동하게 할것(declaration)
}
} -
감사합니다:) -
완료 -
완료 -
감사합니다. -
싱기방기 !
-
잘봤어요~
-
잘들었습니다 -
감사합니다
-
감사합니다.
-
감사합니다.
-
최소한으로 배워서 최대한으로 써먹을수 있는 강의 감사합니다. 알아야할것이 너무 많아서 닥치는대로 배우다가 아무것도 못써먹는 느낌이었거든요. 모든강의 정주행예정입니다.
-
감사합니다.
-
감사해요!
-
신기하네요!
-
완료
-
최고입니다
잘만작동합니다
그대로해도좋을거같아요
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
