Thumbnail
깜짝 할인 중(D-1)
크리에이티브 웹 퍼블리싱
그리드(Grid) 핵심이론 및 실전 활용
(4.9)
11개의 수강평 ∙ 157명의 수강생

20%

30,800원

38,500원
지식공유자 : 코딩웍스(Coding Works)
총 69개 수업˙총 12시간 24분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
폴더에 추가 473 공유
초급자를 위해 준비한
[웹 퍼블리싱, 웹 개발] 강의입니다.

최고의 반응형 레이아웃 제작 방식, CSS 그리드~!! 그리드(Grid) 핵심이론 및 실전 활용 예제를 통해서 CSS 그리드를 완벽하게 이해하실 수 있습니다. 또한 핵심이론을 활용한 다양한 실전 예제가 있으니 실무 활용을 위한 충분한 연습도 할 수 있습니다. 그리드 핵심이론은 영상뿐만 아니라 PDF 교재로 다운받으실 수 있습니다. 중급 퍼블리셔가 되기 위한 필수 코스인 CSS 그리드 핵심이론과 실전 활용을 익히시면 취업뿐만 아니라 퍼블리셔로서 실무에서 충분한 경쟁력을 가지실 수 있습니다.

✍️
이런 걸
배워요!
CSS 그리드(Grid) 핵심이론을 통한 퍼블리싱 실전 능력 향상
CSS 그리드(Grid) 반응형웹 퍼블리싱 제작 능력(미디어쿼리)
그리드(Grid) 반응형 웹사이트 퍼블리싱 실력과 노하우 향상
퍼블리셔 취업을 위한 그리드(Grid) 핵심이론과 실전 UI 제작 능력

퍼블리셔 반응형 레이아웃 스킬업(Skill Up)을 위한 가장 빠른 길, 
CSS 그리드로 반응형 레이아웃을 정복하세요!

 

▲ 코딩웍스 포트폴리오 실전 퍼블리싱 과정 완강했다는 수강생 후기입니다. 
35시간이 넘는 과정인데 완강하셨네요. 뿌듯합니다.

▼ 코딩웍스 수강생께서 퍼블리셔 취업 후 보내 주신 이메일(2021.10.13)

선생님 안녕하세요 :) 

선생님 인프런 강의 듣던 학생 김O정입니다.
이번 여름 개인포트폴리오 관련해서 조언 얻고자 이메일 보냈던 학생입니다. 
기억나실련지요?ㅎㅎ 

다름이 아니라,
선생님께 조언 얻었던 포트폴리오로 퍼블리셔 취업 성공했다는 소식을 전하고자 메일 보내요!

심지어!! 
사람인에 올려둔 포트폴리오를 보고 회사쪽에서 먼저 연락이 왔고, 줌으로 면접을 보고 합격했습니다! 
회사쪽에선 희망연봉을 맞춰줬고 디자인, 개발 업무를 하지 않는 정말 퍼블리셔! 업무만 할 수 있는 회사에 들어오게 되었습니다.

경력직 퍼블리셔를 구하는 회사였는데, 신입인 저에게 연락이 와서 왜 저에게 연락을 주셨냐고 물어보니
다른 사람들 포트폴리오도 엄청 많이 봤는데, 제 포트폴리오에서 본 "기능정의서"가 눈에 띄어서 연락을 주셨다고합니다 

이게 다 선생님의 강의 덕분이라고 생각합니다.
선생님 강의를 듣지않았다면 저 역시 그냥 평범한 포트폴리오가 되었을텐데 선생님께서 말씀해주신 꿀팁들로 취업에 성공 할 수 있었습니다! 

비록 실제로 뵌적은 없지만,
포트폴리오를 만드는 내내 선생님 강의 보면서 엄청 의지하고 믿고 열심히 만들었습니다! 

학원에서 긴 시간 수업을 들으면서 쌓았던 실력보다 선생님 강의를 듣고 포트폴리오를 만든 3달동안 실력이 엄청 상승했다는게 느껴집니다

간절히 원했고,
선생님이 말씀해주신대로 믿고 했더니 정말 좋은 결과가 나왔습니다.

정말 감사드립니다!

코로나 조심하시구요
또 좋은 강의로 만나고싶습니다 :) 

▼ 코딩웍스 수강생께서 퍼블리셔 취업 후 보내 주신 이메일(2021.11.26)

코딩웍스 선생님, 인프런 강의 수강자입니다~ 

선생님 안녕하세요~ 인프런 수강생 OOO이에요~ 선생님 메일 주소는 다른 수강생 답변보고 알았습니다..ㅎㅎ
감사 인사 전해드리려구요 ㅎㅎ

지금까지 선생님 강의 수강하고 2주 정도 이력서 내보면서 고생 좀 했는데요..
회사 한 곳 면접 합격하여 출근하기로 했습니다.. 정말 감사드립니다..ㅠㅠ

사실 제가 나이가 32살이라 걱정이 많았습니다 이력서를 많이 넣었는데 연락도 잘 안오고..
근데 이 회사 인사담당자가 본인은 학원 출신은 안좋아한다고 하더라구요 ㅎㅎ
제가 입사하기로 한 회사는 작지만 개발자도 있고 웹디자이너도 있습니다.
3개월동안 교육시키고 실무에 투입하는 식이더라구요.
거리도 좀 있고 연봉도 낮긴하지만.. 열심히 배워서 연봉을 올려보려구요~ ㅎㅎ

그 동안 정말 감사했습니다. 질문 답변도 잘해주시고 이렇게 온라인으로 강의를 들어서 취업이 되니까 너무 신기하네요..

앞으로도 선생님 강의 들으면서 실력 더 키우면서 공부하겠습니다. 화이팅~!

 

⚡ 효과적인 학습을 위해 꼭! 코딩웍스 퍼블리싱 유튜브를 참고해주세요.


코딩웍스 퍼블리싱 유튜브 채널에서 이론 영상 강의와 병행하시기 바랍니다. 물론 모든 이론 영상이 유튜브 채널에 있는건 아니지만 중요한 이론 영상은 거의 다 있습니다. 영상이 많으니까 영상을 찾는 방법은 아래 예시처럼 검색하시는게 좋습니다.

코딩웍스 퍼블리싱 유튜브 채널 : https://www.youtube.com/codingworks

 

 

🔊 CSS 그리드(Grid) 란? 

CSS Grid(그리드)는 가로와 세로, 곧 Row(행)와 Column(열)으로 레이아웃을 제작하는 시스템이고 특히 반응형 웹을 제작하기 최적화된 CSS 신기술입니다. Flex(플렉스)로 반응형 웹을 만드는 레이아웃 방식도 좋지만, CSS 그리드 레이아웃 제작 방식은 중급 퍼블리싱으로 점프업하기 위한 필수 코스입니다. 

 

🔊 왜 CSS 그리드(Grid)를 사용해야 하는가? 

현재 반응형 웹을 만들지 않고 제작되는 웹사이트는 많지 않습니다. 그럼 어떤 방식으로 반응형 웹을 만들지 퍼블리셔는 늘 고민합니다. 기존의 웹사이트 제작 방식은 반응형으로 형태를 변경하는 작업에 공수가 너무 많이 들어갑니다. 플렉스 역시 좋은 대안이지만, 반응형으로 변경하는 작업이 만만하지 않습니다.

이런 고민을 한방에 해결하는 반응형 레이아웃 제작 방식, CSS 그리드(Grid) 입니다. 그래서 그리드를 사용해야 한다고 실무 퍼블리셔는 말하고 있습니다.

 

🔊 중급 레벨로 성장하려면 이젠 그리드(Grid) 활용 능력입니다.

중급 퍼블리싱 실력을 갖추는 코스는 기존의 레이아웃 CSS 제작 방식을 충분히 학습하고, 플렉스(Flex) 레이아웃 제작방식을 익히고 실전 웹사이트를 만듭니다. 그리고 CSS Grid(그리드)의 모든 핵심 속성과 활용 예제를 통해서 확실한 그리드 사용능력을 갖춥니다.

 

코딩웍스의 CSS 그리드(Grid) 강좌의 특징은? 

CSS Grid(그리드)는 기존의 레이아웃 제작 방식과 전혀 다른 형태로 제작됩니다. 그래서 처음 배우는 사람 입장에서는 굉장히 낯선 문법과 시스템 때문에 인터넷 블로그 또는 유튜브를 통해서 그리드 활용을 위한 핵심을 익히기 쉽지 않습니다.

그래서 코딩웍스 '그리드(Grid) 핵심이론 및 실전 활용 예제' 강의에서는 CSS Grid(그리드)의 모든 핵심 속성의 이론과 활용법을 담은 코딩웍스 자체 교재(PDF)를 통해서 학습하고, 교재를 기준으로 속성별로 제작된 영상들을 통해서 그리드 속성에 대한 이해도를 확실히 숙지할 수 있습니다. 그렇기 때문에 Grid(그리드)가 처음은 생소하지만 곧 익숙해지실 거라고 생각합니다. 

또한, 교재와 영상을 통해 배운 핵심이론을 실전 예제 제작 영상들을 통해 그리드 레이아웃 코딩 포트폴리오도 제작하시게 됩니다.

 


 

CSS 그리드(Grid) 핵심이론 및 실전 활용 예제 제작 과정 

'약 12시간의 CSS 그리드(Grid) 반응형 퍼블리싱 강의'

텍스트 에디터 사용법 (5강의, 약 2.3시간)
CSS 그리드(Grid) 핵심이론 (30강의, 약 5.2시간)
CSS 그리드(Grid) 유형별 실전 UI 예제 제작 (20강의, 약 4.2시간)

CSS 그리드(Grid) 핵심 이론 PDF 교재 제공
수업에서 제작하는 모든 예제 완성본 다운로드

 


 

▼ CSS 그리드(Grid) 핵심이론 반응형 핵심이론 PDF 교재 (66페이지)

 

▼ CSS 그리드(Grid) 핵심이론을 활용한 반응형 실전 예제 제작노트 PDF 교재 (19페이지)

 

▼ CSS 그리드(Grid) 핵심이론을 활용한 반응형 실전 예제

▼ CSS 그리드(Grid) 핵심이론을 활용한 반응형 실전 예제

▼ CSS 그리드(Grid) 핵심이론을 활용한 반응형 실전 예제

▼ CSS 그리드(Grid) 핵심이론을 활용한 반응형 실전 예제

 

 


🙋🏻‍♂️ 강의 수강을 위한 선수지식

 

이번 강의는 그리드(Grid)를 주제로 그리드 핵심이론부터 응용 및 실전 예제를 제작하는 과정입니다. 그리고 마지막에 그리드로 배치하는 반응형 웹사이트 제작과정도 함께 있습니다. 이번 강의는 그리드 반응형이라는 테마를 주제로 제작된 강의라는 특징이 있지만 일반적인 퍼블리싱 강의와 같습니다.

그리드 핵심이론은 기초부터 차근차근 진행하니까 너무 겁먹지 말고 시작하세요. 단, HTML+CSS에 대한 기본적인 이해도는 가지고 있으셔야 합니다. 지금 조금 부족하시다면 HTML+CSS를 공부하시면서 그리드(Grid) 강좌를 들으셔도 괜찮습니다.

제 강의 중에 'HTML+CSS+JQUERY 포트폴리오 중급 실전 퍼블리싱 강의'가 있습니다. 이 강의에 있는 이론 내용과 실전 예제 제작 내용이 이번 반응형 웹사이트 제작 필요한 내용이 거의 모두 들어가 있습니다. 곧, HTML+CSS+JQUERY 기본기를 확실히 만들 수 있는 강의라고 생각합니다.

이번 반응형 웹사이트 제작에서 몇가지를 제외하고는 'HTML+CSS+JQUERY 포트폴리오 중급 실전 퍼블리싱 강의'에 있는 내용을 1회차 정도 학습하시고 오시면 따라오시기가 훨씬 수월할 것이라 생각합니다.

결론은...

입문이나 막 시작하시는 분만 아니시면 따라오시는 건 큰 문제 없다고 생각됩니다.

다른 강의를 통해서 HTML+CSS 기본기를 익히고 오셨다면 충분히 따라올 뿐만 아니라 왜 이렇게 하는지에 대한 이해도를 갖고 반응형 웹사이트 제작 과정을 마치시게 될 거라 생각합니다.


🙋🏻‍♂️ 효율적인 학습을 위한 학습방법

  • [다운로드] 그리드(Grid) 핵심이론 가이드북(PDF) 및 완성본에 있는 코딩웍스 GRID 가이드북(Guide Book)-Part 1(핵심이론) 파일을 보시면서 핵심이론 영상을 보시면 도움이 많이 됩니다. 제공되는 PDF 교재를 기반으로 핵심이론 강의가 구성되어 있습니다.
  • 섹션 6. [다운로드] 그리드(Grid) 핵심이론 가이드북(PDF) 및 완성본에 있는 [Part 2] Grid 속성을 사용한 활용예제 및 실전 예제 완성본 전체를 압축한 파일을 받아서 압축울 푸시고 원하는 학습내용부터 시작하시면 됩니다. 학습하실 때 완성본이므로 index.html과 style.css 파일은 삭제하고 처음부터 시작하세요.


🙋🏻‍♂️ 강의 관련 예상되는 질문과 필독사항

Q. 예제 제작하면서 나오는 중급 CSS 이론 설명 영상이 있나요?
A. '예제 제작하는데 기초이론에 나오지 않은 중급이론이 많이 나오는데 중급 이론 수업은 어디서 듣나요?' 이런 질문이 게시판에 자주 올라옵니다.

지금 과정은 초급 퍼블리싱 예제 제작을 하는 과정은 아닙니다. 초급~중급 퍼블리싱 예제를 제작하는 과정입니다. 그래서 CSS 초중급 이론은 어느 정도 알고 있으셔야 합니다. 그렇다고 꼭 잘 아실 필요는 없습니다. CSS 초중급 이론은 예제를 제작하면서 지속적으로 반복합니다. 그리고 코딩웍스 유튜브 퍼블리싱 채널에 [중급이론] CSS 중급이론이라는 재생 목록에 예제 제작에 필요한 필수 중급 이론 영상이 자세히 있으니, 지금 과정을 들으시면서 중급 이론을 병행하시면 좋습니다.

 

Q. 이 과정 수강하면 실무에서 퍼블리셔로 일할 수 있을까요?
A. 이 과정에서 퍼블리셔 취업을 위한 퍼블리싱 스킬을 모두 다루지는 않지만 CSS 그리드(Grid) 핵심이론 및 실전 활용 예제로 반응형 웹을 만들 수 있다는 것 하나만으로도 충분히 좋은 출발이라고 생각합니다.

Q. 이번 과정에 HTML+CSS+JQUERY 퍼블리싱 이론을 설명하는 이론 파트가 따로 없나요? 
A. 지금 수강하시는 과정은 CSS 그리드(Grid)를 테마로 그리드를 공부하고 반응형 실전 예제를 제작하는 과정이라 CSS 그리드(Grid) 이론을 제외하고 입문 초급 과정에 필요한 기초 퍼블리싱 이론 파트는 따로 없습니다. 코딩웍스 퍼블리싱 유튜브 채널이나 기본 이론 파트와 실전 예제 제작 학습은 다른 과정을 통해서 스킬업하시기를 추천드립니다.

Q. 공부하다가 모르는 게 있으면 질문은 어디에 하나요? 
A. 질문이 있으시면 [질문&답변] 게시판에 글을 남기시면 바로는 아니어도 확인되면 답변을 드립니다. 그리고
 질문은 최대한 구체적으로 해주세요. 질문이 구체적이지 않았을 때 충분한 답변이 좀처럼 쉽지 않습니다. 그래서 질문하실 때는 궁금하신 내용과 함께 작성 중이신 HTML, CSS, JQUERY 코딩 화면을 캡처해서 첨부해 주시면 답변드리기가 훨씬 수월합니다.

Q. 예제 완성본, 교재PDF 파일은 어디에서 받나요? 
A. 수강생에게 제공되는 파일은 마지막에 있는 섹션 6. [다운로드] 그리드(Grid) 핵심이론 가이드북(PDF) 및 완성본에서 모두 다운로드 받으실 수 있습니다.

Q. 강사님 수업 중에 퍼블리셔 취업 진짜 실전 가이드를 먼저 보면 좋을까요? 
A. 퍼블리싱 스킬을 더 익히는 것도 중요하지만, 먼저 퍼블리셔로서 기본기를 갖추는 것이 우선되어야 합니다. 퍼블리셔 취업 실전가이드 전자책(PDF)에서는 ‘퍼블리싱 기본기란?’ ‘바람직한 코딩습관과 원칙, 경력자처럼 퍼블리싱하기’ 등 퍼블리셔로서 반드시 알아야 하는 내용을 꼼꼼히 정리했습니다. 퍼블리셔 취업 실전가이드 전자책(PDF)을 먼저 보시고 퍼블리싱 기본기에 대한 이해도를 충분히 갖고 학습하시기를 권해드립니다. 아래 이미지를 클릭하시면 수업 소개 내용을 보실 수 있습니다.

 

 


[필독] 블라켓(Brackets) 확장기능관리자 서비스 불가

블라켓(Brackets) 확장기능관리자 서비스 불가해졌습니다. 일시적인 것인지 영구적인 것인지 모르겠지만 현재로서는 영구적인 서비스 불가라고 생각됩니다. 좋은 텍스트 에디터였는데 Adobe 서비스가 중단되면서 여러가지로 사용중 문제도 생고 지금은 확장기능관리자 서비스 불가해졌습니다. 다른 익스텐션은 몰라도 에밋(Emmet)을 설치할 수 없습니다.

저도 오랬동안 애정하면서 사용했던 텍스트 에디터인데 아쉽지만 이제 비주얼 스튜디오 코드(Visual Studio Code)를 쓸 수 밖에 없네요. 

강의에 있는 블라켓츠 사용법 영상은 보지 마시고 비주얼 스튜디오 코드(Visual Studio Code)를 사용법을 충분히 학습하시고 학습 영상을 보시기 바랍니다. 만약 강의에 비주얼 스튜디오 코드(Visual Studio Code) 사용법이 커리큘럼에 없다면 아래에 코딩웍스 퍼블리싱 유튜브 채널 비주얼 스튜디오 코드(Visual Studio Code) 사용법 영상을 보시기 바랍니다.


  1. 비주얼 스튜디오 코드 사용법 및 환경설정 : https://youtu.be/ovbAh681j8o
  2. 비주얼 스튜디오 코드에서 에밋(Emmet) 사용법 : https://youtu.be/u1tFhCB9krY
  3. 비주얼 스튜디오 코드 필수 Extension 설치 및 사용법 : https://youtu.be/0j--ATQP2Qw
  4. 비주얼 스튜디오 코드에서 CSS 수정할 때 위로 올라가는 Full Reload 방지 : https://youtu.be/NWOxSd4ZuUk

👨🏼‍🏫 강사소개

  • (현재) 프리랜서 프론트엔드 퍼블리셔
  • 더조은 컴퓨터아카데미 웹 퍼블리싱 강사
  • 이젠 컴퓨터아카데미 웹 퍼블리싱 강사
  • 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
  • 이젠 컴퓨터아카데미 웹디자인 기능사 실기 자격증반
  • 라크피아 ICT 트레이닝 센터프론트엔드 퍼블리싱 마스터 코스 강사
  • 이지앤에듀프론트엔드 퍼블리싱, UI/UX 디자인
  • HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
  • 코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks

 

면접과 취업을 부르는 퍼블리셔 개인 포트폴리오 홈페이지 제작, scss, sass, flex, grid, html, css, html/css,  website, 웹 퍼블리셔, 퍼블리셔 취업, 웹사이트, 코딩, coding, jquery, javascript, 제이쿼리, 자바스크립트, 레이아웃, 인터렉티브웹, interactive web, web design, 웹디자인, 포트폴리오,  퍼블리싱, 반응형 웹, 웹디자인기능사 실기시험, bootstrap, 부트스트랩, css frameworks, 프레임워크

 

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
CSS 그리드(Grid) 신기술을 익혀서 실무에 활용하고 싶은 분
중급 퍼블리셔로서 CSS 그리드(Grid) 능력이 필요하신 분
퍼블리셔 취업을 위한 CSS 그리드(Grid) 포트폴리오가 필요하신 분
CSS 그리드(Grid) 반응형 실전 예제 제작을 경험하고 싶은 분
CSS 그리드(Grid) 개인 포트폴리오 홈페이지 제작이 필요하신 분

안녕하세요
코딩웍스(Coding Works) 입니다.
코딩웍스(Coding Works)의 썸네일

■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱

 

🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks

🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs

커리큘럼 총 69 개 ˙ 12시간 24분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. [Part 1] GRID 핵심 이론 – 부모요소에 사용하는 속성(1)
[필독] 그리드(Grid) 가로, 세로, 템플릿 이해 미리보기 06:44
display: grid / display: inline-grid 10:40
grid-template-columns 10:44
grid-template-rows 05:32
grid-column-gap / grid-row-gap / grid-gap 04:48
[필독] Grid 정렬 속성에 대한 이해 04:36
justify-items / align-items 14:10
justify-content / align-content 11:06
섹션 2. [Part 1] GRID 핵심 이론 – 자식요소에 사용하는 속성
justify-self / align-self 미리보기 10:14 [필독] 그리드 속성을 위한 필수 개념(line Number) 미리보기 03:54
grid-column-start / grid-column-end / grid-column 16:53
grid-row-start / grid-row-end / grid-row 08:27
grid-row와 grid-column을 활용한 예제(1) 12:10
grid-row와 grid-column을 활용한 예제(2) 11:52
grid-area 16:39
z-index 11:32
grid-row 속성으로 Row 순서 변경 07:28
order 05:46
섹션 3. [Part 1] 부모요소와 자식요소 속성을 함께 사용한 GRID 속성
grid-template-areas 와 grid-area(#01) 10:54
grid-template-areas 와 grid-area(#02~#03) 17:40
grid-template-areas 와 grid-area(#04) 10:03
grid-template-areas 와 grid-area(#05) 07:31
부모요소에 중첩된 자식요소 일괄배치 개별배치 14:29
Grid 속성 중첩해서 사용하는 예제(1~3) 16:19
섹션 4. [Part 1] GRID 핵심 이론 – 부모요소에 사용하는 속성(2)
repeat(개수, 크기) 09:47
minmax(최소값, 최대값) 08:14
min-content 자동으로 최소 너비 조절 14:30
repeat, minmax, min-content 중복 활용 08:09
auto-fill, auto-fit 10:41
grid-auto-flow 09:01
섹션 5. [Part 2] CSS GRID LAYOUT 실전 활용 예제
[필독] Grid 코딩하기 전에 종이에 그림을 그리고 보면서 코딩하세요 미리보기 03:41
Holly Grail 레이아웃 제작(1) 11:47
Holly Grail 레이아웃 제작(2) 06:45
Holly Grail 레이아웃 grid-area 활용한 제작(1) 08:17
Holly Grail 레이아웃 grid-area 활용한 제작(2) 05:22
Holly Grail 레이아웃 제작 최종본(1) 미리보기 11:47
Holly Grail 레이아웃 제작 최종본(2) 14:32
[필독] 그리드(Grid) 반응형 레이아웃 미디어 쿼리(Media Query) 미리보기 07:20
Holly Grail 레이아웃 반응형 레이아웃 제작 24:03
미디어쿼리 없는 반응형 이미지 갤러리 09:36
풀스크린 반응형 레이아웃(1) - PC 레이아웃 18:17
풀스크린 반응형 레이아웃(2) - 모바일 & 태블릿 레이아웃 14:37
반응형 베스트 상품 카드 UI 리스트(1) 08:08
반응형 베스트 상품 카드 UI 리스트(2) 15:18
반응형 베스트 상품 카드 UI 리스트(3) 08:15
반응형 베스트 상품 카드 UI 리스트(4) 10:33
반응형 블로그 포스트 이미지 갤러리(1) 미리보기 07:49
반응형 블로그 포스트 이미지 갤러리(2) 13:07
반응형 블로그 포스트 이미지 갤러리(3) 14:58
반응형 블로그 포스트 이미지 갤러리(4) 16:33
섹션 6. [다운로드] 그리드(Grid) 핵심이론 가이드북(PDF) 및 완성본
[교재 다운로드] 코딩웍스 GRID 가이드북(Guide Book)-Part 1(핵심이론)
[교재 다운로드] 코딩웍스 GRID 가이드북(Guide Book)-Part 2(활용실전예제)
[완성본 다운로드] Grid 속성을 사용한 활용예제 및 실전 예제(Part 2)
[다운로드] 비주얼 스튜디오 코드 필수 세팅, 단축키 변경, 필수 Extension 설치, 에밋(Emmet) 단축키
섹션 7. 강의 관련 오류 수정 및 자주 묻는 질문들(FAQ)
[오류수정] 블라켓(Brackets)에서 생기는 표시 오류
[FAQ] Brackets에서 Emmet 코드힌트 안생기는 오류 해결 방법
[FAQ] 블라켓(Brackets) 실시간 미리보기 크롬으로 열리게 하기(기본 브라우저 설정)
[FAQ] HTML 내에 파일 링크할 때 꼭! 상대주소로 하셔야 합니다.
[FAQ] 블라켓(Brackets)에서 에밋(Emmet) 수동 설치하기
강의 게시일 : 2020년 10월 27일 (마지막 업데이트일 : 2021년 07월 11일)
수강평 총 11개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.9
11개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
chzhffpt1996 thumbnail
최고입니다.
2021-08-04
지식공유자코딩웍스(Coding Works)
chzhffpt1996님 수강평 감사드립니다~!!
2021-08-04
취업하고시퍼 thumbnail
자세히 잘 가르쳐주십니다. 그리드 좋네요
2021-09-24
지식공유자코딩웍스(Coding Works)
취업하고시퍼님 수강평 감사드립니다. 언제나 화이팅입니다~!!
2021-09-24
lawesome1 thumbnail
css 배우면서 뭐가 뭔지도 잘 모르고 이게 맞나 유트브로 찾아봐도 왠 알수없는 단어들이 수두룩해서 꼭 써야하나 했는데 마침 딱 강의가 올라와서 바로 봤는데 역시 이만한게 없더군요 드디어 css 그리드를 쓸수 있게 되었습니다! 확실히 컨텐츠가 다른것 같아요, 설명도 너무 잘해주시고 특히 활용예제를 직접 보여주는게 진짜 좋았어요, 제 스크린과 비교하면서 한게 저한텐 제일 큰 도움을 준것 같아요. 다시한번 좋은 강의 감사합니다
2020-11-01
지식공유자코딩웍스(Coding Works)
lawesome1 님~ 코딩웍스입니다. 다른 강의에도 수강후기 써주셨는데 이번에도 써주셨네요. 너무 고맙습니다. 그리드 공부하시는데 도움이 되었다면 좋겠습니다. 언제나 화이팅입니다~^^
2020-11-02
퍼블리니 thumbnail
Grid 재밌어요 ~~~ 감사합니당
2021-09-10
지식공유자코딩웍스(Coding Works)
퍼블리니님 수강평~ 감사드립니다~!!
2021-09-10
pasw9 thumbnail
그리드(Grid) 강의 잘 청취 했습니다. 좋은 강의 감사드립니다. 그리고 기회가 되시면 자바스크립트 강의와 제이쿼리 강의도 만들어 주었으면 합니다. 예) html에서 자바스크립트 값 설정 및 변경(id에 설정할때, name에 설정할때, valeu값 등등), 순서, 기타 등등
2021-06-27
지식공유자코딩웍스(Coding Works)
pasw9님 수강평~!! 수강평 감사드립니다. 다음주에 HTML+CSS+JQUERY 포트폴리오 실전 퍼블리싱(시즌2) 오픈됩니다. 이번에는 중급 퍼블리싱을 겨냥한 실전 예제들이구요. 제이쿼리 자바스크립트로 만드는 예제 섹션에 JS 실전 예제가 여러개 있으니까 관심가져주세요. 감사합니다.
2021-06-27
깜짝 할인 중(D-1)

20%

30,800원

38,500원
폴더에 추가 473 공유
지식공유자 : 코딩웍스(Coding Works)
총 69개 수업˙총 12시간 24분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
수강 전 궁금한 점이 있나요?
문의하기
문의
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스