그리드의 기본 사용법
강의
소스코드
그리드 써먹기
강의
댓글
-
19.07.17
꿀잼이네요 -
그리드 수업 듣고 이해하는데 2일 걸린거 같네요...
들으면서 따라 하다가 안돼면 될 때까지 해보고...
그래서 여러 가지를 이해할 수 있는거 같네요...
힘들지만 잘 들었습니다. 감사합니다. -
190710. 완료
-
앗 그러네요^^ 감사합니다
-
div{
border:5px soild gray;
}
soild -> solid
로 수정하셔야 됩니다. ^^ -
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
#grid{
border:1px solid pink;
}
div{
border:5px soild gray;
}
</style>
<body>
<div id="grid">
<div>서버소개</div>
<div>계정생성</div>
<div>다운로드</div>
</div>
</body>
</head>
</html>
이렇게 했는데 전 왜 결과가 다르게 나오는거죠? 위에 동영상에서 보이는 회색선이 안보입니다. -
시도해보니까 #grid div ol{...} 으로 해야 작동하는거 같더라구요
grid 안 div 안에 있는 ol이기에 영향을 미치지 않는것 같아요 -
제가 처음 배우는 것이라 잘못 이해한 것일 수도 있지만 궁금해서 질문드립니다.
두 번째 영상의 마지막에서 유지보수의 효율성을 위해 ol{..}을 #grid ol{...}로 바꾸셨습니다. 그리고 그 목적은 미래에 본문(id='article') 안에 <ol>태그를 사용했을 때 문제가 생기지 않도록 하는 것이라고 하셨습니다.
그런데 'article'는 'grid'안에 포함되어 있습니다. 따라서 #grid ol{...}은 여전히 article의 <ol>태그에 영향을 줄 것으로 예상됩니다. (핸드폰이여서 직접 코딩으로 검증은 안해봐서 확실하진 않아요.) -
슬슬 이해력이 떨어져가네요 CSS 처음부터 다시 한 번 봐야겠어요 ; -
완료
-
저도 안되더라고요. 찾아보니 아톰 플러그인으로 css 자동완성이 있네요. 이거 해보니 잘됩니다.
https://atom.io......css
위로 가셔서 추가해도 되고 아톰패키지에 검색해서 추가해도 됩니다.
추가하고 아톰 껐다가 켜서 실행해보세요 -
grid를 gird라고 쓴 오타 하나를 못 찾아서 몇 십분을 헤매다가 겨우 해결했네요 ㅠㅠ 오탈자 확인의 중요성을 배웠습니다...
-
완료! -
190504 감사합니다. -
우와 정리 감사합니다 많은 도움이 되었습니다
-
완료! -
좋습니다.
-
완료요~^^ 점점 어려워지는군요 ㅋ
-
ol 태그스타일을..
ol{
border-right:1px solid gray;
width:100px;
margin:0;
padding:20px;
}
ol{
padding-left:33px;
}
이렇게 여백을 줬다가... 의미있는 마크업을 위해서..
#grid ol{
padding-left:33px;
}
이렇게 선택자를 변경해주었습니다.... 이부분은 이해해를 했는데..
변경하기전에 왜.. ol선택자의 패딩 속성을 따로 썼을까요?? -
ol 은 모든 ol값에 대한 스타일 지정이고 id값 ol은 부모 태그가 id값인 ol태그만 스타일을 지정하는 것이라 그렇습니다.
-
완료!
-
2019년 3월 28일
완료! -
ol{
border-right:1px solid gray;
width:100px;
margin:0;
padding:20px;
}
#grid ol{
padding-left:33px;
}
이렇게 분리해서 선언하신 이유를 알 수 있을까요? -
감사합니다!!!!
-
세상에..그리드 시스템이라니...!!!!!!!!!!
-
Grid는 html의 디자인을 담당하는 CSS의 기술중 최신기술에 속하는 방법입니다.
CSS 속성을 적용시키기 위해서는 <태그>가 반드시 필요한데, <h1>이나 <p>와 같은 태그들은 의미를 가지고있으므로 남용하면 정보가 꼬일수 있습니다.
이때 사용하는 태그가 <div>와 <span> 태그입니다. 이 둘은 아무 의미없는 무색무취의 태그로 <div>는 block level이, <span>은 inline 속성이 기본값으로 적용되어 있습니다.
Grid를 사용하기 전 선행조건으로는
1. 그리드를 사용하고자 하는 <태그>가 부모 <태그>로 묶여있어야합니다.
2. 부모 태그에 id=" "id값을 넣어줘야 합니다. (혹은 class값)
3. CSS <style> 태그에 #id값={display:grid 를 사용하고 원하는 grid 속성을 넣어주면 됩니다.
예시로는 grid-template-columns 를 시험해봅시다. 이는 grid의 가로값을 지정해주는 property입니다.
grid-template-columns:150px 150px 을 지정하면, <div id=grid> 내에 있는 자식<태그>들은 모두 가로길이가 150px 로 고정됩니다.
grid-template-columns:150px 1fr 을 지정하면, 첫번째 자식태그는 150px로 가로길이가 고정되고, 다른 한 태그는 남은 공간을 차지합니다.
[핵심★] 이렇게 Grid는 페이지의 전체적인 '틀'을 잡아주는 기술입니다. 전체적인 구조를 Grid로 그리고, '개발자 도구'와 '박스모델' 을 이용해 세부적인 내용을 조절해 웹페이지를 꾸밀수 있습니다.
+a)
선택자를 좀더 명확히 지정하는 방법을 알아봅시다.
ul { }선택자를 지정할 경우, 페이지에 존재하는 모든 <ul> 태그들이 영향을 받을수 있습니다. 하지만. #grid ul { } 처럼 부모태그의 속성을 앞에 입력하면 부모가 grid인 <ul> 태그에게만 선택적으로 영항을 끼칩니다.
https://developer.mozilla.org......out
다양한 Gird Property들을 확인하고 시험해볼수 있습니다. -
완료!
-
완료
-
완료! -
재밌지만 어렵네요 ㅋㅋㅋㅋ 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> 들까지 적용 되는거라고 보면 될듯요. 설명이 어렵네; -
하 나 벌써 커스터마이징 시작했다 ㅠ 크... 근데 진짜 복잡한게 뭐냐면 그냥 코드 줄줄 써내려갈땐 안어려운데
뭐가 잘 안되는거같아서/ 혹은 수정하려고 다시 내가 쓴 코드를 찾는게 진짜 어려운것 같다 ㅋ
내가 이걸 멀 어떻게 쓴건지... 약간 악보 많이보고 익숙해지듯이 코딩도 많이해봐야 이 체계가 바바로 눈에 들어올것같다 -
완료
-
완료!
-
완료
-
완료
-
완료- 내일 나만의 웹으로 이제까지 한 거 재구성 해보기
-
감사합니다. ^^!
-
감사합니다. ^^!
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
