반응형 디자인과 미디어 쿼리 소개
강의
소스코드
미디어 쿼리를 이용해서 반응형 디자인 구현하기
강의
소스코드
댓글
-
잘들었습니다 -
감사합니다
-
감사합니다.
-
감사합니다.
-
최소한으로 배워서 최대한으로 써먹을수 있는 강의 감사합니다. 알아야할것이 너무 많아서 닥치는대로 배우다가 아무것도 못써먹는 느낌이었거든요. 모든강의 정주행예정입니다.
-
감사합니다.
-
감사해요!
-
신기하네요!
-
완료
-
최고입니다
잘만작동합니다
그대로해도좋을거같아요 -
실습하다보니 스타일 태그 내에 미디어쿼리가 아래쪽에 위치해야 적용되는 것 같습니다.
스타일태그 안 제일 위에 미디어쿼리를 넣으니, 아무리해도 조건이 안걸려요 ㅜ 가장 아래에 선언된걸 바라보는지ㅠㅠ -
맥은 커맨드 누른상태로 드래그, 윈도우는 컨트롤누른상태로 여러개 드래그요
-
완료
-
사파리는 크기 확인 어떻게 하죠?
-
너무 재밌는거~~~!! 자꾸 시작하고 멈추고 반복했는데, WEBn 시리즈는 다 공부할거에요. 스스로 코드를 짜는 그날까지!! -
media query는 style 태그 안에서 제일 밑에 있어야 정상 작동 하는 거 같군요 여러분!
-
완료!감사합니다!
-
잘 봤습니다. 감사합니다
-
와 정말 신기해요 감사합니다. 새로운 기술 배워가지고 갑니다! -
마우스 커서 드래그 하는거 선택적으로 하는거 어떻게 하는거에요?
-
저는 익스플로러 11을 사용했는데 코딩을 따라 했었지만 어디가 잘못 됐는지 결과가 다르게
나왔네요... 나중에 문제를 한번 봐야 될것 같아요... -
음.. 알려주신 과제는 따라해서 해결했지만..
거기에 혼자 더 뭔가 해보려 하니 진척이.. 매우 어렵네요.. ㅠㅠ
일단 다음장 고고 -
완료
-
많은 학습과 실습 경험이 중요한 분야이지만, 이고잉님의 강의를 통해 기초를 쉽게 이해하고 학습에 대한 접근성이 다양해지고 담이 높지 않음을 느낍니다. 배움의 끝이 나눔이라는 말이 생각나네요. 항상 너무 감사드리며, 저 또한 심화학습을 통해 나눔에 기여토록 애쓰겠습니다.
-
잘봤습니다.
-
감사합니다!
-
@media (max-width:600px) 이렇게 작성했을 경우 저 같은 경우에는 작동을 안했습니다.
그래서 구글링한 결과
@media only screen and (max-width:600px) 이렇게 작성했더니 잘 동작하네요~
반응형이 잘 안되시는 분들 한번 해보세요;; -
이번엔 좀 잘 못했습니다 ㅠㅠ
제 컴터가 이상한건지 좀 잘 안되더라구요
그래도 새로운 거를 배웠다는거 자체가 기쁩니다! 감사합니다 ㅎㅎ -
ㄴ너무나 감동입니다
어제 알게 되어 저녁늦게 접하고 자다깨다를 반복하며 새벽 5시까지 봤습니다
그리고 오늘도 아침에 일어나자마자 켰어요
어떻게 이렇게 쉽게 알려주실 수가 있죠?
생각해봤더니 생활코딩님은 정말 다른 타 강의란 다른 마인드를 가지고 계신거 같아요
기존의 강사분들은 본인들의 앎을 전달하기 위해서 학생을 배려하는 마인드가 코딩님보다 적었서 그런게 아닌가 싶었어요
강의를 들으면서 정말 학생들의 목적에 맞게 알게 해주고 싶어서 한다는 순수한 의도가 보여서 너무 너무 좋았습니다
물론 자발적으로 후원하고 싶다는 강한 욕구도 함께요 저도 그런 기업을 만들고 싶었고 현실에서 이렇게 하고 있는 분을
뵈어서 마음이 뜨거워졌습니다 잘 알고 가도록 하겠습니다 -
2주정도 노는 타임을 가지고 다시 시작하네요. 대부분은 까먹은 상태이지만 배우는 중간중간 다시 돌아오네요 !
-
edwith에서 선생님 수업이 도움되어서 이윽고 생활코딩까지 알게되어 WEBn의 자바스크립트 수업을 모두 듣고 또 반응형웹에 대한 수업까지 듣고나니... 궁금한 점이 생겨 문의드려요. 반응형웹이 가능한 풀페이지디자인의 프레임 워크(https://alvarotrigo.com......ko/)를 제 홈페이지로 작업해보았는데요. pc화면에서의 내용이 모바일상에서는 내용자체가 많다보니 이미지가 모바일상에서의 풀페이지디자인의 높이보다 크면 내용이 짤리는 문제가 있었어요. 혹 풀페이지디자인의 pc화면크기에서 풀페이지디자인의 meta태그(<meta name="viewport" content="width=device-width, initial-scale=1">)를 반응형의 모바일화면에서는 이 매타태그가 원페이지디자인 스타일의 매타태그(<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">)로 변환이 가능한지요... 원페이지라 함은 화면 높이가 풀페이지 프레임워크에서 화면에 딱 맞춘 높이가 아닌 아래로 스크롤이 가능한 화면높이로 전환되는 것이 가능한지 문의드리고 싶어요. 일단 제가 오랫동안 생각만 해오던 부분인데... 구글을 통해서는 이 부분에 대한 답을 찾지는 못했어요.
-
해결했습니다!^^
media 쿼리에서
#article 앞에 #grid를 부여하니까 바로 해결되네요!!! -
a {
text-decoration: none;
}
body {
margin: 0px;
}
h1 {
border-bottom: 0.1px solid lightsteelblue;
text-align: center;
margin: 0px;
padding: 20px;
}
ul {
border-right: 0.1px solid lightsteelblue;
width: 100px;
margin: 0px;
padding: 20px;
}
img{
display: block;
margin-left: auto;
margin-right: auto;
}
#grid {
display: grid;
grid-template-columns: 150px 1fr;
}
#grid ul{
padding-left: 33px;
}
#grid #article{
padding-left: 20px;
}
@media(max-width:800px) {
#grid{
display: block;
}
ul {
border-right: none;
}
h1{
border-bottom: none;
}
#article{
padding-left: 0px;
}
}
css 전체 코딩입니다.
참고해주세요.
이고잉님 외에도 이 글을 보시는 분 누구라도 문제를 해결해주시면 감사하겠습니다. -
이고잉님 안녕하세요
미디어쿼리 공부하다가 궁금한 것이 있어서 질문드립니다!
스크린크기가 800픽셀 이하일때
그리드를 없애고
아티클의 좌측 패딩값을 0픽셀로 준다고 했을 때 다음과 같이 코딩을 했습니다.
@media(max-width:800px) {
#grid{
display: block;
}
ul {
border-right: none;
}
h1{
border-bottom: none;
}
#article{
padding-left: 0px;
}
}
이렇게 하면 그리드가 없어지긴 하는데
아티클의 패딩값이 0픽셀로 되지가 않고 그대로 있습니다.
어떤 문제가 있는걸까요?
답변 기다리겠습니다 :) -
소스는 강의에서 나오는데로 했는데 border를 써서 실행을 하면 다른건 되는데 이부분 적용이 안되는건 왜일까요??
-
media 쿼리를 공부해야 이유가 생겼네요..
-
@media (max-width:800px){
위에있는
'}'를 하나 삭제해보세요!
하나가 더들어간것 같아요 -
감사합니다
-
조금씩 알아가는 기분이라 너무 좋습니다. 매번 강의 볼때마다 감사해요
-
재밌어영
-
Mediaquery가 반응형 디자인의 조건문 같은 개념이군요!! 굉장히 현대적인 코딩이군요!!
-
border: transparent 추가 해보세여
-
이고잉님 코드 그대로 해도 크롬 웹페이지 우측상단에 나타나는 픽셀 너비(A)가 기준이 되지는 않네요. 우측 마우스 클릭하여 검사 항목에서 열리는 창에서 확인할 수 있는 픽셀(B) 기준이네요.(이게 진짜 저희가 보는 창의 사이즈로 보이는데요.) 크롬 브라우저 너비 마우스로 조정할때 생기는(우측 상단에) 이 픽셀의 정체는 무엇인지 정말 모르겠습니다...
A가 1000px일때, B는 800px으로 나타납니다. 아시는 분 있으면 알려주세요! -
도움이 되었습니다 :) -
atom에서는 (파일명).html을 만드신후에 html을 치시고 tab을 누르시면 나와요
-
감사합니다!
-
html snippets라는 것이 도움이 되실것 같은데 찾아서 에디터에 적용시켜보세요! -
기본 html 코드가 뚞딲 하고 나타나는 마법은 어떻게 해야하는건가요? 알려주세요!
-
잘 봤습니다^^ 감사합니다.
-
이 미디어 쿼리만 잘 활용한다면
기기 별로 따로 웹 작업을 할 필요가 없습니다.
CSS로 제어를 하기 때문이죠.
스마트폰에서 볼 때, 태블릿으로 볼 때, PC에서 볼 때 옵션을 다르게 줘서
유동적으로 활용할 수 있는게 반응형 웹입니다.
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
