그리드의 기본 사용법
강의
소스코드
그리드 써먹기
강의
댓글
-
CSS 진짜 재밌네요. CSS 첫강부터 여기까지 한번에 들었어요. 이왕 완강까지 하고싶지만 시간이 너무 늦어서 내일^^
display:grid;가 안 먹어서 왜 그런가 한참 고민했던게 알고보니 gird로 오타가 났었더라구요.... 뭐가 문제인가 많이 답답했는데 오타... ㅎㅎ
덕분에 차근차근 배우고 있습니다^^! 좋은 강의 감사해요! -
완료 -
감사합니다. -
grid 태그 쓸때 띄워쓰기 없이 그냥 공간을 그냥 채웠더니 태그가 깨지더라구요. (바깥쪽 div태그가 감싸지지 않는)
원인을 찾다가 레퍼런스랑 차이가 뭐지.. 한참 들여다보다가 띄워쓰기가 있네 하며 넣었더니 작동하네요.
프로그래머들의 고충을 일면 엿 본 기분이었습니다. -
와 개재밌어
-
맥에서 아톰으로 열심히 공부중입니다.
style 태그 후 grid의 g를 치면서 자동완성을 기대하는데 grid와 그 이하의 내용이 자동완성에 나오질 않습니다.
밑에서 id 선언부터 안먹히는(?) 느낌인데요,
에디터 버그인가요??
껐다 키면 되긴 하는데 다른 해결방법이 있는지 여쭤봅니다..
<style> ****이 부분도 처음에는 style에 밑줄이 없습니다.에디터를 재시작하면 밑줄도 생기고 자동완성도 됩니다..
#grid{
border:5px solid pink;
display:grid;
gri ****이부분입니다. g만 쳐도 자동완성 리스트가 나와야 하는데 나오지 않네요****
}
div{
border:5px solid gray;
}
</style>
</head>
<body>
<div id="grid"> ****id 색깔과 #grid 색깔이 동일하지 않습니다.
<div>NAVI</div>
<div>ARTIC</div>
</div>
</body>
</html> -
잘들었습니다 -
atom에서 첫줄에 html입력하니 기본 구조가 작정되네요.^^
-
감사합니다:)
-
감사합니다.
-
감사합니다. 항상 div를 정확히 왜 쓰는지 이해하기 어려웠고, 웹을 만드는 순서를 어떻게 잡아야 할 지 막막했는데 수업을 듣고 제가 원하는 그리드에 맞춰서 유동성 있게 화면을 구성할 수 있다는 확신이 들었습니다. 알차고 좋은 수업 정말 감사합니다! :)
-
감사합니다.
-
코딩 그대로 복사했는데. 문장이 옆으로 안나오고 링크밑으로 문장이 나오시는 분
웹 브라우저 chrome으로 웹창 띄우시면 되네요 ....호환의 문제인듯. -
좋네요.
-
<p> .....</p> 태그로 묶어보시는건 어떨까요 문단을?
처음 태그 보니 본문이 문단으로 묶여있지 않아서 그런거 같기도 하네요. -
완료
-
부모태그 <div>에 id값을 주기위해 gird를 쓰는거라면, id="gird"에서
grid 대신에 아무거나 대입해도 상관없는지 ?
id값이외에는 어떤 기능도 없는것인지?
가 궁금합니다.
마찬가지로, article도 같은 경우로 쓰이는것인지 궁금해요 ! -
View -> Toggle soft wrap 기능을 활용하면 화면 크기에 맞게 줄바꿈이 자동으로 적용됩니다.
-
제가 다시 해봤는데 HTml을 그냥 적어서 자동완성으로 태그를 만든 후에 다시 하니까 이 현상이 사라졌습니다.(그전에는 일일이 html태그부터 body태그까지 직접 입력했습니다.) 이유를 아시는분 있나요?
-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<tilte></title>
<style>
#grid{
border:5px solid pink;
display:grid;
grid-template-columns:150px 1fr;
}
div{
border:5px solid gray;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>a;owehvnlaksndf;oaiwjhefl;kajsdfl;kajhweoifjaslkdfnl;awihflaiwehfl;asihdflkashfoi;aw;ehflkasbhdf;oiawhflkashdfl;iashfl;aihseflkasndf;oliahweflo;ijsdlk;fhawo;iefhlaksdbf;lasdifehvnlaksndf;oaiwjhefl;kajsdfl;kajhweoifjaslkdfnl;awihflaiwehfl;asihdflkashfoi;aw;ehflkasbhdf;oiawhflkashdfl;iashfl;aihseflkasndf;oliahweflo;ijsdlk;fhawo;iefhlaksdbf;lasdifehvnlaksndf;oaiwjhefl;kajsdfl;kajhweoifjaslkdfnl;awihflaiwehfl;asihdflkashfoi;aw;ehflkasbhdf;oiawhflkashdfl;iashfl;aihseflkasndf;oliahweflo;ijsdlk;fhawo;iefhlaksdbf;lasdifehvnlaksndf;oaiwjhefl;kajsdfl;kajhweoifjaslkdfnl;awihflaiwehfl;asihdflkashfoi;aw;ehflkasbhdf;oiawhflkashdfl;iashfl;aihseflkasndf;oliahweflo;ijsdlk;fhawo;iefhlaksdbf;lasdifh</div>
</div>
</body>
</html>
질문있습니다 . 이렇게 코드를 따라 작성했는데 이고잉님 화면에서는 두번째 div태그의 장문의 글이 줄바꿈이 되시던데 저는 똑같이 작성했는데도 줄바꿈이 되지 않더군요 글이 짤립니다. 왜그럴까요 -
완료
-
정말 형님강의 없었으면 어쩔 뻔 했나 싶습니다.
고잉형님
같은 이씨라는게 자랑스럽습니다.
감사합니다! -
완료!감사합니다!
-
다듬어 지고 있네요! 열심히 하겠습니다! @
-
재밌네요! -
아.. 오늘 그리드 배운다고 열심히 삽질 했습니다. ㅋㅋㅋㅋ
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라고 잘못 쓰고 왜 안 되지?? 하고 있었네요 ㅎㅅㅎ
오늘도 강의 잘 봤습니다 감사합니다!
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
