그리드사이트

페이지 정보

profile_image
작성자동대문시장 조회 2회 작성일 2021-04-17 14:23:15 댓글 0

본문

#4 웹디자인 그리드 시스템의 모든 것?! - 웹디자인 입문 강좌

오늘은 웹디자인 입문 강좌 네 번째 시간입니다. 웹 디자인의 가장 기초가 될 수 있는 그리드 시스템! 한 번 자세히 파헤쳐봅시다. 짧은 시간안에 많은 내용을 담아서 어려울 수 있지만, 이해가 갈때까지 반복해서 학습해보세요.
그리드 시스템에 핵심인 컨테이너(전체폭), 거터(단과 단 사이 간격), 컬럼 수, 마진에 대해 배우고 그리드 시스템의 허와 실을 저와 함께 알아봅시다. 초급자 분들이 실수하는 부분들도 다루고, 실제 코드로 예제를 통해 이해도를 높여봅시다.
혹시 스케치강좌 4번째 그리드 시스템에 대한 영상을 안보고 온 분들은 꼭 하단 영상을 먼저 시청하고 와주세요 : )

스케치 그리드 강좌 : https://www.youtube.com/watch?v=Q_gcAAKfGKw
그리드 계산해주는 사이트 : http://gridcalculator.dk/


누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 웹디자인 공부의 첫단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다. : )

☞ 디자인베이스 소개 : http://designbase.co.kr/about/
☞ 공식 웹사이트 : http://designbase.co.kr/
☞ 네이버블로그 : https://blog.naver.com/designbasekorea


*BGM 사용 출처

Track: Syn Cole - Gizmo [NCS Release]
Music provided by NoCopyrightSounds.
Watch:

Free Download / Stream: http://ncs.io/Gizmo

Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release]
Music provided by NoCopyrightSounds.
Watch:

Free Download / Stream: http://ncs.io/FastLaneYO

#04.웹디자인 시작한다면 이건 꼭 보세요[포토샵]

채널에 멤버십 가입하여 디자인 원본파일을 받아보세요.
https://www.youtube.com/channel/UCxRnfrmJAkRLarzeBJETB5g/join

추천, 구독, 알림 꼬오옥~ 눌러주세요!
안녕하세요 디자이너 마디아입니다.
현재 실무에서 쇼핑몰 UIUX 구축 디자이너로 활동하고 있으며 학생분들에게 조금이나마 도움이 될 수 있는 강의로 여러분들에게 다가가도록 하겠습니다.
--------------------------------------------------------------------------
► youtube channel: https://bit.ly/2GJYUF1
►단톡방 : https://open.kakao.com/o/gakaJCvb
►mail : madia_designer@naver.com
►cafe : https://cafe.naver.com/madiadesigner
--------------------------------------------------------------------------
본 디자인은 다양한 해외 벤치마킹을 통해 고민없이
비쥬얼 적으로만 디자인 되었음을 알립니다.
--------------------------------------------------------------------------
#그리드 #웹디자인 #포토샵

#4 반응형 웹디자인을 위한 최적화된 그리드 만들기(UI 디자인 입문이라면 꼭 봐야할 영상) - 스케치 강좌

스케치 강좌 네 번째입니다. 이번에는 반응형 웹디자인을 위한 최적화된 그리드 만들기를 해보겠습니다.
레이아웃을 만들 때는 크게 4가지가 있습니다. 최대폭(max-width), 컨테이너(container), 단의 개수(columns), 거터와 칼럼 넓이 이렇게입니다.영상을 통해 가장 효과적인 레이아웃을 만들려면 몇 단이 좋은지, 거터와 칼럼 값은 어떻게 하는 게 좋은지 확인해보세요.
단순히 그리드 만들어주는 기능 설명으로 끝내는 것보다 어떤 수치를 입력하는 게 반응형 웹 디자인할 때 가장 효과적인지 알려드리는 것이 100배 유익할 것을 생각해서 만들었습니다.
UI 디자인 쪽으로 입문하시는 분이라면 꼭 봐야할 강좌 영상입니다.


ps. 맥북이 고장나서 수리하느라 너무 늦게 업로드 됐네요...ㅠㅠ 그리고, 영상에 자주 삐소리가 나는 문제 때문에 마이크를 새로 샀습니다. 아직 업로드 하진 않았지만 녹화해둔 영상을 제외한 새로운 영상부터는 새로 산 마이크로 녹화할 예정입니다.ㅎㅎ


*스케치 툴은 Mac OS에서 사용이 가능합니다.

누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 스케치 툴의 첫단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다. : )

☞ 디자인베이스 소개 : http://designbase.co.kr/about/
☞ 공식 웹사이트 : http://designbase.co.kr/
☞ 네이버블로그 : https://blog.naver.com/designbasekorea


*BGM 사용 출처

Track: Robin Hustin x TobiMorrow - Light It Up (feat. Jex) [NCS Release]
Music provided by NoCopyrightSounds.
Watch:

Free Download / Stream: http://ncs.io/LightitupYO

------

Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release]
Music provided by NoCopyrightSounds.
Watch:

Free Download / Stream: http://ncs.io/FastLaneYO

... 

#그리드사이트

댓글목록

등록된 댓글이 없습니다.

전체 3,574건 1 페이지
게시물 검색
Copyright © www.oyy.co.kr. All rights reserved.  Contact : help@oxmail.xyz