리또리또

#웹퍼블리싱 #html #css #퍼블리싱  #웹페이지 #웹사이트 #vscode #인스타그램 #리틀리 #링크트리 #프로필링크 

링크트리와 같은 프로필 링크 사이트를 직접 만들어보는 튜토리얼 영상입니다. 
----------------------------------------------------------------
0:00 - Intro 인트로
1:14 - HTML
9:19 - CSS
----------------------------------------------------------------
----------------------------------------------------------------
구글 오픈소스 Pretendard 폰트 사용 :
https://github.com/orioncactus/pretendard

사용된 아이콘 : https://heroicons.com/
----------------------------------------------------------------
실제 완성된 사이트 - https://illustudio.github.io/mylink/
----------------------------------------------------------------
email - gloomysight@naver.com
blog - https://blog.naver.com/gloomysight
github - https://github.com/illustudio/mylink

링크트리, 리틀리와 같은 인스타그램 프로필 링크 사이트를 직접 만들어 봅시다. html,css,javascript

#웹퍼블리싱 #html #css #퍼블리싱  #웹페이지 #웹사이트 #vscode
블로그에 연재했던 퍼블리싱 관련글을 바탕으로 실제작업을 보여드리는 영상입니다. 연재 내용은 아래에 리스트로 정리해두었습니다
----------------------------------------------------------------
0:00 - Intro 인트로
0:09 - HTML
1:37 - CSS
----------------------------------------------------------------
1. 블로그 페이지 디자인을 HTML/CSS로 코딩해 보자
https://blog.naver.com/gloomysight/222721619030

2. HTML 이란 무엇인가
https://blog.naver.com/gloomysight/222721727884

3.HTML 기본 작성법
https://blog.naver.com/gloomysight/222722818344

4.CSS를 작성하는 방법
https://blog.naver.com/gloomysight/222723884592

5.CSS의 블록과 인라인, 박스 모델
https://blog.naver.com/gloomysight/222725935917

6.header, navigation 헤더 네비게이션, box-sizing의 특징과 CSS 선택자
https://blog.naver.com/gloomysight/222728710938

7.포스트, 헤더 영역, 외부 라이브러리 사용법
https://blog.naver.com/gloomysight/222731017364

8.포스트, 콘텐츠 영역 - position, object-fit, drop-shadow
https://blog.naver.com/gloomysight/222734282223

9.글쓴이 영역, 추천글 영역, flex-direction
https://blog.naver.com/gloomysight/222735409648

10.사이드바, 푸터, 배경 이미지, transform, z-index, background
https://blog.naver.com/gloomysight/222735864287
----------------------------------------------------------------
구글 오픈소스 Pretendard 폰트 사용 :
https://github.com/orioncactus/pretendard

사용된 이미지 : 
Pexels와 피그마 플러그인을 통해 제공된 이미지를 사용하였습니다.
----------------------------------------------------------------
실제 완성된 사이트 - https://illustudio.github.io/design-to-code_blog/
----------------------------------------------------------------
email - gloomysight@naver.com
blog - https://blog.naver.com/gloomysight
github - https://github.com/illustudio/design-to-code_blog

html,css로 만들어보는 블로그 페이지

#웹퍼블리싱 #html #css #scss #sass #퍼블리싱 #운동 #피트니스 #헬스 #크로스핏 #웹페이지 #웹사이트 #css애니메이션 #css_animation #animation #애니메이션 
운동, 피트니스, 헬스 웹페이지 hero section에 대한 퍼블리싱/CSS 애니메이션 영상입니다. 
----------------------------------------------------------------
0:00 - Intro 인트로
0:20 - HTML
1:46 - SCSS
----------------------------------------------------------------
VSCODE, HTML, SCSS
구글 오픈소스 Pretendard 폰트 사용 :
https://github.com/orioncactus/pretendard

사용된 이미지 : 
https://www.pexels.com/ko-kr/photo/841130
Victor Freitas 님의 사진, 출처: Pexels

https://www.pexels.com/ko-kr/photo/868483/
Andrea Piacquadio 님의 사진, 출처: Pexels

https://www.pexels.com/ko-kr/photo/116077/
Binyamin Mellish 님의 사진, 출처: Pexels

https://www.pexels.com/ko-kr/photo/1552108/
Leon Ardho 님의 사진, 출처: Pexels
----------------------------------------------------------------
email - gloomysight@naver.com
blog - https://blog.naver.com/gloomysight
github - https://github.com/illustudio/youtube_repo/tree/master/hero_section_001

Hero Section, HTML, CSS, SASS(SCSS), animation - 피트니스 크로스핏 운동 웹페이지 웹퍼블리싱 애니메이션 작업

#웹퍼블리싱 #자바스크립트 #html #css #scss #sass #vanilla #javascript #happynewyear #winter #근하신년 #신년 #새해 #퍼블리싱 #겨울 
불꽃놀이 효과에 대한 퍼블리싱, 자바스크립트 영상입니다. 
----------------------------------------------------------------
0:00 - Intro 인트로
0:23 - HTML
0:37 - SCSS
4:22 - Vanilla Javascript
----------------------------------------------------------------
VSCODE, HTML, SCSS, Vanilla Javascript
구글 오픈소스 Pushster 폰트 사용 :
https://fonts.google.com/specimen/Pushster
----------------------------------------------------------------
email - gloomysight@naver.com
blog - https://blog.naver.com/gloomysight
github - https://github.com/illustudio/youtube_repo/tree/master/fireworks

Fireworks effect HTML, CSS, Javascript - 근하신년, 새해 복 많이 받으세요. 불꽃놀이 효과 퍼블리싱, 자바스크립트

#웹퍼블리싱 #자바스크립트 #html #css #scss #sass #vanilla #javascript #크리스마스 #겨울 #xmas #christmass
눈 내리는 효과에 대한 퍼블리싱, 자바스크립트 영상입니다. 
----------------------------------------------------------------
0:00 - Intro 인트로
0:20 - HTML
0:44 - SCSS
4:22 - Vanilla Javascript
----------------------------------------------------------------
VSCODE, HTML, SCSS, Vanilla Javascript
구글 오픈소스 Oooh Baby 폰트 사용 :
https://fonts.google.com/specimen/Oooh+Baby
----------------------------------------------------------------
email - gloomysight@naver.com
blog - https://blog.naver.com/gloomysight
github - https://github.com/illustudio/youtube_repo/tree/master/snowfall

snowfall effect HTML, CSS, Javascript - 크리스마스 겨울 분위기 눈 내리는 효과 퍼블리싱, 자바스크립트

#웹퍼블리싱 #자바스크립트 #html #css #scss #sass #vanilla #javascript
마우스 오버, 비디오 재생 퍼블리싱, 자바스크립트 영상입니다. 
----------------------------------------------------------------
0:00 - Intro 인트로
0:36 - HTML
2:30 - SCSS
7:30 - Vanilla Javascript
----------------------------------------------------------------
VSCODE, HTML, SCSS, Vanilla Javascript
Pretendard 폰트를 사용하였습니다 - https://cactus.tistory.com/306
video : 
https://www.pexels.com/ko-kr/video/857195/
https://www.pexels.com/ko-kr/video/1672805/
https://www.pexels.com/ko-kr/video/6507731/
----------------------------------------------------------------
email - gloomysight@naver.com
blog - https://blog.naver.com/gloomysight
github - https://github.com/illustudio/youtube_repo/tree/master/hover_effect_001

마우스 오버, 비디오 재생 퍼블리싱, 자바스크립트 - Hover effect and control video using HTML,SCSS & Vanilla Javascript

헤더 메뉴 네비게이션 퍼블리싱 영상입니다. 
----------------------------------------------------------------
0:00 - Intro 인트로
0:25 - HTML
2:41 - SCSS
15:32 - Vanilla Javascript
----------------------------------------------------------------
VSCODE, HTML, SCSS, Vanilla Javascript
Pretendard 폰트를 사용하였습니다 - https://cactus.tistory.com/306
----------------------------------------------------------------
email - gloomysight@naver.com
blog - https://blog.naver.com/gloomysight
github - https://github.com/illustudio/youtube_repo/tree/master/header_navigation

헤더 메뉴 네비게이션 (바닐라 자바스크립트) - Header Menu Navigation Using HTML,SCSS & Vanilla Javascript

Digital marketing website html template 디지털 마케팅 비지니스 웹사이트 샘플 

SVG 이미지를 CSS를 이용하여 애니메이션 하는 효과와 더불어 클릭하면 사운드와 함께 불꽃놀이하는 듯한 효과를 구현하였습니다. 

소스는 [깃허브](https://github.com/illustudio/youtube_repo/tree/master/fireworks)를 통해 공유하고 있습니다.

제작 영상은 [유튜브](https://youtu.be/T75itp6YTZo)를 통해 확인할 수 있습니다. 

관련링크를 누르면 실제 적용된 페이지를 확인할 수 있습니다. 

불꽃 놀이 효과 Fireworks effect

CSS와 Javascript를 이용해서 눈 내리는 효과를 구현한 예제입니다. 

소스는 [깃허브](https://github.com/illustudio/youtube_repo/tree/master/snowfall)에서 확인하실 수 있습니다. 

제작 영상은 [유튜브](https://youtu.be/2YyXG1xAAgk)에서 확인하실 수 있고, 관련링크를 클릭하면 실제 구현된 페이지를 확인할 수 있습니다.

눈 내리는 효과 Snowfall Effect

메뉴를 선택한 후, mouse over 상태에서만 비디오가 재생되도록 자바스크립트로 제어하는 비디오 컴포넌트입니다. 

소스는 [깃허브](https://github.com/illustudio/youtube_repo/tree/master/hover_effect_001)에서 확인 가능합니다. 

제작 영상은 [유튜브](https://youtu.be/51Pq9mTdOUw)에서 확인 가능합니다. 

관련링크를 누르면, 실제 적용된 샘플 사이트를 확인하실 수 있습니다.

마우스 오버효과를 이용한 비디오 재생 컴포넌트

다크모드로 전환이 가능한 header navigation 컴포넌트입니다. 

소스는 [깃허브](https://github.com/illustudio/youtube_repo/tree/master/header_navigation)에 공개해두었습니다. 

[유튜브](https://youtu.be/5VRodqmmzAk)를 통해 제작 영상도 시청할 수 있습니다.

관련링크를 누르시면, 실제 적용된 사이트를 확인할 수 있습니다. 

헤더 메뉴 네비게이션 with dark mode

스마트조인이라는 소프트웨어 가입 홍보를 위한 랜딩페이지 퍼블리싱

HTML, CSS, Javascript

![스마트조인](https://wvkaxuqmsvzguodrmhgn.supabase.co/storage/v1/object/public/featured_image/upload/info.smartjoin.net.png)

소프트웨어 홍보 랜딩페이지 제작 HTML-CSS-JS

기묘한 이야기라는 넷플릭스 드라마에 나오는 등장인물들을 소재로 한 이미지 슬라이더입니다. 

CSS 애니메이션과 자바스크립트를 이용하여 인터랙티브한 화면을 구성했습니다. 

이미지 및 본문 내용은 넷플릭스 공식 사이트에서 가져온 것들입니다. 



이미지 슬라이더 - 기묘한 이야기

아코디언 메뉴는 많은 내용을 표현해야하지만 공간을 적게 사용해야할때 요긴하게 쓰일 수 있는 UI 구성 방식입니다. 

보통 SHOW/HIDE 방식으로 숨김처리된 내용을 보여주는 단순한 예시가 많은데, 여기에 간단한 애니메이션 효과와 깊이감 표현으로 개성있는 아코디언 메뉴를 구성해보았습니다. 


[깃허브](https://github.com/illustudio/html-project/tree/accordion)

깊이감을 주도록 구성된 아코디언 메뉴 HTML,JAVASCRIPT

크로스핏을 주제로한 홈페이지의 Hero Section을 구성해보았습니다. 
Hero Section은 사이트의 얼굴 역할을 하고 있으며, 가장 중요한 요점을 소개하는 역할을 하는 곳입니다. 

Mouse Hover 효과와, Border 애니메이션되는 효과로 이목을 끌수 있도록 만들었습니다. 

HTML/CSS만으로 구성할 수 있는 페이지로,아래 관련링크에서 실제 구현된 페이지를 확인할 수 있습니다. 

---

[동영상](https://www.youtube.com/watch?v=nLwW9u2-oo4)

[깃허브](https://github.com/illustudio/youtube_repo/tree/master/hero_section_001)


크로스핏 홈페이지 - Hero Section

## 블로그 Detail 페이지에 대한 튜토리얼 연재

### 초보자를 대상으로 퍼블리싱 실습 과정을 연재한 내용입니다.

목록은 아래와 같습니다.

1. [블로그 페이지 디자인을 HTML/CSS로 코딩해 보자
  ](https://blog.naver.com/gloomysight/222721619030)
2. [HTML 이란 무엇인가](https://blog.naver.com/gloomysight/222721727884)
3. [HTML 기본 작성법](https://blog.naver.com/gloomysight/222722818344)
4. [CSS를 작성하는 방법](https://blog.naver.com/gloomysight/222723884592)
5. [CSS의 블록과 인라인, 박스 모델](https://blog.naver.com/gloomysight/222725935917)
6. [header, navigation 헤더 네비게이션, box-sizing의 특징과 CSS 선택자](https://blog.naver.com/gloomysight/222728710938)
7. [포스트, 헤더 영역, 외부 라이브러리 사용법](https://blog.naver.com/gloomysight/222731017364)
8. [포스트, 콘텐츠 영역 - position, object-fit, drop-shadow](https://blog.naver.com/gloomysight/222734282223)
9. [글쓴이 영역, 추천글 영역, flex-direction](https://blog.naver.com/gloomysight/222735409648)
10. [사이드바, 푸터, 배경 이미지, transform, z-index, background](https://blog.naver.com/gloomysight/222735864287)

전반적인 레이아웃을 구성하는 방법을 경험해보기 좋도록 구성했습니다. 화려한 스킬보다는 기본적으로 내가 원하는 요소들을 어떻게 화면 안에 구성할 수 있는지 Flex 박스모델을 활용하며 경험할 수 있습니다. 

---
### Figma 파일

[Figma Link](https://www.figma.com/file/X2X8rdbmihRWcV8yFcRnbY/Blog-design?node-id=0%3A1)

---
### Github Repository Link

[깃허브 리포지터리](https://github.com/illustudio/design-to-code_blog.git)

블로그 본문페이지, 상세페이지 퍼블리싱 튜토리얼

플랫스타일을 적용한 어린이 일러스트레이션입니다. 유아, 아동, 어린이집 등 저연령층을 대상으로 활용할 수 있게끔 디자인 되어있습니다.

플랫 스타일 어린이 일러스트레이션

새벽배송, 빠른배송 등 배송 관련된 내용으로 사용되도록 제작된 일러스트레이션입니다.

빠른배송 택배 트럭 일러스트레이션

마스크 착용 법에 대한 일러스트레이션입니다. 
크라우드픽에서는 아래와 같이 디자인이 적용된 이미지도 구매하실 수 있습니다. 

![마스크착용법](https://cdn.crowdpic.net/detail-thumb/thumb_d_DD9E8FE770FB607D14F0FA62639954BE.jpg)

[크라우드픽 - 디자인 템플릿](https://www.crowdpic.net/photo/%EB%A7%88%EC%8A%A4%ED%81%AC-%EB%A7%88%EC%8A%A4%ED%81%AC%EC%B0%A9%EC%9A%A9%EB%B2%95-%EC%BD%94%EB%A1%9C%EB%82%98%EB%B0%94%EC%9D%B4%EB%9F%AC%EC%8A%A4-mask-%EC%83%81%EC%84%B8%ED%8E%98%EC%9D%B4%EC%A7%80-1264602)

마스크 착용법 일러스트레이션

귀여운 아기 동물 - 고양이 강아지 곰 코끼리 호랑이 사자 일러스트레이션입니다. 


어린이 아기 고양이 강아지 곰 코끼리 호랑이 사자 일러스트레이션 

활짝 웃고있는 햄버거 마스코트 - 캐릭터 일러스트레이션입니다. 


햄버거 마스코트 캐릭터 일러스트레이션

맥주를 들고 있는 치킨 캐릭터 - 마스코트 입니다. 


맥주를 들고 있는 치킨 캐릭터

웹, 모바일 디자인에 관련된 테마로 제작된 글래스모피즘 스타일의 아이콘 셋입니다. 

Icons set in glassmorphism style. Mobile, Tablet, Desktop, Search, Zoom, Cart, Gift, Present, Battery, Power, Video, Photo, Image, Call, Phone, Document, House, Home, Check, User, Vector Illustration

글래스모피즘 스타일 아이콘 셋 웹-모바일

웹디자인, 모바일 어플리케이션 등의 디자인을 기획하고 디자인하고, 개발하는 과정을 표현한 일러스트레이션입니다. 
web design and mobile application design process with designer and developer and illustrator collaboration working hero image	

웹디자인, 모바일 어플리케이션 디자인 프로세스 일러스트레이션

https://api.github.com/repos/illustudio/mylink/contents/{+path}

내가 직접 만들어쓰는 링크트리/리틀리

mylink

https://api.github.com/repos/illustudio/stranger_things/contents/{+path}

넷플릭스 기묘한 이야기를 주제로 한 슬라이더 기반 팬페이지

stranger_things

https://api.github.com/repos/illustudio/html-project/contents/{+path}

HTML/CSS/JS를 활용한 다양한 토이 프로젝트들을 공유하고 있습니다.

html-project

https://api.github.com/repos/illustudio/design-to-code_blog/contents/{+path}

블로그에 연재했던 - 블로그 디테일 페이지 퍼블리싱 튜토리얼 리포지터리입니다.

design-to-code_blog

https://api.github.com/repos/illustudio/text-reveal-animation/contents/{+path}

텍스트가 자연스럽게 스르르 나타나는 애니메이션

text-reveal-animation

https://api.github.com/repos/illustudio/youtube_repo/contents/{+path}

유튜브 채널을 통해 영상으로 고유되었던 소스 저장소

youtube_repo

https://api.github.com/repos/illustudio/movie_app_2020/contents/{+path}

React JS Fundamentals Course 2020 - 노마드코더의 리액트 서적 실습 결과물

movie_app_2020

https://api.github.com/repos/illustudio/js_slider/contents/{+path}

바닐라 자바스크립트로 만든 슬라이더 