그리드의 기본 사용법
강의
소스코드
그리드 써먹기
강의
댓글
-
재밌네요! -
아.. 오늘 그리드 배운다고 열심히 삽질 했습니다. ㅋㅋㅋㅋ
5시간 넘게 걸린듯.. ㅠㅠ 줄 하나 만드는게.. 이렇게 어려울줄이야.. ㅎㅎ
재밌습니다! 열심히 따라가겠습니다!!
https://prokjun.github.io......tml -
완료 -
완료
-
web브라우져를 스윙으로 사용하다 보니, 처음에 grid문법을 브라우져가 못 읽어서 애를 먹었네요. 크롬으로 하니까 잘 됩니다^^* 오늘도 한걸음 내딛었네요. 감사드려요~
-
감사합니다.
-
html css 하실떄 크롬으로하시면 대부분다됩니다
-
웹브라이저를 몇을 써야할까요?? 검사를 했을때 화면처럼 보이지 않아서요.
-
소스코드 그대로 했는데도 navigation 이랑 article 이 위아래로 나와요..
옆으로 나오게 하려고
#grid{
border:5px solid pink;
display:grid;
grid-template-columns: 150px 1fr;
}.. -
감사합니다.
-
style에 있는 ol과 #grid ol은 결국 같은 ol을 가리키고 있는게 아닌가요?
-
더블클릭하고 숫자암거나 입력하고 방향키로 왔다리갔다리하면돼요
-
코드 복붙했는데 이상하게 나오는데 왜그런지를 모르겠어요 ㅠㅠ
-
로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다.
로렘 입숨은 전통 라틴어와 닮은 점 때문에 종종 호기심을 유발하기도 하지만 그 이상의 의미를 담지는 않는다. 문서에서 텍스트가 보이면 사람들은 전체적인 프레젠테이션보다는 텍스트에 담긴 뜻에 집중하는 경향이 있어서 출판사들은 서체나 디자인을 보일 때는 프레젠테이션 자체에 초점을 맞추기 위해 로렘 입숨을 사용한다.
로렘 입숨은 영어에서 사용하는 문자들의 전형적인 분포에 근접하다고도 하는데, 이 점 때문에 프레젠테이션으로 초점을 이동하는 데에도 도움을 준다.
- 위키피디아 -
조금씩 힘들지만 그래도 해보고 있습니다! -
우와 점점 복잡해지네요.. 그래도 재밌어요ㅋㅋ
-
와 강의 듣는데 이렇게 이해가 쏙쏙 들어오다니.. 정말 감사합니다!!! 학교에서 가볍게 배우고 지나쳤는데 기초부터 차근차근 배워가니 많은 도움이 됩니다! 감사합니다 :)
-
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의 차이에 대한 질문이라고 생각하는데, 전에 일러주신 것 같지만 한 번 더 알려주시면 감사하겠습니다. -
감사합니다
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
