그리드의 기본 사용법
강의
소스코드
그리드 써먹기
강의
댓글
-
와 강의 듣는데 이렇게 이해가 쏙쏙 들어오다니.. 정말 감사합니다!!! 학교에서 가볍게 배우고 지나쳤는데 기초부터 차근차근 배워가니 많은 도움이 됩니다! 감사합니다 :) -
REQUEST: 시멘틱 태그 강의 만들어 주시면 감사하겠습니다.
-
강의 잘 듣고 있어요, 감사 드립니다.
-
점점 코드가 증가하면서..
복습할 내용이 늘어나네요... 그래도 계속 공부합니다. -
ㅎ 좋은 강의 고맙습니다.
귀에 쏙쏙 들어옵니다.
들을때마다 아하 하고 듣습니다. 고맙습니다. -
으으 중간에 grid 스펠링 실수로 안되는걸 붙잡고 ㅠㅠㅠ
-
id는 한페이지에 id명이 반복되지 않는 여러개의 id를 사용할 수 있구요.. 예를 들어 <div id="grid"> <div id="article">은 사용할 수 있지만 <div id="grid"> <div id="grid"> 이렇게는 사용하면 안되요. 동일하게 주려면 class를 쓰시는거에요
-
제가 괜히 틀린 말씀을 드리는 것이 아닌가 싶습니다만,
아마 동기님께서는 html 텍스트 내에서 id는 한 번만 줄 수 있다고 이해하신것 같습니다.
대한민국 국민들은 주민등록번호를 가질 수 있지만, 한 사람당 하나씩만 가질 수 있고 중복될 수 없습니다.
html 텍스트 내에서 각 태그들은 id 값을 가질 수 있지만, 하나의 id 만을 가질 수 있고 중복될 수 없습니다.
와 같은 것 같습니다. 저도 강의 들으며 공부중인지라 제 설명이 맞는지 모르겠네요... -
강의 잘 듣고있습니다. 그런데 궁금한것이 있어요!!
선생님께서 저번 강의때 id값은 단 한번만 줄 수 있다고 하셨는데,
이번 강의에서 id값을 두번 주셨어요!! 그래도 되는건가요?! -
2018.05.03 grid를 gird라고 잘못 쓰고 왜 안 되지?? 하고 있었네요 ㅎㅅㅎ
오늘도 강의 잘 봤습니다 감사합니다! -
이번에도 알찬 강의 감사합니다!
-
그리드 철자 잘 못 적어서 방황했자너
-
기본세팅 바로 만드는법
그냥 html 치면 됩니다. -
<강의 5분 부분~>
값을 줬다고 해서 가운데 선이 텍스트를 삐져나가는 현상이 왜 있는건가요?
값을 늘린 padding 값에 맞춰 함께 자리를 이동하지 않는지?
처음엔 자리를 잘 잡았는데 말이죠~ -
can i use 사이트 정말 좋네요!!!
-
기본 세팅을 바로 만드는 방법이 있나요? <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
</body>
</html>
이거요. 항상 치는데, 이고잉님은 바로 만드셔서요~~ -
상위선택자 설명 부분에서 박수를 쳤습니다 최고군요 -
강의 성의껏 만들어주신 것 만으로도 감사합니다!! -
아래 사이트에서 호환성 체크를 할 수 있습니다~ 우리 수업은 초심자 수업이라 미래 지향적인 개념들을 가지고 수업을 하다보니 호환성은 단념하곤 합니다.
https://caniuse.com......rid -
익스플로러 11은 호환 안되네요. 계속해보다가 코드 노트 그대로 붙여넣어봐도안돼서 크롬에서 확인해보니 됩니다.
-
조언 감사합니다
-
HTML4버전에는 <frame>...</frame>태그를 사용했는데
이제는 CSS로 화면 분할하는 더 간편해지고 더 유동적이네요.
이 grid기능만 잘 사용해도 레이아웃 활용에 문제 없을 듯합니다.
근데 이번 강좌부터 <div></div>태그가 등장을 했는데,
이 태그는 사용할 때 주의하셨으면 합니다.
이 태그가 서로 짝이 맞지 않거나 엉키게 되면 레이아웃이 아주 엉뚱하게 나오게 됩니다.
반드시 유의해서 사용하셨으면 합니다. -
강의 잘 들었습니다. 감사합니다.
-
레이아웃을 많이 안해봐서 그런건지 체감상 그리드라는 기능이 편리하고 좋다는 느낌이 퍽 와닿지는 않지만 지금부터라도
자주 만들어보고 사용해봐야겠어요 더 궁금해서 검색도 해봤는데 허얼ㅋㅋㅋ; 그리드에 대한 개념과 기능들이 엄청 많이 있네요 재밌습니다! -
#grid{
display : grid;
grid-template-columns : 200px 1fr;
}
<div id = "grid">
<div> </div>
<div> </div>
</div> -
180209 감사합니다! -
질문이 있습니다! 지금 atom 을 사용중에 있는데 fr 이 안먹히는것? 같아요. 그 대신 auto 를 사용하니까 적용은 되는데
1fr 2fr 처럼 앞에 숫자를 붙이는 것은 안되더라구요! 혹시 안대는 이유가 있을 까요? ..
<style>
#grid{
border: 5px solid pink;
display: grid;
grid-template-columns: auto auto;
}
div{
border: 5px solid gray;
}
</style>
제가 사용한 코드입니다! -
parent ol 은 parent 의 모든 ol 자손이고요.
parent>ol 은 parent의 자식 중 ol 입니다.
선택자의 범위를 한번 찾아보시면 도움이 될 것 같아요. -
강의 잘 봤어요! 근데 저는 본문 안에도 또다른 ol이 들어가있거든요. 저는 '1.html 2.css ....'이 부분만 오른쪽에 줄을 만들고 싶어서 밑에 처럼 적용했는데, 본문에 있는 ol도 같이 적용이 되더라구요...ㅠㅠ 무슨 문제가 있는 걸까요?
#grid ol{
border-right: gray solid 1px;
margin: 0px;
width: 100px;
padding: 20px;
} -
또 질문이 있는데용! 2번째영상 마지막쯤에 정리 해주실때요! ol태그 따로 패딩값을 주셨었는데 이후에 id grid 아래있는 ol로 더 명확히 해주셨잖아여 근데 기존에 위쪽에 보시면 ol태그에 따로 스타일값을 border, margin, padding을 지정해줬었는데, 거기서 패딩값을 조절 안하고 따로 한번 더 padding-left로 주신 이유가 있나여?
-
두번째 영상에서 패딩값을 검사기능으로 조절할때요! 더블클릭 후에 조정해서 실시간으로 확인이 가능하다고 하셨는데,
저는 그게 안되서요ㅠㅠ 어떻게 하는건가여 elements탭에서 ol부분을 더블클릭해도 보라색으로 블랙크처리가 안되는데여ㅠㅠㅠ 쓰는 브라우저가 네이버 웨일이라 그런걸까옄 -
감사합니다 -
첫 번째 영상에서는 태그로 <div> <div>를 적용하셨는데
그리드를 두 번째 실습 영상에서 적용할 때에는 태그에 <ol>, <div>가 나오는 부분이 잘 이해되지 않습니다.
태그가 무엇이든 상관없이 그리드를 적용하면 <태그 1> <태그 2>로 읽어 그리드가 동작하는 건지 궁금합니다.
하나 더, CSS 본문에 <p>태그가 적용돼 있는데 p 태그를 없애도 똑같은 화면이 나오는지, 또 p태그 대신 div 태그를 넣어도 똑같은 화면이 나오는지도 궁금합니다. 결국 p와 div의 차이에 대한 질문이라고 생각하는데, 전에 일러주신 것 같지만 한 번 더 알려주시면 감사하겠습니다. -
감사합니다
-
18-01-14 1일차 - 7번째 강의
수강완료!
Grid라는 CSS부분이 정말 편리하네요 ^_^
CSS의 디자인이라는 부분이 막막하고 복잡하다고 생각했는데,
강의를 들으면서 심플하고 재미있어졌어요~ 감사합니다. -
많이 배우고가요 항상 감사히 보고있습니다^^
-
브라우저가 아직 지원하지 않는 경우 작동하지 않아요~
-
이상하네요 크롬이외에 엣지나 IE11에서 작동을 안하네요 제가 잘못 사용한걸까요
-
고맙습니다 ^^ -
사파리에서는 박스모델을 조정하는 기능이 없나요?
-
설명 정말 잘해주셔서 귀에 쏙쏙 들어옵니다! 좋은 강의 감사합니다ㅎㅎ
-
감사합니다
-
그리드에 대해서 명확이 알게되었습니다.
감사합니다. -
그리드 대신에 float란 기능이 있어요. 생활코딩-클라인언트-css수업중에 float란 수업에 설명 되어 있네요.
#grid ol이나 ol태그에 id값을 주나 결국 grid란 아이디 밑에 있는 ol태그만을 가리키기 때문에
별차이 없지 않을까요? -
더블클릭 후 방향키 위아래로 조정할 수 있어요.
-
그리드의 호환성이 그리 높지 않은편인것같은데요 ( IE 11 버전 이하는 지원이 안되는것 같습니다)
차선책으로 어떤 css 속성이 있을까요?
그리고 ol 태그가 본문에도 나올 수 있으니 #grid ol 로 선택하셨는데 그렇게 하더라도
#grid가 본문까지 묶어버렸기 때문에 ol 태그만 id 값을 다시 줘서 포함하는게 좋을까요? -
혹시 크롬에서 검사에 들어가보면 padding같은 값을 실시간으로 값이 바뀌는 것을 보고싶을 때,
값을 더블클릭을 하면 된다 하셨는데, 안되네요 ㅜ 다른 이유가 있나요? -
차근차근하게 설명해주셔서 이해가 잘되네요!! 감사합니다.
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
