본문 바로가기

Webstoryboy

*

CATAGORY

Code

전체 글

(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

티스토리툴바