ㄴ9.11 생활코딩 세번째 css공부^^ - 그리드 이어서 , 반응형 디자인 (미디어쿼리
(참고: 이전 글에 리스트에 ol이 없는데 없으니 배치가 이상하게 돼서 ol을 추가했다.)
1. div로 묶은 태그와 리스트 태그를 하나의 그룹으로 묶고 그리드에 포함되는 요소로 사용하려면
저 두개를 감싸는 공통의 부모태그가 필요하다, 그것도 div 태그로 할 수있다.
=
<div>
<ol>
<li><a href="top.html" style="color:red;text-decoration:underline">탑</a></li>
<li><a href="jungle.html">정글</a></li>
<li><a href="mid.html">미드</a></li>
<li><a href="battom.html">바텀</a></li>
<li><a href="supporter.html">서포터</a></li>
</ol>
<div>
탑은 소환사의 협곡에서 EU 스타일 포지션 중 상단 라인에서 챔피언을 플레이하는 포지션을 지칭한다.<br>
정글, 미드와 함께 상체를 구성한다. 하지만 상체 중에서는 가장 영향력이 낮은 것으로 평가되고 있으며,
상체 메타가 올 때에는 어느 정도의 영향력이 있지만, 하체 위주의 메타에서는 전 라인 중 가장 낮은
영향력을 보여준다 <h5>(출처 - 나무위키)</h5>
</div>
</div>
맨 앞과 맨 뒤의 div태그가 부모태그고 그 두 div 이외의 태그가 자식태그가 된다.
1-2. 바깥쪽의 div 태그를 그리드로 (아이디) 지정하고, 아이디가 그리드인 태그에 대해 디스플레이를 그리드로 지정하고,
리스트를 150픽셀로하고 두번째 컬럼인 div태그는 1fr
** 가로줄의 오른쪽으로 div 내용이 보내진다
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
=<div id ="grid">
<ol>
<li><a href="top.html" style="color:red;text-decoration:underline">탑</a></li>
<li><a href="jungle.html">정글</a></li>
<li><a href="mid.html">미드</a></li>
<li><a href="battom.html">바텀</a></li>
<li><a href="supporter.html">서포터</a></li>
</ol>
<div>
탑은 소환사의 협곡에서 EU 스타일 포지션 중 상단 라인에서 챔피언을 플레이하는 포지션을 지칭한다.<br>
정글, 미드와 함께 상체를 구성한다. 하지만 상체 중에서는 가장 영향력이 낮은 것으로 평가되고 있으며,
상체 메타가 올 때에는 어느 정도의 영향력이 있지만, 하체 위주의 메타에서는 전 라인 중 가장 낮은
영향력을 보여준다 <h5>(출처 - 나무위키)</h5>
</div>
</div>
(참고로 위의 첫번째 태그는 스타일태그 안에, 밑은 바디태그 안에 적은거다)
2. 밑의 사진에 저 네모네모 부분 숫자를 더블클릭하면 수치가 변하며 움직이는 크기를 실시간 확인 가능하다.
(근데 난 왜 안되냐)
3. ( 이거 안됨 나중에 다시 보자) 생활코딩 web2-11 그리드써먹기 5분 20초
요기 div가 딱 위에 달라붙어있어서 킹받으니까 바꿔주자.
<div>
<p>
탑은 소환사의 협곡에서 EU 스타일 포지션 중 상단 라인에서 챔피언을 플레이하는 포지션을 지칭한다.<br>
정글, 미드와 함께 상체를 구성한다. 하지만 상체 중에서는 가장 영향력이 낮은 것으로 평가되고 있으며,
상체 메타가 올 때에는 어느 정도의 영향력이 있지만, 하체 위주의 메타에서는 전 라인 중 가장 낮은
영향력을 보여준다 <h5>(출처 - 나무위키)</h5>
</p>
</div>
바로 이 태그인데
위의 div를 <div id: "article">
로 변경해 새로운 아이디를 주고 스타일 태그 안에
#article{
padding-:25px
}
써넣으면 거리감 생긴다.
---------------------
이거 안돼서 일단 넘어가고 다시 봐야겠다. 자꾸 바꾸려 자꾸자꾸자꾸 시도해도 안됨, 왜이러지? 일단 진도를 나가야지. 나중에 고치러오자
그리고 위 코드에서 없던 <p> 가 없어서 안되나 ? 하고 넣어보니 거리가 약간 생겼는데 이건 원래 p가 가지고있는 부피값임.
4
이 ol , li태그로 이렇게 사이즈를 주는 건 사실 좋지 않은 코드임.
왜? 나중에 본문에 ol , li가 추가될 수 있기 때문이다. 고치는 방법은 바로바로
내가 디자인을 주고싶은 이
[ div 아이디 = "그리드" 의 안에 있는 ol 태그 ]
를 묶어 확실하게 특정짓는 게 좋다!
=
묶는 방법은 이렇게 !
#아이디 li{
내용
}
4.1
<div id ="grid">
<ol>
<li><a href="top.html" style="color:red;text-decoration:underline">탑</a></li>
<li><a href="jungle.html">정글</a></li>
<li><a href="mid.html">미드</a></li>
<li><a href="battom.html">바텀</a></li>
<li><a href="supporter.html">서포터</a></li>
</ol>
<div id: "article">
<p>
탑은 소환사의 협곡에서 EU 스타일 포지션 중 상단 라인에서 챔피언을 플레이하는 포지션을 지칭한다.<br>
정글, 미드와 함께 상체를 구성한다. 하지만 상체 중에서는 가장 영향력이 낮은 것으로 평가되고 있으며,
상체 메타가 올 때에는 어느 정도의 영향력이 있지만, 하체 위주의 메타에서는 전 라인 중 가장 낮은
영향력을 보여준다 <h5>(출처 - 나무위키)</h5>
</p>
</div>
</div>
요기의 아티클 말이다
#article{
}
아이디를 정해 놨으니 위처럼 그냥 이렇게 할 수 있지만 의미를 분명히 하기 위해 사진처럼 하는 것도 좋은 방법.
(그리드 앞에 샵 있다.)
그리드 끝!!!!!!!!!
<반응형 디자인>
- 미디어 쿼리
1. 화면 크기에 따라서 어떤 요소를 보였다 안보였다 하기
위해서 아무 의미 없는 div 태그 하나 만들고
<div>
Resoinsive
<div>
(전과 같이 div 잘보이게하기위해 테두리 일단 줌div{
border: 10px solid green;
font-size: 60px;
}
)
이 때 필요한 것이 바로 미디어쿼리.
화면의 크기가 800픽셀보다 크냐 작으냐에 따라 div 태그를 보이거나 안보이게 하는거부터 해보자.
screen width > 800px
div{
display:none;
}
스타일 태그 안에 넣기. 그런데 저 부분은 미디어쿼리가 아닌 이해를 위한 가짜코드.
저것을 재우고 미디어 커리로 바꿔보자.
화면의 크기가 최소 800픽셀 = 화면의 크기가 800픽셀보다 크다면
div 코드가 동작한다.
@media(min-width:800px) {
div{
display:none;
}
}
저장하고 페이지를 보면??
옆에 잡고 가로길이 늘리다 800픽셀 되면 저 글자가 사라짐~! 대애박ㅋㅋ
똑같이 min 을 max 로 바꾼다면 800픽셀보다 작아지면 글자가 사라집니다.
스마트폰으로 웹사이트 들어가면 웹이랑은 완전 다른 ui를 띄는데 이게바로 이 미디어 쿼리를 이용한 내용이당.
굿굿
2. 원래 만들던 롤 사이트- 탑 페이지에서 800픽셀 이하로 작아질 시 가독 편한 ui로 바꾸는 실습을 해보자.
@media (max-width:800px) {
}
스타일에 적어두고ㅡ
#그리드 인 것이 800 이하 되면 그리드가 아니게 하면 되겠지요.
->
@media (max-width:800px) {
#grid{
display: block;
}
= 800픽셀보다 화면이 작을 때 그리드 디스플레이였던 아이디 그리드가 블럭으로 바뀐다.
결과.
다음
li {
border-right:1px solid gray;
위의 이 코드에서
오른쪽 보더 라이트 지우면 픽셀 줄었을때 세로선이 없어지겠지여
@media (max-width:800px){
#grid{
display:block;
}
ol{
border-right:none;
}
}
결과
후......오늘 공부는 여기서 끝.. 오늘은 결과물의 양은 적지만 고생을 가장 많이했다..
전체화면 픽셀 줄였을때 뭐가 문제인지 아무 변동이 없어서 고쳐보다가
개발자 도구 보니 뭐가 구동 안되고있다고는 보이는데 건들여봐도 도대체가 왜그런지 모르겠어서
남자친구한테 전화걸어서 물어보니 코드 복사해서보내주라그런다.
그래서 복붙해보내줬는데 남자친구가 이클립스로 빨간줄 두개 뜬거 고쳐서 구동했더니 바로 됐다..
ㅠㅠ
} 이걸 ) 이걸로
= 이걸 : 이걸로
진짜 짜!~~!중나