그리드의 기본 사용법
강의
소스코드
그리드 써먹기
강의
댓글
-
완료 -
완료
-
완료 -
완료
-
완료
-
완료
-
#grid ol 와 기존 ol에 padding-left:33px를 같이 주는 것이 결과가 같을 수 있으나 의미가 다릅니다.
#grid ol은 <div id="grid">내의 ol에 적용되는 것이고 기존 ol에 padding-left:33px를 적으면 적으신 ol에만 적용됩니다.
늘 말씀하시는 것이지만 극단적으로 가보죠.
div내에 수많은 ol이 있다면 어떻게 하실 건가요?
일일이 하나하나 ol에 padding값을 적을 건가요? 힘들고 중복이 많아 코드가 지저분해집니다.
그때 style에 #grid ol를 적어놓고 수많은 ol들을 div로 묶어 여기에 id="grid"를 적는다면?
이 이후로는 알아서 모든 ol에 grid값이 적용될 겁니다. -
2021.01.10
-
완료!
-
좋은 강의 감사합니다.
caniuse.com 활용하는 버릇을 잘 들여야겠습니다.
오늘자 기준으로 grid 사용율은 95.45%로 나오고, modile browser에 대한 지원 상황이 함께 나오고 있어서 더 좋네요. -
2021.01.09
-
영상 마지막 부분으 ㄹ보니 알겠네요 인터넷 익스플로버전이 낮아 안되고 있었내요
-
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid{
border:5px solid pink;
display:grid;
grid-template-columns: 150px 1fr; 이부분부터 강사님이 해주신대로 안됩니다. 왜그런거지요 1fr 1fr 해도 안됩니다.
}
div{
border:5px solid gray;
}
</style>
</head>
<body>
<div id="grid">
<div>navigation</div>
<div>article33</div>
</div>
</body>
</html> -
ol의 padding-left:33px 값을 #grid ol에 따로주지 않고 기존 ol에 padding-left:33px를 같이 줘도 되지 않나요? 구동해보니 차이가 없는데, 하나씩 고쳐나가는 과정에서 설명을 위해 #grid ol 값을 별도로 만드신거라고 보면 될지 궁금합니다.
-
완료~ -
감사합니다.
-
grid 5일차
-
2021.01.07(목) -
완료
-
2021.01.03
-
#grid { display: grid; grid-template-columns: 150px 1fr; } -
백엔드 개발자로 가끔 간단한 css를 처리해야 할 일이 있는데
중구난방으로 알던 지식이 명쾌하게 정리되는 기분입니다
역시 무엇을 앎에 그치지 않고 활용을 하기 위해선 상황을 통해서 익히는 체계가 정말 중요한 것 같습니다
감사합니다! -
ㅇㄹ -
2020.12.28 완료!!
-
<!doctype html>
<html>
<head>
<title>WEB1 - CSS</title>
<meta charset="utf8">
<style>
h1 {
font-size:45px;
text-align: center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
a {
color: red;
}
ol{
border-right:1px solid gray;
width:100px;
margin:0;
padding:20px;
}
#grid{
display :grid;
grid-template-columns: 150px 1fr;
}
#grid ol{
padding-left: 33px;
}
#article{
padding-left: 25px;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div id ="article">
<h2>css</h2>
<p>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
</p>
</div>
</div>
</body>
</html> -
<!doctype html>
<html>
<head>
<title>WEB1 - welcome</title>
<meta charset="utf8">
<style>
div{
border:5px solid pink;
}
#grid{
border:5px solid grey;
display:grid;
grid-template-columns: 1fr 1fr;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
</html> -
2020.12.26
-
5일차
무색무취의 block level = div, inline span
1fr은 나머지 -
완료!
-
2020 12 17
-
2020.12.16 -
혹시 더블클릭해서 패딩, 마진 조절하는 부분 이해 안되시는 분들을 위해서,
이고잉님이 말하신 더블 클릭은 숫자 더블클릭해서 일단 선택 하라는 것이었구요.
숫자가 선택 된 이후 화살표 위, 아래를 이용해 조절하시면 됩니다.
저도 2시간 정도 해매다 찾아서 나중에 공부하시는 분들을 해매지 않았으면 좋겠네요 :) -
감사합니다.
-
2020.12.10 완료
소중한시간 감사합니다.! -
12/9
-
조금씩 응용하는 부분으로 들어가니 더 재밌어지네요 ㅎㅎ
강의영상 감사히 잘 봤습니다! -
횽님 오늘 수업도 정말감사합니다 잘들었습니다.
디자인적 부분은 검사에 들어가서 디자인 바로잡기 재미났습니다. -
20201129 -
20201125 완료 -
2020-11-21 완료 -
복습 끝에 이해 완료!
-
2020.11.16
-
오~ 그리드 새로운거 배웠네요..
기초지식없이 마구잡이로 써먹다가 체계적으로 한번 들어봐야지 했는데..
득템입니다. -
20.11.04 완료
-
box model이랑 그리드랑 헷갈렸는데, 이제 확실히 알겠네요.
그러니까 개발자 도구는 코드를 바꾸기전에 시뮬레이션을 해볼 수 있는 거지요? -
2020.11.02.MON.
-
2020/10/31
<div>:의미도 없고 기능도 없는 태그!
"조사"기능에서 그림에 있는 값을 더블클릭하면 바꿀 수 있음->실제 값이 바뀌진 않음 -
271020
-
예! 좋은 강의 잘 듣고 있습니다 ㅎㅎ
-
201009 완료
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
