19:30 - css grid 20:29 - display: grid / grid-template-colums: 40% 60% 21:00 - 4: 6 비율일 때 % 보다 4fr 6fr을 더 많이 사용한다. 21:19 - fr로 사용하면 좋은 이유 grid-gap: 1rem / 화면에 맞게 gap 간격이 생기는데 %를 사용하면 가로 스크롤이 생겨버림 22:09 - grid-templat-columns: 1fr 1fr 1ft === gride-template-columns: repeat(3,1fr) (1fr은 colums수 *3) colums 3개 23:02 - 고정하고 싶은 영역이 있다? grid-template-columns: 200px 1fr => 첫 번째 column 200px 고정 23:31 - grid의 정석 예제 24:49 - 칸에 어떤 content가 들어있든 grid의 높이값은 같게 하고 싶을 때? grid-auto-rows: minmax(200px, auto) 27:10 - grid 한 칸 내에 위치 지정/ justify-items: start 28:25 - align-items: center 29:13 - 5번 grid만 따로 정렬하고 싶을 때 30:53 - 이 grid의 축은? 31:46 - grid-column: 1/4 축의 1부터 4까지 선택된 그리드의 영역이 차지하게 해주세요 33:26 - grid-column: 3 3번쨰 축으로 이동 grid-row: 2/4 세로 축 2부터 4까지 차지 34:42 - 다른 영역도 덮을 수 있는 grid 속성 35:25 - 전체적인 변경은 container에서 지정 Stamped with love, LINER getliner.com/youtube
잘보고 갑니다! 저 그런데 요즘 공부하는중에 js의 canvas를 알게 되었는데요 캔바스를 배울 메리트가 있을까요? 몇몇 해외유튜버들의 동영상을 봤는데 사용법은 쉬워보였는데 만들떈 사인 코사인 써가면서 하는걸보니 머리가 아프더라구요 그런데 또 배워두면 괜찬을꺼같기도해도 여쭙니다
studiomeal.com/ 이건 제 웹사이트인데요, 이 우주가 바로 캔버스로 만든거에요. 일반적인 웹개발에서 필요한 경우는 많지 않고, 독특한 UI 개발이나 그래픽처리, 미디어아트, 게임, 3D, 비디오 등에 관심이 있다면 공부하시면 좋습니다. API 자체가 꽤 로우레벨이라 의미있는 작업물을 만들기까지는 학습량이 좀 있는 편이고요.. 산수 공부도 조금 하시는게 좋고요^^; 위에 말씀드린 분야 쪽으로 깊게 파보고 싶으시면 공부하시는 걸 추천드리고요, 그게 아니라면 굳이 안 하셔도 상관없습니다~ 필요하실 때 하셔도 괜찮아요.
다른 영상에 비해 훨씬 이해하기가 쉽네요. 감사합니다. 근데 모바일은 대부분 새로운 브라우저니 다 지원하지만.. 데탑에는 익스플로러(v.11) 사용자들이 아직 많은듯 한데(국내 기준 20%쯤 되는..) 현업에서 익스 사용자를 고려해서 작업하나요? 그럼 데탑용은 그리드는 못쓸거 같거든요.
네 보통 전체 페이지의 큰 골격을 그리드로 짜고, 부분 부분 요소들을 플렉스로 많이 합니다. 물론 정답은 없고요, 형태에 따라 적절한걸 골라 쓰시는게 좋겠지요~ studiomeal.com 이 1분코딩 웹사이트가 그리드와 플렉스를 섞어 만들었으니 개발자도구로 한번 살펴보세요~ 사이트에 튜토리얼 가보시면 플렉스와 그리드를 자세히 정리해둔 포스트도 있습니다~
많이 배웠습니다!! 근데 궁금한게 있는데 div id="wrapper"로 제일 먼저 body를 감싸주고 나서 내부에서는 header, section. footer 이렇게 사용하고 있는데 얘네들한테는 grid, flex가 적용이 안되네요. grid와 flex는 div 영역안에서만 적용이 되는 아이들인가요?
셀의 크기를 말씀하시는거죠? 셀 크기는 기본적으로 컨테이너에서 정하기때문에 같은 행이나 열이라면 일괄적으로 적용이 되고..혹시나 어떤 원인으로 크기가 늘어나거나 한다면 해당 트랙은 같이 적용된다고 생각하시면 됩니다. 테이블에서 td들이랑 비슷하다고 생각하셔도 좋을듯해요~
안녕하세요. CSS 입문자입니다. 1분코딩 확장팩 동영상을 보면서 하나하나 배워가고 있습니다! 동영상을 보면서 따라하던 도중에 CSS 소스 상단에 초기화 코딩이 들어가 있던데, 이 초기화코딩은 디자이너 개인마다 다른건가요~? 필수로 초기화 해야하는 것들은 무엇이 있는지 알 수 있을까요?
생활코딩이랑 유튜브랑 여러가지 봤는데, CSS Grid, Flexbox 함께 설명해주셔서 감사합니다. media query 로 해상도별로 조정하고, CSS Grid 로 레이아웃은 잡고, DB 에서 출력하는 목록데이터는 Flex 로 하려고 하는데요. 해상도별로 보여주는 A, B, C, D 4컬럼 중에 A, B, C 컬럼만 보여주고 싶을때 D 컬럼은 그냥 display: none 으로 주면 될까요? 다시한번 감사합니다^^!
네~ 정확한 구조를 몰라서 정답을 말씀드릴 수는 없지만, 기본적으로 display: none을 이용해서 조정하시면 됩니다. DB에서 가져온 데이터가 표 형태로 정리가 된다면 을 사용하시는게 제일 바람직하기는 합니다. 반응형 테이블 처리에 대한 내용은 iropke.com/archive/data-table.html 여기 링크에 정리가 잘 되어있더라고요~ 영상 보아주셔서 감사합니다 :)
답글 달아주셔서 감사합니다. 소개해주신 링크에서 화면이 줄어들면 수평 스크롤이 생기는 방식이나, Filamentgroup 에서 만든 Tablesaw 형태가 마음에 들지만, 요즘은 테이블을 쓰지 않는다고 해서 FlexBox 를 컬럼수만큼 만들어서 테이블표처럼 만들어 놓고, 해상도에 따라서 특정컬럼은 display:none; 으로 하는거 말고 다른 방법이 있는지 찾다가 답글 확인했습니다. 좋은 동영상강의 만들어 주셔서 감사합니다^^!!!
아! 감사합니다. 그럼, 해상도에 따라서 table 의 td 속성에 display: none; 을 주면 될까요? table 속성에는 특정 thead 나 th 아래의 td 가 서로 연관이 없어서 미디어쿼리에서 각각 따로 display: none; 을 주면 될까요? 혼자 하다보니 SNS 에서 하는 말들을 보고, 대신 Flexbox 로 을 대용하려고 했는데 해상도에 따라 보여주는 표의 컬럼을 줄이는게 왜 이렇게 어려울까 힘들다 생각중이었습니다^^;;
저번에 이어서 복습 도중에 궁금한 사항이 있어서 질문드립니다. display:flex 설정된 부모 div 태그의 자손 block 요소들이 flex-direction의 값에 따라 세로, 가로로 배치되는 것을 볼 수 있었는데요 일반적으로 row = 행, column = 열을 뜻하므로 row로 설정시 가로로 자손 div 태그가 배치되고 column으로 설정시 세로로 배치가 되어야 할 것 같았는데 반대로 구성이 되더라구요! 혹시 축의 기준이 있는건가요~?
네 그게 이름때문에 참 헷갈리죠~ㅎㅎ 제가 영상에서 설명드릴 때 사용한 “꼬치” 개념으로 생각하시면 덜 헷갈리실거에요. 꼬치막대기의 방향으로 생각하면 자연스럽게 받아들여 질거에요 정렬도 그렇구요 ㅎㅎ 이름이 그렇게 지어진 이유는 ‘flexible’한 방향, 늘어나는 방향을 기준으로 한게 아닐까 생각되는데 정확히는 모르겠네요 ㅋㅋ
정성스런 답변 감사합니다. "꼬치" 막대기로 생각해보니 이해가 가네요! flex-direction: row 인 경우 -> "꼬치를 '가로'로 꽂을꺼야 그에 맞게 배치해" flex-direction: column 인 경우 -> "꼬치를 '세로'로 꽂을꺼야 그에 맞게 배치해" 라고 이해하면 될 것 같네요~
2020년 2월, Flex와 Grid를 마스터하고 실무에서 활용할 수 있는 새 강좌를 출시했습니다.
이거 하나로 끝내세요!😁
www.inflearn.com/course/css-flex-grid-제대로-익히기
📌
01:00 .container flex
09:30 .item flex
15:45 flex에 숫자를 넣는 의미
17:40 정렬
19:20 그리드 기초
인터랙티브 웹 제대로 시작하기! 온라인 강의를 출시했습니다😁
www.inflearn.com/course/interactive_web
와.. 무슨 돈내고 듣는 인강보다 답답해서 들어왔는데 돈내고 보는거보다 정리 훨신 더 잘해주시네요; 감사합니다
와 레알 최고의 강의다.... 감사합니다
저도 감사합니다~~
@@studiomeal 😅
그리드 공부하다가 여기까지 왔네요 ^^ 많이 배우고 갑니다~~
앗 안녕하세요~~ 감사합니다^^
리베하얀 어?리베하얀님꺼두 동영상 잘보구 잇서요!!😆👍
정말..유용 그 자체네요... float의 노예였는데..ㅠㅠ감사합니다
좋습니다 따봉 드립니다
설명이 너무 감동적이에요... 울뻔했어요 감사합니다
css flex 긴가민가 했었는데 오뎅 꼬치 비유에 무릎을 탁 쳤습니다!! 좋은 영상 감사드려요!
10번 반복해서 봐야하는 그리드 레이아웃 !! 좋은 강의 감사해요 ♥
감사합니다^^
말이 필요없어요 그냥 최곱니다 ㅠㅠ
아이고 감사합니다😁
다시 복습합니다~ 인프런 강의도 감사합니다~~
19:30 - css grid
20:29 - display: grid / grid-template-colums: 40% 60%
21:00 - 4: 6 비율일 때
% 보다 4fr 6fr을 더 많이 사용한다.
21:19 - fr로 사용하면 좋은 이유
grid-gap: 1rem / 화면에 맞게 gap 간격이 생기는데 %를 사용하면 가로 스크롤이 생겨버림
22:09 - grid-templat-columns: 1fr 1fr 1ft === gride-template-columns: repeat(3,1fr)
(1fr은 colums수 *3) colums 3개
23:02 - 고정하고 싶은 영역이 있다?
grid-template-columns: 200px 1fr
=> 첫 번째 column 200px 고정
23:31 - grid의 정석 예제
24:49 - 칸에 어떤 content가 들어있든 grid의 높이값은 같게 하고 싶을 때?
grid-auto-rows: minmax(200px, auto)
27:10 - grid 한 칸 내에 위치 지정/ justify-items: start
28:25 - align-items: center
29:13 - 5번 grid만 따로 정렬하고 싶을 때
30:53 - 이 grid의 축은?
31:46 - grid-column: 1/4
축의 1부터 4까지 선택된 그리드의 영역이 차지하게 해주세요
33:26 - grid-column: 3
3번쨰 축으로 이동
grid-row: 2/4
세로 축 2부터 4까지 차지
34:42 - 다른 영역도 덮을 수 있는 grid 속성
35:25 - 전체적인 변경은 container에서 지정
Stamped with love, LINER getliner.com/youtube
이 댓글 보고 너무 신기해서 바로 LINER 크롬 확장 다운 받았어요!!
너무 좋은 기능이네요! 감사합니다 :-)
초보의 눈높이에서 하나하나 친절히 알려주셔서 이해하기 좋습니다. 감사합니다
감사합니다^^
설명 너무 깔끔하다 진짜 대박이에요 ㅠ.ㅠ
감사합니다^^
최고!!최고!!최고!!최고!!최고!!최고!!최고!!최고!!최고!! 넘~~넘~~감사합니다. 진짜 최고!!!!!!
인생강의입니다
두가지 아주 쉽게 강의해 주셔서 감사합니다.
Richie Kim 감사합니다^^
오 편집 신박합니다 ^^
19분 25초부터 그리드시작 ㅎ
멋진 강의 , 감사히 잘 듣고 보고 갑니다
즐거운 하루 하루 되세요 ^^
종해님도 즐거운 하루하루 보내세요!
이렇게 이해하기 쉬운거였다니!
강의 감사합니다 그냥 최고네요
감사합니다^^
19:31 flex 감사합니다 ! 정말 쉽게 설명해주시네요 ㅎㅎ
감사합니다^^
강의 감사합니다. 1분코딩 홈페이지 정말 멋지네요!
감사합니다^^
와.. 제가 flexbox랑 gird를 이해하는 날이 오네요 ㅎㅎㅎ 감사합니다. 빨리 응용해보고 싶네요 ㅎㅎ
익숙해지시면 코딩이 정말 편해질거에요~ 영상 봐주셔서 감사합니다^^
차근차근 너무 잘 가르쳐 주셔서 많은 도움됩니다~감사합니다~
봐주셔서 감사합니다! ^^
학원에서 수강을 받았으나 제대로 배우지 못하고 나왔는데 여기서 제대로 핵심만 배워서 너무 좋습니다! 좋은 영상 감사합니다.
힘나는 댓글 감사합니다! :)
혹시 실례가 안된다면 반응형 이미지슬라이드 창을 만드는법도 영상으로 찍어주실수 있나요? 시간이 남으신다면!!!😃
선생님.. 첫 강의입니다.. 정말 깔끔하고 자세한 설명....너무 짱이십니다요...ㅠㅠㅠㅠ저의 사수가 되어 주세여...ㅠㅠㅠㅠㅠㅠ
재밋게 잘 봤습니다 !
정말 감사합니다! :)
잘보고 갑니다!
저 그런데 요즘 공부하는중에
js의 canvas를 알게 되었는데요 캔바스를 배울 메리트가 있을까요?
몇몇 해외유튜버들의 동영상을 봤는데 사용법은 쉬워보였는데
만들떈 사인 코사인 써가면서 하는걸보니 머리가 아프더라구요
그런데 또 배워두면 괜찬을꺼같기도해도 여쭙니다
studiomeal.com/
이건 제 웹사이트인데요, 이 우주가 바로 캔버스로 만든거에요.
일반적인 웹개발에서 필요한 경우는 많지 않고, 독특한 UI 개발이나 그래픽처리, 미디어아트, 게임, 3D, 비디오 등에 관심이 있다면 공부하시면 좋습니다.
API 자체가 꽤 로우레벨이라 의미있는 작업물을 만들기까지는 학습량이 좀 있는 편이고요.. 산수 공부도 조금 하시는게 좋고요^^;
위에 말씀드린 분야 쪽으로 깊게 파보고 싶으시면 공부하시는 걸 추천드리고요, 그게 아니라면 굳이 안 하셔도 상관없습니다~ 필요하실 때 하셔도 괜찮아요.
그리드 너무 헷갈렸는데 잘 정리해주셔서 감사해요!! 이해가 딱!! 됐습니다 히히
css부터 제대로 알아보고 할 걸..html css 대충만 알고 바로 react하니까 css에 nth-child, grid 이런 개꿀 기능 있는 줄도 모르고 div 잔치
32:39 왜 안돼 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 아 인간미 넘치시네요
ㅋㅋㅋㅋㅋ
좋은 정보 감사합니다
설명 진짜 쉽게 잘하시네요! 감사합니당
저도 감사합니다^^
쉽게 배워갑니다
항상 헷갈릴 때마다 들어와서 영상 보는데 처음 댓글남겨요. 감사합니다
김동언 봐주셔서 감사합니다^^
감사합니다!!! 단 번에 이해했습니다!
왜 이렇게 쓰는지 모르고 그냥 웹페이지 서칭하면서 이케이케 쓰는거구나 했는데 원리를 일깨워 주시니 너무 감사합니다!👏
감사합니다^^
헐..대박 여백의 비였구나... 감사합니다
저도 여백의 비인거 알고 깜놀...감사합니다. 1분코딩님
오 정말 flex하게 잘 설명하셨네요 감사합니다^^
깔끔하고 알기 쉽게 설명해주셔서 감사합니다! 오뎅꼬치! ㅎㅎ 아주 좋은 비유네요! 잘 보고 갑니다~
엥 이렇게 좋아요?
딴 display 안 쓰고 이거만 쓰면 안 되나요?
그리드 진짜 잘 설명 하셨네여 ㅎㅎ 배우고 갑니다.~
거의 미쳤다
ㅋㅋㅋㅋㅋ
잘봤습니다.
고맙습니다.
정말 명강의 입니다. 감사합니다 : )
Min Kyu Park 봐주셔서 고맙습니다~ :)
와 flex때문에 너무 골치아팠는데 ㅠㅠ 이렇게 쉬운설명을.. 감사합니다 구독누르고 갈게요!
감사합니다 ㅎㅎ
다른 영상에 비해 훨씬 이해하기가 쉽네요. 감사합니다.
근데 모바일은 대부분 새로운 브라우저니 다 지원하지만..
데탑에는 익스플로러(v.11) 사용자들이 아직 많은듯 한데(국내 기준 20%쯤 되는..)
현업에서 익스 사용자를 고려해서 작업하나요? 그럼 데탑용은 그리드는 못쓸거 같거든요.
한계는 있지만 쓸 수 있는 방법은 있습니다. 1분코딩 웹사이트(studiomeal.com) 레이아웃이 그리드로 만든건데, IE11에서도 잘 보인답니다~
너무 이해 잘되요 감사합니다!!
감사합니다^^
좋은 강의 감사합니다~!!정말 많이 도움됐어요!!
저도 감사합니다!
너무 잘보았습니다 감사드립니다
잘 보아주셔서 감사합니다^^
우와..우....우와.....감탄만 나오네요 ...
근데 justify-content랑 justify-items이랑 겁나 헷갈리네요 ㅠㅠ 뭐가 다른건지
direction 칼럼으로 제목이랑 인풋을 가운데 정렬을 하고싶은데 align-items 센터까지만 먹고 justify-content는 먹통이네요.. 이유가 있을까요..?
이해가 잘되네요
주석으로 처리해주시면서. . . .
같은 방법으로 여러번 연습해볼랍니다
레이아웃은 flex,grid 만 익숙해지면 걱정안해도 되겠습니다. 감사합니다
감사합니다^^
질문이있어요! 한 프로젝트에서 grid 와 flex를 섞어서도 사용하나요? 이 영상 보고나니까 플렉스보다 그리드가 뭔가 이해가 잘 되네요ㅎㅎ 숫자로 딱딱 보여서 그런지
네 보통 전체 페이지의 큰 골격을 그리드로 짜고, 부분 부분 요소들을 플렉스로 많이 합니다. 물론 정답은 없고요, 형태에 따라 적절한걸 골라 쓰시는게 좋겠지요~
studiomeal.com 이 1분코딩 웹사이트가 그리드와 플렉스를 섞어 만들었으니 개발자도구로 한번 살펴보세요~ 사이트에 튜토리얼 가보시면 플렉스와 그리드를 자세히 정리해둔 포스트도 있습니다~
@@studiomeal 상세한 설명 감사드려요!!
많이 배웠습니다!! 근데 궁금한게 있는데 div id="wrapper"로 제일 먼저 body를 감싸주고 나서 내부에서는 header, section. footer 이렇게 사용하고 있는데 얘네들한테는 grid, flex가 적용이 안되네요. grid와 flex는 div 영역안에서만 적용이 되는 아이들인가요?
test kwe 아뇨~ 태그 종류는 관계가 없습니다. 아마 코드 상으로 뭔가 안맞는 부분이 있어서 그럴거에요~
@@studiomeal 컨테이너에 display:flex로 선언하고 나서는 그 안에 감싸지는 태그들이 div, section, footer, header 이런거라도 문제없다는 거군요! 제가 뭔가 잘 못 짰나봅니다. 한번 다시 확인해볼께요. 답변 감사합니다.
안녕하세요 grid 항상 헷갈렸었는데 이렇게 쉽게 설명해주시다니 정말 감사합니다!! 강의를 듣던 중 궁금한것이 생겼습니다
grid-column과 grid-row를 할 때 각 item들의 크기가 다르면 어떤 item을 축으로 잡아서 1번 2번 3번.....을 정하나요?
셀의 크기를 말씀하시는거죠? 셀 크기는 기본적으로 컨테이너에서 정하기때문에 같은 행이나 열이라면 일괄적으로 적용이 되고..혹시나 어떤 원인으로 크기가 늘어나거나 한다면 해당 트랙은 같이 적용된다고 생각하시면 됩니다. 테이블에서 td들이랑 비슷하다고 생각하셔도 좋을듯해요~
안녕하세요. CSS 입문자입니다.
1분코딩 확장팩 동영상을 보면서 하나하나 배워가고 있습니다!
동영상을 보면서 따라하던 도중에 CSS 소스 상단에 초기화 코딩이 들어가 있던데,
이 초기화코딩은 디자이너 개인마다 다른건가요~?
필수로 초기화 해야하는 것들은 무엇이 있는지 알 수 있을까요?
th-cam.com/video/Zny5Vxqk6Mk/w-d-xo.html 이 영상의 11분 지점을 한번 봐보세요~ CSS 초기화에 대해 설명해 둔 부분이 있습니다^^
감사합니다!!
보다 쉽게 코딩 하기 위해서 Flex, Grid 를 사용하는거죠?
웹 공부를 시작하게 되었는데, CSS가 너무 어려웠는데 쉽게 잘 설명해주셔서 잘 배워갑니다!
도움이 되었다니 기쁩니다~~감사합니다:)
쇼핑몰에서 상품사진있고 가격있고 이런 아이템을 4개씩 여러줄로 배치하는게 플렉스를 쓰는건가요 아니면 그리드로 히는건가요? 보통 어떤걸 많이 쓰나요?
둘 다 쓸 수 있는데 grid는 브라우저 호환성때문에 아직 실무에서 많이 쓰이고 있지는 않습니다.
혹시 27:35에서 justify-items 할 때 위에 있는 노란색 두 개가 안 움직이는 이유가 있나요?
영상 감사합니다~
댓글 감사합니다!
정말감사합니다!css 공부중인데 많이 도움돼요. 다른 영상도 찾아 볼게요
감사합니다^^
CSS가 초보라 35분짜리 동영상을 3시간 이상을 보고나서야 겨우 어느 정도 이해했네요 목표가 개자이너인데 언제쯤 예쁜 레이아웃를 그릴수있게될지 막막하네요 ㅎㅎ
처음엔 어렵지만 기본을 알고 나시면 속도가 붙을거에요. 저도 디자인을 같이 하고 있는데, 디자인과 개발을 같이 하면 장점이 아주 많다고 생각됩니다. 화이팅이에요!
Thank you
grid에서 가로의 길이를 늘리는데 왜 row가 아니라 column인가요?? 어떻게 생각을 해야 될지 모르겠어서 헷갈리네요 ㅜㅜ
컬럼의 폭을 늘린다고 생각하시면 될거같아요~
긴시간 영상 감사합니다. (_ _) 덕분에 또 하나 알아갑니다!
영상 봐주셔서 고맙습니다 :)
ㅈ라인 ㅈ록 꺼졍!! 클리어픽스 꺼쪙!! 그리드 너어어으어오우윙무 좋습니다ㅠㅠ 괜히 ccs3서 떠오르는 최강자가 아니군요
강의도 넘 좋고 목소리도 좋으십니다! 근데 카메라를 화면밖에서 찍으면서 모니터가 가끔 흔들려서 좀 어지럽네요. 동영상 만들때 마우스 포인터를 강조하는 방식같은걸로 변경하시는것도 추천드려요~
네~ 요즘 온라인강의 코스를 만들고 있는데 말씀하신 방식으로 하고 있는데 괜찮더라고요.. 유튜브에도 적용해볼까 하고 있어요^^
칭찬과 의견 넘 감사드립니다!
주석 사라졌다가 생겼다 하는건 컨트롤+제트 쓰신거예요??
공백에 점 생기는것도 그렇고 에디터 특성인지 되게 편해보여요
아아 주석은 emmet 기능이네요...
emmet 설치 안하셔도 대부분의 에디터가 지원해요~ Ctrl + / 입니다~
생활코딩이랑 유튜브랑 여러가지 봤는데, CSS Grid, Flexbox 함께 설명해주셔서 감사합니다.
media query 로 해상도별로 조정하고, CSS Grid 로 레이아웃은 잡고, DB 에서 출력하는 목록데이터는 Flex 로 하려고 하는데요.
해상도별로 보여주는 A, B, C, D 4컬럼 중에 A, B, C 컬럼만 보여주고 싶을때 D 컬럼은 그냥 display: none 으로 주면 될까요?
다시한번 감사합니다^^!
네~ 정확한 구조를 몰라서 정답을 말씀드릴 수는 없지만, 기본적으로 display: none을 이용해서 조정하시면 됩니다.
DB에서 가져온 데이터가 표 형태로 정리가 된다면 을 사용하시는게 제일 바람직하기는 합니다.
반응형 테이블 처리에 대한 내용은 iropke.com/archive/data-table.html 여기 링크에 정리가 잘 되어있더라고요~
영상 보아주셔서 감사합니다 :)
답글 달아주셔서 감사합니다.
소개해주신 링크에서 화면이 줄어들면 수평 스크롤이 생기는 방식이나, Filamentgroup 에서 만든 Tablesaw 형태가 마음에 들지만, 요즘은 테이블을 쓰지 않는다고 해서 FlexBox 를 컬럼수만큼 만들어서 테이블표처럼 만들어 놓고, 해상도에 따라서 특정컬럼은 display:none; 으로 하는거 말고 다른 방법이 있는지 찾다가 답글 확인했습니다.
좋은 동영상강의 만들어 주셔서 감사합니다^^!!!
YUN-SEOK SEO 요즘 테이블을 쓰지 않는다는 건 레이아웃 틀을 잡을 때 쓰지 않는다는 이야기이고요, 은 여전히 표 형태의 데이터를 뿌려주는 아주 좋은 방법입니다~
아! 감사합니다.
그럼, 해상도에 따라서 table 의 td 속성에 display: none; 을 주면 될까요?
table 속성에는 특정 thead 나 th 아래의 td 가 서로 연관이 없어서 미디어쿼리에서 각각 따로 display: none; 을 주면 될까요?
혼자 하다보니 SNS 에서 하는 말들을 보고, 대신 Flexbox 로 을 대용하려고 했는데 해상도에 따라 보여주는 표의 컬럼을 줄이는게 왜 이렇게 어려울까 힘들다 생각중이었습니다^^;;
부트스트랩 수평스크롤이 제일 따라하기 쉬울거 같아서 이거로 하려고 합니다.
www.w3schools.com/bootstrap4/bootstrap_tables.asp
감사합니다^^!
그리드는 한번도 안써봐서 처음 접해봤는데 너무나 쉽게 이해했습니다. 혼자공부했다면 아마 2/4 보고 왜 50% 안쓰고 이러고있지?? 이러면서 삽질했을거같습니다!! 감사합니다 ㅠㅠㅠ
앗 미남님이다 ㅋㅋㅋ
좋은영상 감사합니다. :^)
저도 감사합니다 :)
실제 웹프로그램에서 가장 많이 사용하고 추천되는 Flex와 Grid 속성은 어떤 것들인가요?
실제 모두다 사용하지는 않을 듯 해서요.
필요에 따라 적절한걸 사용하겠지만, 저같은 경우 flex의 align-items, justify-content, flex(grow) 등을 자주 쓰게 되더라고요 :)
@@studiomeal 답변감사해여
좋댓구알 박고갑니다
저번에 이어서 복습 도중에 궁금한 사항이 있어서 질문드립니다.
display:flex 설정된 부모 div 태그의 자손 block 요소들이
flex-direction의 값에 따라 세로, 가로로 배치되는 것을 볼 수 있었는데요
일반적으로 row = 행, column = 열을 뜻하므로
row로 설정시 가로로 자손 div 태그가 배치되고
column으로 설정시 세로로 배치가 되어야 할 것 같았는데
반대로 구성이 되더라구요!
혹시 축의 기준이 있는건가요~?
네 그게 이름때문에 참 헷갈리죠~ㅎㅎ
제가 영상에서 설명드릴 때 사용한 “꼬치” 개념으로 생각하시면 덜 헷갈리실거에요.
꼬치막대기의 방향으로 생각하면 자연스럽게 받아들여 질거에요 정렬도 그렇구요 ㅎㅎ
이름이 그렇게 지어진 이유는 ‘flexible’한 방향, 늘어나는 방향을 기준으로 한게 아닐까 생각되는데 정확히는 모르겠네요 ㅋㅋ
정성스런 답변 감사합니다.
"꼬치" 막대기로 생각해보니 이해가 가네요!
flex-direction: row 인 경우 -> "꼬치를 '가로'로 꽂을꺼야 그에 맞게 배치해"
flex-direction: column 인 경우 -> "꼬치를 '세로'로 꽂을꺼야 그에 맞게 배치해"
라고 이해하면 될 것 같네요~
@@henu7717 늘어나는 방향이라는 말이 적합한듯 합니다. :)
flex-direction 이니까 direction(방향)
즉, row 방향으로 적용 / column 방향
안녕하세용?
쓰시는 에디터가 뭔지 여쭤봐도 될까요?
잘보고있습니다 ~~~^^
Sublime Text 입니다~ 이건 유료인데, 비슷한 에디터인 Atom이나 Brackets는 무료이면서도 아주 좋습니다. 감사합니다~~^^
콜로소에서 듣고 복습개념으로 다시 보는데 너무 좋아요.. 콜로소 결제가 하나도 아깝지 않은 강의 실력..!!!!!
전에 봤을때 이게 좋은건 알겠는데 뭔지 모르겠더라구요 ㅎ 지금 다시 보니 눈에 들어오네요 ㅎㅎ 정말 명강의입니다 ㅎ 감사합니다 ㅎ
정말 열심히 하시는 것 같아요 ㅎㅎ 감사합니다~~
그리드 레이아웃 아이템 높이는 좌우 아이템 높이에 영향받는데 혹시 pinterest 랑 같은 레이아웃 만들 수 있을까요? 동영상 강좌에 마크업가지구요 ㅎㅎ
CSS grid만으로 가능하냐는 질문이겠지요? 불가능하고요~ 아시는대로 스크립트로 위치계산이 필요합니다 :)
@@studiomeal 그렇군요 ㅎㅎ 답글 감사합니다. 즐거운 추석 보내세요~
다 좋은데 배경음악은 없었으면 좋겠어요ㅜ
너무 산만하게 느껴짐...
도움 많이 받았습니다. 고맙습니다.
thanks
하 감사합니다
와 개쩐다 어지간한 학원보다 낫네
1분코딩이라 봤는데 35분이 흘러갔다.
ㄷㄷㄷㄷㄷ ;;;;;
편리하기는 하지만 아직까지는 호환문제가 있을꺼같은데 많이 쓰이나요..?
프로젝트에 상황에 따라 다릅니다. 좀더 호환 범위가 넓은 flexbox는 실무에서도 많이 쓰인지 좀 됐습니다. caniuse.com 같은 곳에서 지원여부 체크해보시고 프로젝트에 적합 여부를 판단하고 사용해야겠지요~
1분코딩 확장팩 답글감사합니다 ㅎㅎ
flex-basis가 %이면 무엇을 기준으로 %값을 가지나요 ?
flex container의 width를 기준으로 생각하시면 됩니다. flex-wrap: wrap이 설정된 상태에서 flex-basis가 50%라면 두개씩 배치된다고 보시면 돼요~
26:51
Thack 28:41
그리고 똑같이 적용했는데 크롬에서는 적용되는데 인터넷 익스에서는 적용이 안되는데 방법이 있나요? 적용되게하는 이유를 모르겠네요ㅠ
원래 익스플로러는 플렉스와 그리드의 표준형태를 잘 지원하지 못합니다 ㅠ 익스플로러 10과 11같은 경우엔 각자의 방법으로 어느정도 커버는 가능합니다. caniuse.com 에서 flex와 grid를 찾아보시면, 브라우저별 지원여부를 상세히 보실 수 있어요~
모서리부분을 부드럽게는안되나요?
border-radius를 사용해보세요-
개자이너 되고싶어욧
라이브때 반가웠어요! ㅎㅎ
강의가 아날로그,, 아날로그 하네요.. ^^;
아 손으로 설명하는 부분이 많아서 저 당시엔 가끔 저런식으로 했었습니다 ㅎㅎ
노래가 있으니 세련되고 좋은데
노래가 거슬린다는것들은 집중력이 고따구밖에 안되는것들이니 신경쓰시지 않으셔도 됩니다
꼭 노트에 형형색색으로 필기"만" 오지게 해놓는새끼들이랑 동급임 쓸모없는것에만 집중하는 애들
노래만 안들어갔어도...