필터
-
Figma tutorial: Auto layout navigation menu
Figma is free to use. Sign up here: http://bit.ly/2NeTyr7
Auto Layout can be added to Frames to create dynamic Frames and Components that respond to the size of their child objects, such as a button that grows with the length of its label. In this video we'll teach you more advanced Auto Layout techniques to create a navigation menu using the button we created in the previous video.
Tripma Design File: http://bit.ly/3nWIgV5
Learn more on our Help Center:
Create dynamic designs with Auto Layout: http://bit.ly/2vXWMXB
Behind the feature: the making of the new Auto Layout: http://bit.ly/3nYwkm2
Timestamps:
0:00 Auto-Layout For Navigation Menus
0:20 Creating List Item
0:40 Creating A Row
0:50 Space Between Property
1:07 Direction Property
1:27 Adding Another List Item
1:41 Adding A New Item
2:03 Changing An Item's Position
2:26 Adding An Avatar
2:45 Hiding The Avatar
3:35 Adding The Logo
3:44 The Tripma Design File
4:01 Alignment Flyout Menu
4:24 Changing to Fixed Width
5:01 Changing from Packed to Space Between
5:52 Adjusting The Padding
6:01 Using The Design
6:19 Constraints and Resizing Properties
7:00 Conclusion
7:13 The Next Video
7:21 The Tripma Design File
#Figma #FigmaTutorial #AutoLayout
Music:
Mitsubachi by Smith The Mister
https://smiththemister.bandcamp.com
Smith The Mister https://bit.ly/Smith-The-Mister-YT
Free Download / Stream: http://bit.ly/mitsubachi
Music promoted by Audio Library https://youtu.be/0IgndUb1YQI -
Figma tutorial: Auto layout button
Figma is free to use. Sign up here: http://bit.ly/3itfdYc
Auto Layout can be added to Frames to create dynamic Frames and Components that respond to the size of their child objects, such as a button that grows with the length of its label. In this video we'll teach you the basics of using Auto Layout by creating a button from a single text layer.
Tripma Design File: http://bit.ly/3nWIgV5
Learn more on our Help Center:
Create dynamic designs with Auto Layout: http://bit.ly/2vXWMXB
Behind the feature: the making of the new Auto Layout: http://bit.ly/3nYwkm2
Timestamps:
0:00 How Auto Layout Works
0:31 Series Overview
0:41 Tripma File
0:47 Creating The Text
0:56 Adding Autolayout and Fill
1:16 Autolayout Properties
1:23 Directions
1:25 Space Between
1:39 Padding Around Items
2:07 Alignment and Padding
2:21 Individual Padding
2:26 Resizing Properties
2:35 Hug Contents
2:44 Interaction Diagram
2:53 Text Resizing
3:12 Wrapping Up The Button
3:34 Conclusion
#Figma #FigmaTutorial #AutoLayout
Music:
Mitsubachi by Smith The Mister
https://smiththemister.bandcamp.com
Smith The Mister https://bit.ly/Smith-The-Mister-YT
Free Download / Stream: http://bit.ly/mitsubachi
Music promoted by Audio Library https://youtu.be/0IgndUb1YQI -
#13 CSS z-index로 앞뒤로 보내기(feat. parallax효과) - 웹 코딩 강좌
웹 디자이너를 위한 웹 코딩 강좌 열세 번째 시간입니다.
오늘도 포토샵 레이어 순서와 비슷한 개념으로 css z-index를 통해 앞뒤 순서 정할 수 있는 방법을 배워볼게요. 아주 쉽습니다. 포지션을 배웠다면, 같이 알아두면 되는 개념이에요.
z-index의 기본값은 0이고, z축 기준으로 앞으로 보내려면 수치를 크게 하면 됩니다. 음수로도 표현이 가능합니다.
z-index를 사용하려면 꼭 position에 relative, absolute, fixed와 같이 값이 있어야 적용 됩니다.
간단한 자바스크립트를 통해 스크롤시 패럴렉스 효과 주는 방법도 맛보기로 보실 수 있습니다.
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 디자이너로서 웹 코딩 공부의 첫단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다.
☞ 디자인베이스 소개 : http://designbase.co.kr/about/
☞ 공식 웹사이트 : http://designbase.co.kr/
☞ 네이버블로그 : https://blog.naver.com/designbasekorea
*BGM 사용 출처
Music: Upbeat Inspiring Corporate by Wavecont
https://www.wavecont.com/
Video Link: https://youtu.be/Ch2GzlOsUDU
Song: LAKEY INSPIRED - Chill Day (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
Video Link: https://youtu.be/vtHGESuQ22s
Lights by Sappheiros https://soundcloud.com/sappheirosmusic
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
Free Download / Stream: https://bit.ly/LightsSappheiros
Music promoted by Audio Library https://youtu.be/-lbbHQbZNKg
Music: Tokyo Music Walker - Way Home -
#12 위치를 내맘대로! CSS Position 이해하기 - 웹 코딩 강좌
웹 디자이너를 위한 웹 코딩 강좌 열두 번째 시간입니다.
오늘도 레이아웃을 짜기 위해 아주 중요한 포지션에 대해 배워볼게요. 저번 시간에 Box로 보는 눈이 중요하다고 했죠?! 이번에는 그 박스를 본인이 원하는 위치로 옮기는 방법을 배워볼게요.
포지션에는 5가지 속성이 있는데 최신 브라우저에만 적용되는 Sticky를 제외하고 Static, Relative, Absolute, Fixed에 대해 예제를 통해 알아보도록 해요.
솔직히 이것까지 배우면 여러분이 원하는 디자인을 코드로 짤 수 있습니다!
기본기를 완벽히 이해 할 때까지 재미를 느끼며 달려봅시다.
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 디자이너로서 웹 코딩 공부의 첫단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다.
☞ 디자인베이스 소개 : http://designbase.co.kr/about/
☞ 공식 웹사이트 : http://designbase.co.kr/
☞ 네이버블로그 : https://blog.naver.com/designbasekorea
*BGM 사용 출처
Music: Upbeat Inspiring Corporate by Wavecont
https://www.wavecont.com/
Video Link: https://youtu.be/Ch2GzlOsUDU
Song: LAKEY INSPIRED - Chill Day (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
Video Link: https://youtu.be/vtHGESuQ22s
Lights by Sappheiros https://soundcloud.com/sappheirosmusic
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
Free Download / Stream: https://bit.ly/LightsSappheiros
Music promoted by Audio Library https://youtu.be/-lbbHQbZNKg
Music: Tokyo Music Walker - Way Home -
#11 디자인을 똑같이 코딩하려면 꼭 알아야 할 박스모델 - 웹 코딩 강좌
웹 디자이너를 위한 웹 코딩 강좌 열한 번째 시간입니다.
오늘은 아주 중요한 박스 모델에 대해 배워볼게요. 나중에 배워볼 강좌 중에 전체적인 레이아웃을 짜거나 특정 UI를 코드로 구현할 때 박스 모델에 대한 개념을 알면 더욱더 쉽게 작업이 가능합니다.
그리고 초급자에게 가장 중요한 것은 Box로 바라보는 눈을 기르는 것입니다. 가상의 선을 그려서 display 속성에 따른 네모를 그려보는 연습이 필요해요.
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 디자이너로서 웹 코딩 공부의 첫단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다.
☞ 디자인베이스 소개 : http://designbase.co.kr/about/
☞ 공식 웹사이트 : http://designbase.co.kr/
☞ 네이버블로그 : https://blog.naver.com/designbasekorea
*BGM 사용 출처
Music: Upbeat Inspiring Corporate by Wavecont
https://www.wavecont.com/
Video Link: https://youtu.be/Ch2GzlOsUDU
Song: LAKEY INSPIRED - Chill Day (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
Video Link: https://youtu.be/vtHGESuQ22s
Lights by Sappheiros https://soundcloud.com/sappheirosmusic
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
Free Download / Stream: https://bit.ly/LightsSappheiros
Music promoted by Audio Library https://youtu.be/-lbbHQbZNKg
Music: Tokyo Music Walker - Way Home -
#10 스타일 초기화를 위한 Reset.css & Normalize.css - 웹 코딩 강좌
웹 디자이너를 위한 웹 코딩 강좌 열 번째 시간입니다.
오늘은 브라우저에서 제공하는 기본 스타일을 초기화 하는 방법을 알아볼게요. 내가 코드로 넣지도 않은 스타일이 있다면 답답하죠? 그러기 위해서는 스타일을 초기화 하는 코드를 넣어야합니다. 매번 작업할때마다 직접 코드로 짜기 귀찮겠죠.
그래서 누군가 작업해둔 오픈소스를 활용할거에요.
Reset.css 와 Normalize.css 두가지를 알아볼거에요.
사용법은 아주 간단합니다. 아래 링크에서 다운받은 후에 css 폴더에 넣어 외부스타일시트 연결한 방법으로 해당 경로를 연결해주면됩니다!
앞으로 업로드 될 모든 강좌에 Reset.css를 적용시킵니다 : )
Reset.css https://meyerweb.com/eric/tools/css/reset/
Normalize.css https://necolas.github.io/normalize.css/
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 디자이너로서 웹 코딩 공부의 첫단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다.
☞ 디자인베이스 소개 : 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: https://youtu.be/pZzSq8WfsKo
Free Download / Stream: http://ncs.io/Gizmo
Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/DqUQW3xyQ1c
Free Download / Stream: http://ncs.io/FastLaneYO -
#9 부모와 자식 관계?? - 웹 코딩 강좌
웹 디자이너를 위한 웹 코딩 강좌 아홉 번째 시간입니다.
오늘은 부모와 자식에 대한 개념을 알아볼게요. 특정 class나 id 안에 있는 요소에만 스타일을 적용시키고 싶을 때 사용합니다. 나중에 Javascript를 할 때도 비슷한 개념이 있어서 알아두면 좋습니다. 최대한 코드를 간단하게 효율적으로 짜는게 중요하니까요.
예제 파일 : https://drive.google.com/drive/folders/1doB0zZVzc7xrQXv7Vp7qVebiSsqjf1bx?usp=sharing
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 디자이너로서 웹 코딩 공부의 첫단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다.
☞ 디자인베이스 소개 : 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: https://youtu.be/pZzSq8WfsKo
Free Download / Stream: http://ncs.io/Gizmo
Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/DqUQW3xyQ1c
Free Download / Stream: http://ncs.io/FastLaneYO -
#8 CSS 개념잡기 Display & Cascading - 웹 코딩 강좌
웹 디자이너를 위한 웹 코딩 강좌 여덟 번째 시간입니다.
저번 강좌에서 간단한 카드 UI 예제를 코딩하면서 Class와 id에 대해 배워봤는데, 아직 이해가 안가는 부분들이 꽤 있죠?! 오늘은 Display 속성과 Cascading에 대해 배워보도록해요. 중요한 개념들이라서 꼭 알아둬야 합니다!
Display는 해당 요소의 블록 속성을 조절하는 데 배워볼 개념은 크게 4가지 입니다.
block, inline, inline-block, none
(* flex, grid는 최신 브라우저에만 제공하기때문에 제외하고 진행합니다.)
Cascading은 폭포라는 의미로 CSS가 적용되는 우선 순위에 대한 개념입니다. 자세한 내용은 영상을 통해 배워보세요.
나중에 배워볼 재미난 예제를 코딩할 때 해당 개념들을 몰라서 버벅이면 안되겠죠?!
예제 파일 : https://drive.google.com/drive/folders/12uNQWh2BaRzDQcQCzkTzUTydV75zD4jm?usp=sharing
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 디자이너로서 웹 코딩 공부의 첫단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다.
☞ 디자인베이스 소개 : 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: https://youtu.be/pZzSq8WfsKo
Free Download / Stream: http://ncs.io/Gizmo
Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/DqUQW3xyQ1c
Free Download / Stream: http://ncs.io/FastLaneYO -
#7 Card UI 코드로 만들기(Class와 ID) - 웹 코딩 강좌
웹 디자이너를 위한 웹 코딩 강좌 일곱 번째 시간입니다.
오늘은 Card UI를 코드로 만들어보는 시간입니다. HTML과 CSS를 활용해서 어떻게 만드는지 예제를 통해 배워볼 수 있어요. 오늘 중점적으로 배워볼 개념은 Class와 ID입니다. 아주 중요하니까 꼭 알아가도록 해요 :)
이 강좌에 나오는 개념 중 Position, Display, Z-index역시 중요하기때문에 다른 강좌에서 자세히 배울 예정입니다. 오늘은 맛보기라고 생각하고 Class, ID에 집중해보세요!
예제 파일 : https://drive.google.com/drive/folders/1nmggxp98OaGYDAZL32l5eanyQieGeEOf?usp=sharing
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 디자이너로서 웹 코딩 공부의 첫단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다.
☞ 디자인베이스 소개 : 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: https://youtu.be/pZzSq8WfsKo
Free Download / Stream: http://ncs.io/Gizmo
Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/DqUQW3xyQ1c
Free Download / Stream: http://ncs.io/FastLaneYO -
#6 HTML + CSS로 버튼 만들기(Feat. 마우스 오버) - 웹 코딩 강좌
웹 디자이너를 위한 웹 코딩 강좌 여섯 번째 시간입니다.
오늘은 버튼을 예제로 만들어볼 거에요. HTML과 CSS를 활용해서 어떻게 만드는지 예제를 통해 배워볼 수 있어요. 마우스 오버했을 경우 어떻게 되는지 까지도 디자인을 입혀볼거에요.
예제 파일 : https://drive.google.com/drive/folders/18uQ0gkkF2dkgqK9jKfsTsSBQsJtx4Joa?usp=sharing
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 디자이너로서 웹 코딩 공부의 첫단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다.
☞ 디자인베이스 소개 : 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: https://youtu.be/pZzSq8WfsKo
Free Download / Stream: http://ncs.io/Gizmo
Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/DqUQW3xyQ1c
Free Download / Stream: http://ncs.io/FastLaneYO -
#5 꾸밈을 담당하는 CSS의 문법과 연결 방법 3가지 - 웹 코딩 강좌
웹 디자이너를 위한 웹 코딩 강좌 다섯 번째 시간입니다.
오늘은 그 중에 꾸밈을 담당하는 CSS를 배워볼거에요. CSS의 문법은 어렵지 않습니다. 하지만, 꼭 알고 넘어가야 되는 부분은 HTML과 어떻게 연결하는 방법입니다. 3가지의 방법이 있는 데 그중에 어떤것이 가장 좋은지에 대해 얘기를 해볼게요.
인라인 스타일 시트 : HTML 태그 내에 사용하는 방법
내부 스타일 시트 : Head 영역에 style태그를 사용하는 방법
외부 스타일 시트 : Head 영역에 link를 사용해서 css파일을 불러오는 방법
어떤 방법이 가장 효과적인지 영상을 통해서 확인이 가능합니다 : )
오늘도 한 가지 지식을 얻어가는 재미로.. 화이팅입니다.
예제 파일 : https://drive.google.com/drive/folders/1NKqXL7AbWCQ3VxsjaIVF79QLiKToA99l?usp=sharing
CSS에 대한 추가 학습이 필요하다면 아래 링크를 참고해주세요. CSS에 대한 자세한 정보들이 있습니다. 당장 외우지 말고 필요할 때 그때그때 찾아보면 됩니다 : ) 일단은 북마크해두세요ㅎㅎ
https://www.w3schools.com/css/default.asp
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 디자이너로서 웹 코딩 공부의 첫단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다.
☞ 디자인베이스 소개 : 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: https://youtu.be/pZzSq8WfsKo
Free Download / Stream: http://ncs.io/Gizmo
Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/DqUQW3xyQ1c
Free Download / Stream: http://ncs.io/FastLaneYO -
#4 뼈대를 담당하는 HTML의 문법과 문서구조 - 웹 코딩 강좌
웹 디자이너를 위한 웹 코딩 강좌 네 번째 시간입니다.
웹 코딩 강좌에서는 HTML, CSS를 중점적으로 배운다고 했었죠. 오늘은 그 중에 뼈대를 담당하는 HTML을 배워볼거에요. 기본적으로 어떤 문법으로 사용하는지, HTML의 문서 구조는 어떻게 이루어져있는지 아주 간단한 예제를 통해 배워봐요~!
영상에서도 말하지만 외우려고 노력하지 말고!! 대략적으로 이런 '느낌'이구나를 유지해주세요. 끝까지 완주할 때까지 흥미를 잃으면 안됩니다!
예제 파일 : https://drive.google.com/drive/folders/1nELm8c2KMR0PjTIwktVjX_N-lPHvR0ng?usp=sharing
HTML에 대한 추가 학습이 필요하다면 아래 링크를 참고해주세요. 태그에 대한 자세한 정보들이 있습니다. 당장 외우지 말고 필요할 때 그때그때 찾아보면 됩니다 : ) 일단은 북마크해두세요ㅎㅎ
https://developer.mozilla.org/ko/docs/Web/HTML/Element
https://www.w3schools.com/html/default.asp
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 디자이너로서 웹 코딩 공부의 첫단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다.
☞ 디자인베이스 소개 : 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: https://youtu.be/pZzSq8WfsKo
Free Download / Stream: http://ncs.io/Gizmo
Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/DqUQW3xyQ1c
Free Download / Stream: http://ncs.io/FastLaneYO -
#3 웹 언어 HTML, CSS, Javascript의 역할 파악하기 - 웹 코딩 강좌
웹 디자이너를 위한 웹 코딩 강좌 세 번째 시간입니다.
웹 개발에는 무수히 많은 언어가 있습니다. 웹 개발에는 크게 프론트 앤드 개발과 백앤드 개발로 나뉩니다. 그 중에 디자이너로서 배우기 쉬운 영역인 프론트 앤드 개발 중 마크업 언어를 배울 예정입니다. 우리는 새로운 영역에 학습에서 흥미를 유지하기 위해 HTML, CSS를 중점적으로 배울 거지만 Javascript까지는 어떤 역할인지 빠르게 배워보도록 하죠.
3분 채 안되는 영상으로 빠르게 웹 언어의 역할을 알아보고 4편에서 HTML의 문법과 문서구조에 대해 배워보도록 하겠습니다.
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 디자이너로서 웹 코딩 공부의 첫단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다.
☞ 디자인베이스 소개 : 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: https://youtu.be/pZzSq8WfsKo
Free Download / Stream: http://ncs.io/Gizmo
Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/DqUQW3xyQ1c
Free Download / Stream: http://ncs.io/FastLaneYO -
#2 초간단 개발환경 세팅하기 - 웹 코딩 강좌
웹 디자이너를 위한 웹 코딩 강좌 두 번째 시간입니다.
웹 코딩에 대한 이해와 실제 작업을 하기 전에 최소한의 준비물이 있습니다. 바로 에디터 툴! 마치 포토샵과 같은 거죠.
물론 그림판으로 그림을 그리듯, 메모장으로도 코드를 작성할 수는 있지만... 개인적으로 굳이 그렇게 해야하나 싶어요.
저는 개인적으로 비주얼 스튜디오 코드를 사용합니다. 브라켓, 아톰, 서브라임 텍스트, 스톰 등등의 좋은 에디터 툴들도 있습니다. 기존에 사용하시던 툴이 있다면 따로 설치하실 필요는 없습니다.
비주얼 스튜디오 코드 사이트 바로가기 https://code.visualstudio.com/
추가로 작업에 능률을 올려줄 Extension을 설치해줘야 합니다.
Auto Close Tag - 자동으로 태그를 닫아주는 기능
Auto Rename Tag - 시작태그를 수정하면 종료태그를 같이 바꿔주는 기능
HTML Snippets - 효율적인 태그 작성을 도와주는 기능
Autoprefixer - 크로스 브라우징을 위해 접두사를 넣어주는 기능
Live Server - 로컬서버를 만들어 브라우저에서 실행되고 저장하면 바로 적용을 보여주는 기능
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 디자이너로서 웹 코딩 공부의 첫단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다.
☞ 디자인베이스 소개 : 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: https://youtu.be/pZzSq8WfsKo
Free Download / Stream: http://ncs.io/Gizmo
Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/DqUQW3xyQ1c
Free Download / Stream: http://ncs.io/FastLaneYO -
#1 웹디자이너가 코딩을 공부해야 하는 이유 - 웹 코딩 강좌
안녕하세요 디자인베이스입니다.
드디어 웹 디자이너를 위한 웹 코딩 강좌를 시작합니다. 여러분이 코딩을 못하는 이유는 딱 한 가지입니다. 안해서 입니다. 왜냐? 흥미가 없기 때문에 안하게 되고 안하면 실력이 늘수가 없죠.
디자인과는 성향이 완전 다르기 때문에 일반적으로 디자이너 분들이 코딩을 처음 접하면 어렵게 느끼는 것은 자연스러운 것입니다. 웹 개발을 공부한 디자이너로서 디자이너의 입장에서 최대한 이해와 흥미를 줄 수 있도록 고민해서 만든 강좌입니다.
첫 시작은 당연히 웹 디자이너가 코딩을 공부해야 하는 이유부터 시작하겠습니다.
ps. 이번 영상은 처음으로 인공지능 자막 제공 서비스 'Vrew'를 사용해봤습니다. 자막의 디자인이 기존 제 영상 스타일과 달라서 이질감이 느껴지긴 하지만.. 한 번 시도해봤습니다!
남세동 대표님 좋은 툴 감사합니다. : )
Vrew 사이트 바로가기 https://vrew.voyagerx.com/ko/
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 디자이너로서 웹 코딩 공부의 첫단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다.
☞ 디자인베이스 소개 : 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: https://youtu.be/pZzSq8WfsKo
Free Download / Stream: http://ncs.io/Gizmo
Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/DqUQW3xyQ1c
Free Download / Stream: http://ncs.io/FastLaneYO -
#10 웹디자인 실습 PC 카테고리 페이지 - 웹디자인 입문 강좌
오늘은 웹디자인 입문 강좌 열 번째 시간입니다.
메인 페이지 PC 시안은 끝냈으니 이번에는 카테고리 페이지 PC 시안을 작업해볼게요.
카테고리 페이지는 반복되는 콘텐츠가 많아서 심볼을 이용한 단순 반복 작업을 위한 인내심이 필요합니다.
누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 웹디자인 공부의 첫 단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다. : )
☞ 디자인베이스 소개 : http://designbase.co.kr/about/
☞ 공식 웹사이트 : http://designbase.co.kr/
☞ 네이버블로그 : https://blog.naver.com/designbasekorea
*이미지 사용 출처
BMW Site : https://www.bmw.com/en/index.html
*BGM 사용 출처
Music: Upbeat Inspiring Corporate by Wavecont
https://www.wavecont.com/
Video Link: https://youtu.be/Ch2GzlOsUDU
Song: LAKEY INSPIRED - Chill Day (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
Video Link: https://youtu.be/vtHGESuQ22s
Lights by Sappheiros https://soundcloud.com/sappheirosmusic
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
Free Download / Stream: https://bit.ly/LightsSappheiros
Music promoted by Audio Library https://youtu.be/-lbbHQbZNKg
Music: Tokyo Music Walker - Way Home
