그리드의 기본 사용법
강의
소스코드
그리드 써먹기
강의
댓글
-
완료! 감사합니다 ㅎㅎ -
완료
-
감사합니다.
-
감사합니다. 완료
-
감사합니다.!!
-
완료
-
완료
-
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로 전체로 묶는게 나은 것 같아서요.
-
display: grid;
grid-template-columns: 150px 1fr;
4등분으로 나오길래 왜그런가 했더니 <a>태그 안닫은게 있었네요^^;;;
검색으로 찾을 수 있었어요!
배운거 응용했다는 생각에 혼자 뿌듯하네여 ㅎㅎㅎ -
20191210 완료 -
<!doctype html>
<html>
<head>
<title>MinSang's coding</title>
<meta charset="utf-8">
<style>
body {
margin: 0;
}
#active {
color: red;
}
.saw {
color: gray;
}
a {
color: black;
text-decoration: none;
}
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-columns: 150px 1fr;
}
</style>
</head>
<body>
<h1><a href="index.html">Coding</h1>
<div id="grid">
<ol>
<li><a href="java.html" class="saw" id="active">Java</a></li>
<li><a href="html.html" class="saw">HTML</a></li>
</ol>
<div>
<h2>Java</h2>
<p><strong>자바</strong>(영어: Java, 문화어: 쟈바)는 썬 마이크로시스템즈의 제임스 고슬링(James Gosling)과 다른 연구원들이 개발한 객체 지향적 프로그래밍 언어이다. 1991년 그린 프로젝트(Green Project)라는 이름으로 시작해 1995년에 발표했다. 처음에는 가전제품 내에 탑재해 동작하는 프로그램을 위해 개발했지만 현재 웹 애플리케이션 개발에 가장 많이 사용하는 언어 가운데 하나이고, 모바일
기기용 소프트웨어 개발에도 널리 사용하고 있다. 현재 버전 10까지 출시했다. 자바의 개발자들은 유닉스 기반의 배경을 가지고 있었기 때문에 문법적인 특성은 파스칼이 아닌 C++의 조상인 C 언어와 비슷하다. 자바를 다른 컴파일언어와 구분 짓는 가장 큰 특징은 컴파일된 코드가 플랫폼 독립적이라는 점이다. 자바 컴파일러는 자바 언어로 작성된 프로그램을 바이트코드라는 특수한 바이너리 형태로 변환한다. 바이트코드를 실행하기 위해서는
JVM(자바 가상 머신, Java Virtual Machine)이라는 특수한 가상 머신이 필요한데, 이 가상 머신은 자바 바이트코드를 어느 플랫폼에서나 동일한 형태로 실행시킨다. 때문에 자바로 개발된 프로그램은 CPU나 운영 체제의 종류에 관계없이 JVM을 설치할 수 있는 시스템에서는 어디서나 실행할 수 있으며, 이 점이 애플리케이션의 특성과 맞아떨어져 폭발적인 인기를 끌게 되었다.<br>
<a href="https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94_(%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D_%EC%96%B8%EC%96%B4)" target="_blank">출처</a>
</p>
<p><a href="http://www.oracle.com/" target=_blank>자바 다운로드</a> <a href="https://www.eclipse.org/downloads/" target=_blank>이클립스 다운로드</a>
<iframe width="560" height="315" src="https://www.youtube.com/embed/-dPXqgWQBGE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com......s*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document,
s = d.createElement('script');
s.src = 'https://web1-vtjhrc6xkt.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</div>
</body>
</html>
왜 안되는걸까요... 파일이름하고 내용은 다른데 그거는 상관없지 않나요??
왼쪽에 ol만 들어가는게 아니라 모든게 들어갑니다. 오른쪽은 비어있구요 -
2019-11-26 그리드 응용
완료 -
11월 25일 완료
-
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#grid ol{
padding-left:33px;
}
#grid #article{
padding-left:25px;
} -
20191117 완료
-
<div #somethingID>
</div>
'somethingID'라는 div블록 내에 다른 div블록들을 제대로 쓰고 닫아주셨는지 확인하세요! -
완료
-
grid 완료! 오타를 진짜 잘 살펴봐야하는군요~
-
에러나는 분들은 괄호와 오타가 없는지 보세요. 그리고 선생님 강의 그대로 따라 간 건지, 아니면 파일명을 임의로 설정해서 하는 건지 잘 생각해보세요. 저는 파일명을 1.html 2.html 3.html로 한 것이 아니라 html.html CSS.html JavaScript.html 이렇게 임의로 설정해서 하는 중이란 걸 까먹고 있었습니다. -_-;
그래서 그리드 하는 동안 왜 다른 페이지는 잘 되는데 유독 JavaScript.html만 안되나 했더니 제가 잘못한 거였더군요. -
정말...이 오류는 무엇인지 너무 궁금합니다. ... 궁금해서 잠을 못이루겠습니다.
grid-template-columns을 쓰고 뭐든 다 해봤지만, 저 css 문단이 그리드 안으로 들어오질 않네요... ㅠㅠㅠ ol태그 옆에 그리드 옆에 정렬이 되지 않고, 밑으로 계속 내려가요. 데스크탑에서 작업했는데, 선생님의 결과물도 밑으로 내려가 있습니다!
그런데 노트북에서 다시 작업하니, css 문단이 ol태그 옆에 살포시 잘 정렬되어 있어요. 이거 대체 무엇일까요?? -
web 1 강의는 그럭저럭 따라갈만은 했는데, css 는 뭔가 길을 잃어버린 기분이 드네요.
나만 그러나 싶어서 css 를 검색했더니, css 가 배우기가 굉장히 난해하고 까다롭다는 의견이 많더라구요.
6개월 정도는 익숙해져야 한다는 말들도 많고, 하나 하나 다 퍼펙트하게 받아들이지 못해서
스트레스 받았는데, 그냥 마음을 비우고 개관한다고 생각하며 듣는게 나을 것 같네요. -
삐약
-
20191015
-
20191015
-
20191009
-
갈수록 난이도가 어려워지지만
해결할수록 체감 난이도는 낮아지네요! -
191006 00:02 흥성무 완료!
-
완료 -
완료
-
완료
-
잘 들었습니다 ㅎㅎ
-
완료
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
