반응형 디자인과 미디어 쿼리 소개
강의
소스코드
미디어 쿼리를 이용해서 반응형 디자인 구현하기
강의
소스코드
댓글
-
조금씩 알아가는 기분이라 너무 좋습니다. 매번 강의 볼때마다 감사해요 -
재밌어영
-
Mediaquery가 반응형 디자인의 조건문 같은 개념이군요!! 굉장히 현대적인 코딩이군요!!
-
border: transparent 추가 해보세여
-
이고잉님 코드 그대로 해도 크롬 웹페이지 우측상단에 나타나는 픽셀 너비(A)가 기준이 되지는 않네요. 우측 마우스 클릭하여 검사 항목에서 열리는 창에서 확인할 수 있는 픽셀(B) 기준이네요.(이게 진짜 저희가 보는 창의 사이즈로 보이는데요.) 크롬 브라우저 너비 마우스로 조정할때 생기는(우측 상단에) 이 픽셀의 정체는 무엇인지 정말 모르겠습니다...
A가 1000px일때, B는 800px으로 나타납니다. 아시는 분 있으면 알려주세요! -
도움이 되었습니다 :) -
atom에서는 (파일명).html을 만드신후에 html을 치시고 tab을 누르시면 나와요
-
감사합니다!
-
html snippets라는 것이 도움이 되실것 같은데 찾아서 에디터에 적용시켜보세요! -
기본 html 코드가 뚞딲 하고 나타나는 마법은 어떻게 해야하는건가요? 알려주세요!
-
잘 봤습니다^^ 감사합니다.
-
이 미디어 쿼리만 잘 활용한다면
기기 별로 따로 웹 작업을 할 필요가 없습니다.
CSS로 제어를 하기 때문이죠.
스마트폰에서 볼 때, 태블릿으로 볼 때, PC에서 볼 때 옵션을 다르게 줘서
유동적으로 활용할 수 있는게 반응형 웹입니다. -
다른페이지도 똑같이 작업하니 제일 먼저 작업한 페이지만 미디어쿼리가 지정 픽셀에서 작동 안하고
다른페이지는 지정 픽셀에서 정상 작동 합니다.;; -
900px 기준으로 하면 900px에서 작동안되고 800px 언저리에서 미디어쿼리가 적용되네요
-
아래처럼 했는데 그리드 선이 계속 보이는데 왜안되는지 아시는분 계신가요.. ?? ㅠㅠ
<style>
body{
margin:0;
}
a {
color:black;
text-decoration: none;
}
h1 {
font-size:45px;
text-align:center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
ol{
border-right:1px solid gray;
width:100px;
margin:0;
padding:20px;
}
#grid{
display:grid;
grid-template-columns: 150px 1fr
}
#grid ol{
padding-left:33px;
}
#grid #article{
padding-left:25px;
padding-right: 30px;
}
}
@media (max-width:800px){
#grid{
display: block;
}
ol{
border-right:none;
}
h1 {
border-bottom:none;
}
}
</style> -
감사합네다
-
@media(max-width:800px){
#grid{
display : block;
}
} -
반응형 재미있게 수강했습니다~
슬슬 뇌에 과부하 걸리려 하지만 계속 써먹어봐야겠어요 -
오늘 다시 해보니까 되네요~
-
@media(max-width:800px){
#grid{
display:block;
}
라고 했음에도 1000px을 기준으로 미디어쿼리가 적용됩니다 ㅜㅜ 왜그럴까요? -
180209 감사합니다! -
감사합니다^^!!!
-
디자인 단계에서 반응형까지 생각하게 된다면 시간이 어마어마하게 걸리겠어요!!
그래도 PC가 아닌 다른 디바이스를 사용한다고 했을 때 사용자의 편리성을 생각한다면
꼭 적용해야하는 기술인 것 같아요. -
반응형 웹에 대해 말만 많이들었지 막상 이렇게 해보니 너무 재밌습니다!
항상 감사합니다! -
180224 완료!
반응형웹을 만들게 되다니 너무 감격스럽습니돠! 감사합니다! -
감사합니다. -
재밌어요!
-
감사합니다
-
18-01-14 1일차 - 8번째 강의
수강완료!
항상 반응형웹 말만 들었고, 템플릿을 가져다가 쓸 생각만 해왔습니다.
템플릿을 가져오면 CSS부분이 너무 복잡해서 포기하곤 했는데....
mediaquery라는 것을 이용하는 것이었군요. ㅎ
너무 알기 쉽게 설명해 주셔서 감사합니다. -
많이 배우고갑니다 감사해요^ ^
-
굉장하네요. 고맙습니다 ^^ -
감사합니다.
-
PC에서 동작이 잘 됩니다.
스마트폰에서도 효과를 볼 수 없을까요? -
감사합니다~!^_^ -
저는 미디어 쿼리에서
ol{ border-right: none; }으로 하면 선이 안 없어지고,
#grid ol{ border-right: none; } 이렇게 앞에 #grid를 붙여야 선이 없어지네요.
id가 클래스나 태그보다 우선순위에 있어서 그런건가요? 에디터는 아톰 쓰고 있습니다. 이고잉님과 버전이 달라서 그런걸까요? 물론 h1태그는 그냥 선이 없어집니다. -
아 해결되었습니다. 감사합니다^^
-
저는 아톰을 쓸때 자동추천기능이랑 태크 색도 안바뀌는데 설정하는 법이 따로 있나요~?ㅠㅠ
-
제 남편 웹사이트 보니 반응형 미디어로 안되어 있네요.
음~~ 열공해서 바꿔 주어야 겠네요. -
느낌이 다른언어의 조건문 같은 느낌도 드네요.
-
와... -
재밌어요! 미디어 쿼리 기억해두겠습니다
-
신기해요^^ -
와우 그렇군요.
저는 그냥 알아서 웹브라우저가 다~ 해주는 줄 알았는데...
생각보다 귀찮은 작업이네요(그냥 라이브러리 써야지 ㅋ)
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
