그리드의 기본 사용법
강의
소스코드
그리드 써먹기
강의
댓글
-
재밌지만 어렵네요 ㅋㅋㅋㅋ grid 첫번째 값을 처음 div 폭에 안맞춰주면 서로 어긋나서 삐져나오기도 하고ㅋㅋ 개발자도구로 분석하는 재미가 쏠쏠합니다~!! 좋은 강의 항상 고맙습니다 고잉선생님! -
colums 가 아닌 columns 입니다.
n이 하나 빠져서 동작하지 않네요.
세로 [column] -
잘 보고 있습니다
-
2019-02-16 완료
-
감사합니다 -
고맙습니다
-
11. 그리드써먹기 마지막부분(7:24)에서 선택자 묶을 때 안묶이시는 분들
선택자 사이에 '>'를 포함시켜보세요
ex) #grid>ol { ~~~~~~~ }
같은 부분에서 헤매신 분들이 계실까 해서 댓글로 남깁니다 -
인터넷 익스플로러에서는 grid-template-columns:150px 1fr; 가 작동하지 않는군요 ㅠㅠ
-
<!doctype html>
<html>
<head>
<title>frog's WELL</title>
<meta charset="utf-8">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-133675412-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-133675412-1');
</script>
<style>
body {
margin:0;
}
a {
color:black;
text-decoration: none;
}
.saw {
color:gray;
}
.active {
color:red;
}
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-colums: 150px 1fr;
}
</style>
</head>
<body>
<h1><a href="well of a frog in a well.html">우물안 개구리의 우물#</a></h1>
<div id="grid">
<ol>
<li><a href="1.html" class="saw active">요리</a></li>
<li><a href="2.html" class="saw">패션</a></li>
<li><a href="3.html">운동</a></li>
<li><a href="4.html">생활 꿀팁</a></li>
<li><a href="5.html">프로그래밍</a></li>
<li><a href="6.html">자기계발 및 공부</a></li>
<li><a href="7.html">컴퓨터</a></li>
<li><a href="8.html">취업</a></li>
<li><a href="9.html">영상제작 및 편집</a></li>
<li><a href="10.html">인테리어</a></li>
<li><a href="11.html">영어만화 및 번역</a></li>
<li><a href="12.html">피부</a></li>
<li><a href="13.html">부동산</a></li>
<li><a href="14.html">고전인문</a></li>
</ol>
<div>
<h2>요리</h2>
<p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/XkwXb48zNQw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>
<img src="food.jpg" width="70%">
<p stlye="margin-top:10px;">
</p>
</div>
</div>
</body>
</html>
흠 질문이 있습니다.
부모 div태그 밑에 있는 ol태그 외에 또다른 div태그에 h2와 p태그가 들어가는데
저같은 경우는 텍스트가 아닌 동영상과 사진이 들어있습니다.
그래서인지 그리드가 적용이 안되어 우측공간으로 정렬되어 들어가지 않더라구요.
혹시 동영상과 사진은 또다른 그리드 태그로 적용을 시켜야 하는걸까요?
고수님들 알려주세요..ㅠㅠ -
감사합니다!! 한참 고민하고 있었는데 oupi님 댓글보고 크롬에서 열어보니 되더군요! 이제 자도 되겠어요! 감사합니다 굿밤되세요!
-
완료:)
-
완료! -
댓쓴님이 <div id="grid"> 요 아이디 밑에 부여한 <ol> 리스트"만" 적용이 되는거에요.
예를들어, 스타일 밑에다가
#grid ol{ ----; } 대신 그냥
ol { ----; }만 쓴다면
어떤 특정 리스트가 아닌
<body>사이에 님이 혹시라도 만들었을 다른 ol을 포함한모~든 ol 리스트 </body> 들까지 적용 되는거라고 보면 될듯요. 설명이 어렵네; -
하 나 벌써 커스터마이징 시작했다 ㅠ 크... 근데 진짜 복잡한게 뭐냐면 그냥 코드 줄줄 써내려갈땐 안어려운데
뭐가 잘 안되는거같아서/ 혹은 수정하려고 다시 내가 쓴 코드를 찾는게 진짜 어려운것 같다 ㅋ
내가 이걸 멀 어떻게 쓴건지... 약간 악보 많이보고 익숙해지듯이 코딩도 많이해봐야 이 체계가 바바로 눈에 들어올것같다 -
완료
-
완료!
-
완료
-
완료
-
완료- 내일 나만의 웹으로 이제까지 한 거 재구성 해보기
-
감사합니다. ^^!
-
감사합니다. ^^!
-
첫번째 영상 9분10초 쯤에 익스플로러는 부분적으로 지원(그리드)한다고 설명하시는데 그 부분이 아닌가요?
-
하나만 더 여쭤볼게요
크롬만 쓰다가 방금 익스플로러로 접속을 해보았는데 그리드가 구현이 안되기에
이고잉님 소스로 따로 파일을 만들어서 해봤는데도 그리드기능이 작동하지 않더군요.
익스플로러가 원래 그리드기능이 작동하지않는건가요 아님 다른오류일까요?
-크롬으로 하면 그리드 작동합니다- -
질문하나 드릴게요!!
<div id="oo">
<ul>
</ul>
<div id="ss">
<p>
</p>
</div>
</div>
에서 </ul>과 <div id="ss">사이에 <br>을 넣었더니 그리드가 작동되지않는 오류가 생기네요.
<br>을뺴면 오류는 해결되지만 왜 저런 오류가 생기는지 궁금하네요. -
감사합니다:) -
완료 -
너무재밌네요 ㅠㅠ -
CSS 진짜 재밌네요. CSS 첫강부터 여기까지 한번에 들었어요. 이왕 완강까지 하고싶지만 시간이 너무 늦어서 내일^^
display:grid;가 안 먹어서 왜 그런가 한참 고민했던게 알고보니 gird로 오타가 났었더라구요.... 뭐가 문제인가 많이 답답했는데 오타... ㅎㅎ
덕분에 차근차근 배우고 있습니다^^! 좋은 강의 감사해요! -
완료 -
감사합니다. -
grid 태그 쓸때 띄워쓰기 없이 그냥 공간을 그냥 채웠더니 태그가 깨지더라구요. (바깥쪽 div태그가 감싸지지 않는)
원인을 찾다가 레퍼런스랑 차이가 뭐지.. 한참 들여다보다가 띄워쓰기가 있네 하며 넣었더니 작동하네요.
프로그래머들의 고충을 일면 엿 본 기분이었습니다. -
와 개재밌어
-
맥에서 아톰으로 열심히 공부중입니다.
style 태그 후 grid의 g를 치면서 자동완성을 기대하는데 grid와 그 이하의 내용이 자동완성에 나오질 않습니다.
밑에서 id 선언부터 안먹히는(?) 느낌인데요,
에디터 버그인가요??
껐다 키면 되긴 하는데 다른 해결방법이 있는지 여쭤봅니다..
<style> ****이 부분도 처음에는 style에 밑줄이 없습니다.에디터를 재시작하면 밑줄도 생기고 자동완성도 됩니다..
#grid{
border:5px solid pink;
display:grid;
gri ****이부분입니다. g만 쳐도 자동완성 리스트가 나와야 하는데 나오지 않네요****
}
div{
border:5px solid gray;
}
</style>
</head>
<body>
<div id="grid"> ****id 색깔과 #grid 색깔이 동일하지 않습니다.
<div>NAVI</div>
<div>ARTIC</div>
</div>
</body>
</html> -
잘들었습니다 -
atom에서 첫줄에 html입력하니 기본 구조가 작정되네요.^^
-
감사합니다:)
-
감사합니다.
-
감사합니다. 항상 div를 정확히 왜 쓰는지 이해하기 어려웠고, 웹을 만드는 순서를 어떻게 잡아야 할 지 막막했는데 수업을 듣고 제가 원하는 그리드에 맞춰서 유동성 있게 화면을 구성할 수 있다는 확신이 들었습니다. 알차고 좋은 수업 정말 감사합니다! :)
-
감사합니다.
-
코딩 그대로 복사했는데. 문장이 옆으로 안나오고 링크밑으로 문장이 나오시는 분
웹 브라우저 chrome으로 웹창 띄우시면 되네요 ....호환의 문제인듯. -
좋네요.
-
<p> .....</p> 태그로 묶어보시는건 어떨까요 문단을?
처음 태그 보니 본문이 문단으로 묶여있지 않아서 그런거 같기도 하네요. -
완료
-
부모태그 <div>에 id값을 주기위해 gird를 쓰는거라면, id="gird"에서
grid 대신에 아무거나 대입해도 상관없는지 ?
id값이외에는 어떤 기능도 없는것인지?
가 궁금합니다.
마찬가지로, article도 같은 경우로 쓰이는것인지 궁금해요 ! -
View -> Toggle soft wrap 기능을 활용하면 화면 크기에 맞게 줄바꿈이 자동으로 적용됩니다.
-
제가 다시 해봤는데 HTml을 그냥 적어서 자동완성으로 태그를 만든 후에 다시 하니까 이 현상이 사라졌습니다.(그전에는 일일이 html태그부터 body태그까지 직접 입력했습니다.) 이유를 아시는분 있나요?
-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<tilte></title>
<style>
#grid{
border:5px solid pink;
display:grid;
grid-template-columns:150px 1fr;
}
div{
border:5px solid gray;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>a;owehvnlaksndf;oaiwjhefl;kajsdfl;kajhweoifjaslkdfnl;awihflaiwehfl;asihdflkashfoi;aw;ehflkasbhdf;oiawhflkashdfl;iashfl;aihseflkasndf;oliahweflo;ijsdlk;fhawo;iefhlaksdbf;lasdifehvnlaksndf;oaiwjhefl;kajsdfl;kajhweoifjaslkdfnl;awihflaiwehfl;asihdflkashfoi;aw;ehflkasbhdf;oiawhflkashdfl;iashfl;aihseflkasndf;oliahweflo;ijsdlk;fhawo;iefhlaksdbf;lasdifehvnlaksndf;oaiwjhefl;kajsdfl;kajhweoifjaslkdfnl;awihflaiwehfl;asihdflkashfoi;aw;ehflkasbhdf;oiawhflkashdfl;iashfl;aihseflkasndf;oliahweflo;ijsdlk;fhawo;iefhlaksdbf;lasdifehvnlaksndf;oaiwjhefl;kajsdfl;kajhweoifjaslkdfnl;awihflaiwehfl;asihdflkashfoi;aw;ehflkasbhdf;oiawhflkashdfl;iashfl;aihseflkasndf;oliahweflo;ijsdlk;fhawo;iefhlaksdbf;lasdifh</div>
</div>
</body>
</html>
질문있습니다 . 이렇게 코드를 따라 작성했는데 이고잉님 화면에서는 두번째 div태그의 장문의 글이 줄바꿈이 되시던데 저는 똑같이 작성했는데도 줄바꿈이 되지 않더군요 글이 짤립니다. 왜그럴까요 -
완료
-
정말 형님강의 없었으면 어쩔 뻔 했나 싶습니다.
고잉형님
같은 이씨라는게 자랑스럽습니다.
감사합니다! -
완료!감사합니다!
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
