본문 바로가기
Webstoryboy
분류 전체보기
(410)
사이트 제작
(156)
01 WEBSTANDARD
(36)
02 RESPONSIVE
(36)
03 MEGABOX
(46)
04 MOBILE SITE
(14)
05 PARALLAX SITE
(24)
스크립트 효과
(81)
01 MENU EFFECT
(20)
02 MOUSE EFFECT
(20)
03 SLIDER EFFECT
(20)
04 PARALLAX EFFECT
(21)
05 GAME EFFECT
(0)
포트폴리오가 실력이다
(8)
웹표준 사이트 만들기
(8)
기타
(22)
웹 디자인 기능사(2019)
(22)
*
CATAGORY
검색
Code
Refer
Tutor
Fonts
WebGL
CSS
Discord
webstoryboy
패럴랙스 이펙트
마우스 이펙트
이미지 이펙트
웹표준 사이트
전체 글
(410)
썸네일형
리스트형
웹 표준 사이트 만들기 - 카드유형01
01. 카드 유형 : 카드 유형01 난이도 쉬움 소스 다운로드 완성 소스 다운받기 소개 안녕하세요!. 웹스토리보이입니다. 이번 주제는 카드 유형입니다. 카드 유형은 사이트 제작에 있어 필수적으로 들어가는 레이아웃입니다. 3단, 4단 유형을 많이 사용하며, 콘텐츠를 효과적으로 보여주는 구조입니다. 이론 이번 카드 유형에서는 만들어 볼 디자인은 이것입니다. 어렵지 않으니 하나씩 따라하시면 만들 수 있습니다. 그럼 시작해볼까요? 우선 card01.html 페이지를 만들고 !를 치고 tab을 누르겠습니다. 언어를 ko로 변경하고 title은 카드 유형01로 변경하겠습니다. 문서 세팅1을 완료하고, section 태그를 이용하여, 콘텐츠를 설정합니다. 시멘틱 태그2를 이용하여 카드 영역임을 표현합니다. 클래스 이..
웹 표준 사이트 만들기 - 배너유형01
01. 배너 유형 : 배너 유형01 난이도 쉬움 소스 다운로드 완성 소스 다운받기 소개 안녕하세요!. 웹스토리보이입니다. 이번 주제는 배너유형입니다. 구조는 아주 단순하기 때문에 쉽게 따라 할 수 있습니다. 그럼 바로 시작해보겠습니다. 이론 우리가 이번에 만들어 볼 유형은 이런 디자인입니다. 배경에 이미지가 있고, 가운데 영역에 텍스트가 있는 구조입니다. 우선 banner01.html 페이지를 만들고, !를 치고 tab을 누르겠습니다. 언어를 ko로 변경하고 title은 배너 유형01로 변경하겠습니다. 문서 세팅1을 완료하고, section 태그를 이용하여, 콘텐츠를 설정합니다. 시멘틱 태그2를 이용하여 배너 영역임을 표현합니다. 클래스 이름은 banner-wrap이라고 설정하겠습니다. 이제 이미지를 표..
웹 표준 사이트 만들기 - 이미지 유형1
웹 표준 사이트 만들기 2022년 버전입니다. 사이트를 만들기 위한 기초부터 고급 과정까지 강의가 수록되어 있으며, 기본적인 사이트부터 요즘에 유행하는 사이트까지 제작하기 위한 강의입니다. 유형별로 연습을 하고 최종적인 사이트를 만드는 강의입니다. Design Figma Code Youtube Code Sample 전체 소스는 여기서 다운 받을 수 있습니다. 바로가기 샘플 소스는 여기서 확인 할 수 있습니다. 바로가기 Code example index.html style.css 동물공감 인터뷰 애교만점 웰시코기 포메라니안은 작고 귀여운 체구에 비해 대범한 성격을 가지고 있으며 호기심이 많은 견종입니다. 자세히 보기 강아지계의 연예인, 비숑프리제 최근 연예인들 사이에서 키우는 강아지로 유명해진 비숑프리제는..
웹 표준 사이트 만들기 - 레이아웃 유형5
웹 표준 사이트 만들기 2022년 버전입니다. 사이트를 만들기 위한 기초부터 고급 과정까지 강의가 수록되어 있으며, 기본적인 사이트부터 요즘에 유행하는 사이트까지 제작하기 위한 강의입니다. 유형별로 연습을 하고 최종적인 사이트를 만드는 강의입니다. 열심히 따라해서 성공적인 사이트를 만들었으면 좋겠네요! Design Figma Code Youtube Code Sample 전체 소스는 여기서 다운 받을 수 있습니다. 바로가기 샘플 소스는 여기서 확인 할 수 있습니다. 바로가기 Code example index.html style.css Site Reference INSTAGRAM 바로가기 STUDY 바로가기 YOUTUBE 바로가기 INFLUENCER 바로가기
웹 표준 사이트 만들기 - 레이아웃 유형4
웹 표준 사이트 만들기 2022년 버전입니다. 사이트를 만들기 위한 기초부터 고급 과정까지 강의가 수록되어 있으며, 기본적인 사이트부터 요즘에 유행하는 사이트까지 제작하기 위한 강의입니다. 유형별로 연습을 하고 최종적인 사이트를 만드는 강의입니다. 열심히 따라해서 성공적인 사이트를 만들었으면 좋겠네요! Design Figma Code Youtube Code Sample 전체 소스는 여기서 다운 받을 수 있습니다. 바로가기 샘플 소스는 여기서 확인 할 수 있습니다. 바로가기 Code example index.html style.css Site Reference INSTAGRAM 바로가기 STUDY 바로가기 YOUTUBE 바로가기 INFLUENCER 바로가기
웹 표준 사이트 만들기 - 레이아웃 유형3
웹 표준 사이트 만들기 2022년 버전입니다. 사이트를 만들기 위한 기초부터 고급 과정까지 강의가 수록되어 있으며, 기본적인 사이트부터 요즘에 유행하는 사이트까지 제작하기 위한 강의입니다. 유형별로 연습을 하고 최종적인 사이트를 만드는 강의입니다. 열심히 따라해서 성공적인 사이트를 만들었으면 좋겠네요! Design Figma Code Youtube Code Sample 전체 소스는 여기서 다운 받을 수 있습니다. 바로가기 샘플 소스는 여기서 확인 할 수 있습니다. 바로가기 Code example index.html style.css Site Reference INSTAGRAM 바로가기 STUDY 바로가기 YOUTUBE 바로가기 INFLUENCER 바로가기
웹 표준 사이트 만들기 - 레이아웃 유형2
웹 표준 사이트 만들기 2022년 버전입니다. 사이트를 만들기 위한 기초부터 고급 과정까지 강의가 수록되어 있으며, 기본적인 사이트부터 요즘에 유행하는 사이트까지 제작하기 위한 강의입니다. 유형별로 연습을 하고 최종적인 사이트를 만드는 강의입니다. 열심히 따라해서 성공적인 사이트를 만들었으면 좋겠네요! Design Figma Code Youtube Code Sample 전체 소스는 여기서 다운 받을 수 있습니다. 바로가기 샘플 소스는 여기서 확인 할 수 있습니다. 바로가기 Code example index.html style.css Site Reference INSTAGRAM 바로가기 STUDY 바로가기 YOUTUBE 바로가기 INFLUENCER 바로가기
웹 표준 사이트 만들기 - 레이아웃 유형1
01. 레이아웃 유형 : 레이아웃01 난이도 쉬움 소스 다운로드 완성 소스 다운받기 소개 안녕하세요!. 웹스토리보이입니다. 사이트 만들기 위한 가장 기본적인 레이아웃 유형을 살펴보겠습니다. 레이아웃은 사이트를 만들기 위한 가장 기본적인 단계입니다. 사이트는 레이아웃 속에 레이아웃으로 구조화 되어 있기 때문에 레이아웃을 이해한다면, 사이트 제작이 수월해집니다. 레이아웃을 만드는 방법은 여러가지로 나눌 수 있습니다. table 방식, float 방식, flex 방식, grid 방식으로 나눌 수 있습니다. table 방식은 2000년 대 이전 방식으로 웹 표준을 준수하지 않은 방법으로 현재는 사용하지 않습니다. float 방식은 2020년 대 이전 방식으로 테이블 방식 대신 이 방법으로 주로 구현되어 왔습니다..
Parallax Effect - layout
패럴랙스 배우기 튜토리얼입니다. 이 강의는 기본적인 HTML, CSS, JavaScript, JQuery를 알고 있어야 배울 수 있는 강의입니다. 웹표준 강의, 반응형 강의, 메가박스 강의를 보고 오시면 도움이 됩니다.^^ 모든 강의는 소스를 보면서 따라하는 튜토리얼입니다. Code Youtube Code Sample 전체 소스는 여기서 다운 받을 수 있습니다. 바로가기 샘플 소스는 여기서 확인 할 수 있습니다. 바로가기 Sourece Reference Value link 이미지1 https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg1.jpg 이미지2 https://webstoryboy.github.io/wtss/refer-effect/assets..
1
2
3
4
···
46
레이아웃
레이아웃 연습1
레이아웃 연습2
레이아웃 연습3
레이아웃 연습4
레이아웃 연습5
레이아웃 연습6
레이아웃 연습7
사이트 제작
레이아웃1
레이아웃2
스킵메뉴
헤더배경 & 메뉴
헤더 타이틀 & 웹 폰트
헤더 아이콘
전체 메뉴
전체 타이틀
전체 배너
컨텐츠 레이아웃
게시판1
게시판2
게시판3
마우스 오버효과1
마우스 오버효과2
탭 메뉴
게시판4
갤러리
로그인
팝업
푸터 & W3C
스크립트
전체메뉴 스크립트
배너 스크립트
탭 메뉴 스크립트
갤러리 스크립트
레이어 팝업
윈도우 팝업
라이트 박스
마무리
기초
시멘틱 태그
미디어 쿼리
레이아웃
반응형 레이아웃1
반응형 레이아웃2
반응형 레이아웃3
반응형 레이아웃4
반응형 레이아웃5
사이트 만들기
문서 셋팅
아웃라이너
헤더 메뉴
헤더 타이틀
헤더 아이콘
헤더 아이콘 공유하기
전체 메뉴
라인 효과
타이틀
헤더 반응형
컨텐츠 레이아웃
컨텐츠 타이틀
메뉴
메뉴 반응형
게시판 한줄 효과
게시판 두줄 효과
블로그 영역 고해상도 이미지
블로그 영역 고해상도 이미지2
이미지 슬라이드
이미지 슬라이드2
라이트 박스
필터 이벤트
비디오
사이드 컨텐츠
푸터
접기/펼치기 스크립트
사이트 이펙트1
사이트 이펙트2
사이트 이펙트3
디자인 만들기
기본 셋팅
그리드 시스템 이해하기
360 그리드 만들기
600 그리드 만들기
768, 1280 그리드 만들기
960 그리드 만들기
레이아웃 만들기
헤더
헤더 반응형
배너
배너 반응형
컨텐츠1
컨텐츠1 반응형
컨텐츠1 반응형 수정
컨텐츠 2
컨텐츠 2 반응형
컨텐츠 3
컨텐츠 3 반응형
컨텐츠4
컨텐츠4 반응형
컨텐츠5
컨텐츠5 반응형
푸터
푸터 반응형
사이트 만들기
기본 셋팅
헤더 영역
배너 영역
헤더 반응형 - 모바일 메뉴
배너 - Swiper.js
배너 반응형
영화 차트 구조잡기
영화 차트 탭 메뉴
이미지 슬라이드
이미지 슬라이드 반응형
이벤트 영역
오프닝 영역
새로운 영화 영역
새로운 영화 영역2
공지사항 / 탭 메뉴
메가박스 할인카드
고객센터 / SVG
헬프 영역 반응형
푸터 영역
탭 메뉴 / 스킵 메뉴
Youtube API
마무리 및 Github
피그마 디자인 작업
Figma01
Figma02
Figma03
Figma04
Figma05
Figma06
Figma07
코딩 작업
문서 셋팅
헤더 영역
베스트 뮤직
최근 재생한 뮤직
다음 프로그램 영역
플레이 버튼
하단 네비게이션
이미지 슬라이드
기본 익히기
Parallax01 - Basic
Parallax02 - Menu
Parallax03 - Responsive Menu
Parallax04 - Side Menu
Parallax05 - Sticky Menu
Parallax06 - Hidden Menu
Parallax07 - Show/Hide Menu
Parallax08 - Dot Menu1
Parallax09 - Dot Menu2
Parallax10 - Dot Menu3
Parallax11 - Text Animation1
Parallax12 - Text Animation2
기본 익히기2
Parallax20 - 레이아웃
Parallax21 - 레이아웃2
Parallax22 - 레이아웃3
Parallax23 - 패럴랙스 효과
Parallax24 - 패럴랙스 효과V
Parallax25 - 이질감 효과
Parallax26 - 이질감 효과V
Parallax27 - 이질감 효과2
Parallax28 - 텍스트 효과
Parallax29 - 리빌 효과
Parallax30 - SVG 효과
Parallax31 - 링크 효과
Menu Effect - jQuery
Effect01 - 탭메뉴(준비완료)
Menu Effect02
Menu Effect03
Menu Effect04
Menu Effect05
Menu Effect06
Menu Effect07
Menu Effect08
Menu Effect09
Menu Effect10
Menu Effect - Javascript
Effect01 - 탭메뉴(준비완료)
Menu Effect02
Menu Effect03
Menu Effect04
Menu Effect05
Menu Effect06
Menu Effect07
Menu Effect08
Menu Effect09
Menu Effect10
Mouse Effect - jQuery
Effect01 - 따라다니기
Effect02 - 따라다니기2
Effect03 - 브랜딩 효과
Effect04 - 조명 효과
Effect05 - 이미지 효과
Effect06 - 이미지 효과2
Mouse Effect07
Mouse Effect08
Mouse Effect - Javascript
Effect01 - 따라다니기
Effect02 - 따라다니기2
Effect03 - 브랜딩 효과
Effect04 - 조명 효과
Effect05 - 이미지 효과
Effect06 - 이미지 효과2
Mouse Effect07
Mouse Effect08
Image Slider - jQuery
Slider01 - 페이드 효과(O)
Slider02 - 좌로 움직이기(O)
Image Slider03
Image Slider04
Image Slider05
Image Slider06
Image Slider - Javascript
Slider01 - 페이드 효과(O)
Slider02 - 좌로 움직이기(O)
Image Slider03
Image Slider04
Image Slider05
Image Slider06
Image Slider - swiper.js
Slider01
Slider02
Slider03
Slider04
Parallax Effect - Layout
Effect01 - 레이아웃
Parallax Effect - jQuery
Effect01 - 메뉴이동
Effect02 - 닷 메뉴
Effect03 - 숨김메뉴
Effect04 - 숨김메뉴2
Effect05 - 나타나기
Effect06 - 이질감
Effect07 - 텍스트 효과
Effect08 - 리빌 효과
Parallax Effect - Javascript
Effect01 - 메뉴이동
Effect02 - 닷 메뉴
Effect03 - 숨김메뉴
Effect04 - 숨김메뉴2
Effect05 - 나타나기
Effect06 - 이질감
Effect07 - 텍스트 효과
Effect08 - 리빌 효과
Parallax Effect - ready
395(준비중)
396(준비중)
405(준비중)
406(준비중)
Game Effect - Quiz
Quiz01
Quiz02
Quiz03
Quiz04
Quiz05
준비 작업
시작하기
문서 셋팅
웹 폰트 사용 방법
이미지 표현 방법
float 사용 방법
inline/block
레이아웃 유형
레이아웃 유형01(준비)
레이아웃 유형02(준비)
레이아웃 유형03(준비)
레이아웃 유형04(준비)
레이아웃 유형05(준비)
배너 유형
배너 유형01
카드 유형
카드 유형01
포트폴리오 만들기2
port Effect01
port Effect01
port Effect01
port Effect01
port Effect01
port Effect01
port Effect01
사이트 코딩하기
레이아웃
메인 페이지
어바웃 페이지
댓글 페이지
로그인 페이지
회원가입 페이지
연락처 페이지
PHP 코딩하기
레이아웃
메인 페이지
어바웃 페이지
댓글 페이지
로그인 페이지
회원가입 페이지
연락처 페이지
포트폴리오 만들기4
port Effect01
port Effect01
port Effect01
port Effect01
port Effect01
port Effect01
port Effect01
포트폴리오 만들기5
port Effect01
port Effect01
port Effect01
port Effect01
port Effect01
port Effect01
port Effect01
포트폴리오 만들기6
port Effect01
port Effect01
port Effect01
port Effect01
port Effect01
port Effect01
port Effect01
포트폴리오 만들기7
port Effect01
port Effect01
port Effect01
port Effect01
port Effect01
port Effect01
port Effect01
웹디자인 기능사
INTRO
레이아웃1_1
레이아웃1_2
레이아웃 유형2
가로 메뉴 유형1
가로 메뉴 유형2
가로 메뉴 유형3
세로 메뉴 유형1
세로 메뉴 유형2
탭 메뉴 유형
레이어 팝업
이미지 슬라이드 유형1
이미지 슬라이드 유형2
이미지 슬라이드 유형3
실전 사이트 만들기1-1
실전 사이트 만들기1-2
실전 사이트 만들기1-3
실전 사이트 만들기2-1
실전 사이트 만들기2-2
실전 사이트 만들기2-3
실전 사이트 만들기3-1
실전 사이트 만들기3-2
티스토리툴바
@web's Tutor
구독하기