CSS HTML JAVASCRIPT 웹디자인기능사 Webs298 2023년 웹디자인 기능사 실전 사이트 연습5 - E유형 Tutorial/webd 2023년 웹디자인 기능사 실전 사이트 : E유형 by @webs 2023. 05. 01. 40 웹디자인 기능사 실전 사이트 : E유형 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기소스 다운받기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 웹디자인 기능사에서 가장 어려운 부분인 E유형입니다. 반응형도 신경써야 하고 스크립트까지 접목시켜야 완성할 수 있습니다. 그럼 마지막까지 화이팅해봅시다. 인덱스 1. 구조 잡기 1-1. 준비하기 1-2. 전체 레이아웃 잡기 1-3. 각 섹션 작업하기 2. 각 섹션 작업하기 2-1. 헤더 작업하기 2-2. 슬라이드 작업하기 2-3. 게시판 작업하기 2-4. 갤러리 작업하기 2-5. 배너 작업하기 2-6. 푸터 작업하기 2.. 2023. 5. 15. 2023년 웹디자인 기능사 실전 사이트 연습4 - D유형 Tutorial/webd 2023년 웹디자인 기능사 실전 사이트 : D유형 by @webs 2023. 05. 01. 39 웹디자인 기능사 실전 사이트 : D유형 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기소스 다운받기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 웹디자인 기능사 D-2 유형을 해보겠습니다. 천천히 잘 따라오세요! 인덱스 1. 구조 잡기 1-1. 준비하기 1-2. 전체 레이아웃 잡기 1-3. 각 섹션 작업하기 2. 각 섹션 작업하기 2-1. 헤더 작업하기 2-2. 슬라이드 작업하기 2-3. 게시판 작업하기 2-4. 갤러리 작업하기 2-5. 배너 작업하기 2-6. 푸터 작업하기 2-7. 팝업 작업하기 1. 구조 잡기 1-1. 준비하기 우선 폴더를 먼저 셋팅하겠습니다.. 2023. 5. 15. 2023년 웹디자인 기능사 실전 사이트 연습3 - C유형 Tutorial/webd 2023년 웹디자인 기능사 실전 사이트 : C유형 by @webs 2023. 05. 01. 38 웹디자인 기능사 실전 사이트 : C유형 난이도 중급 소스 다운로드 완성 화면 보기 완성 코드 보기 미리보기 디자인 보기소스 다운받기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 C유형 연습니다. 샘플은 C-4 유형을 참고하시면 됩니다. 이번 레이아웃은 약간 옛날 스타일 레이아웃입니다. 이런 레이아웃을 아직까지 쓰고 잇는 회사가 있을까 싶은데.. 그래도 시험이니까 한번 만들어보죠! 고고 😫 인덱스 1. 구조 잡기 1-1. 준비하기 1-2. 전체 레이아웃 잡기 1-3. 각 섹션 작업하기 2. 각 섹션 작업하기 2-1. 헤더 작업하기 2-2. 슬라이드 작업하기 2-3. 게시판 작업하기 2.. 2023. 5. 15. 2023년 웹디자인 기능사 실전 사이트 연습2 - B유형 Tutorial/webd 2023년 웹디자인 기능사 실전 사이트 : B유형 by @webs 2023. 05. 01. 37 웹디자인 기능사 실전 사이트 : B유형 난이도 중급 소스 다운로드 완성 화면 보기 완성 코드 보기 미리보기 디자인 보기소스 다운받기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 B유형에서 하나 해보겠습니다. B유형도 업데이트 되기 전이랑 같은 유형이지만 전체 메뉴가 생긴것이 다릅니다. 그부분만 신경쓰면 다른 부분은 동일합니다. 너무 어렵지 않으니 포기하지 말고 끝까지 완수하길 바랍니다. 😵💫 인덱스 1. 구조 잡기 1-1. 준비하기 1-2. 전체 레이아웃 잡기 1-3. 각 섹션 작업하기 2. 각 섹션 작업하기 2-1. 헤더 작업하기 2-2. 슬라이드 작업하기 2-3. 게시판 작업하.. 2023. 5. 15. 2023년 웹디자인 기능사 실전 사이트 연습1 - A유형 Tutorial/webd 2023년 웹디자인 기능사 실전 사이트 : A유형 by @webs 2023. 05. 01. 36 웹디자인 기능사 실전 사이트 : A유형 난이도 중급 소스 다운로드 완성 화면 보기 완성 코드 보기 미리보기 디자인 보기소스 다운받기 소개 안녕하세요! 웹스토리보이입니다. 지금까지는 연습을 하였고, 이제부터는 실전 사이트를 만들어보겠습니다. 실제 시험인 것처럼 작업을 하겠습니다. 각 유형에서 한가지를 골라서 작업해보겠습니다. A유형에서는 강원천문대 A-3유형을 작업해보겠습니다. 그럼 시작해볼까요? 🫤 1. 구조 잡기 1-1. 레이아웃 작업 우선 레이아웃을 작업해보겠습니다. 기본 레이아웃을 잡고, 스크립트를 작업할 것입니다. 시험지를 받으면, 전체적인 디자인과 구조를 확인하고, 받은 이미.. 2023. 5. 15. 2023년 웹디자인 기능사 팝업 : P-1 Tutorial/webd 2023년 웹디자인 기능사 팝업 : P-1 by @webs 2023. 05. 01. 35 웹디자인 기능사 팝업 유형 : P-1 난이도 초급 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 스크립트에서 가장 쉬운 스크립트입니다. 버튼을 클릭하면 숨긴 내용 보여주고, 다시 클릭하면 안보여주고, 시작해보겠습니다. 1. 구조 잡기 이번에는 A-2 유형의 레이아웃을 사용하였습니다. 소스는 그대로 복사하셔서 사용하셔도 상관없습니다. * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } #wrap { width: 1200px; margin: 0 auto; } #header .. 2023. 5. 11. 2023년 웹디자인 기능사 탭 메뉴 : T-1 Tutorial/webd 2023년 웹디자인 기능사 탭메뉴 : T-1 by @webs 2023. 05. 01. 34 웹디자인 기능사 탭메뉴 유형 : T-1 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 탭메뉴 스크립트를 작업해보겠습니다. 그렇게 어렵지 않으니 하나씩 따라오세요! 그럼 바로 시작해보겠습니다. 1. 구조 잡기 이번에는 A-2 유형의 레이아웃을 사용하였습니다. 소스는 그대로 복사하셔서 사용하셔도 상관없습니다. * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } #wrap { width: 1200px; margin: 0 auto; } #header { width.. 2023. 5. 11. 2023년 웹디자인 기능사 메뉴 : S-6 Tutorial/webd 2023년 웹디자인 기능사 슬라이드 : S-6 by @webs 2023. 05. 01. 33 웹디자인 기능사 슬라이드 유형 : S-6 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이미지 슬라이드도 마지막 유형입니다. 거의 끝이 보이기 시작했네요! 여러분들도 여기까지 잘 따라오셨는지 궁금하네요! 잘 하고 있으면 댓글 부탁드립니다. 마지막 유형은 조금 까다롭습니다. 아마 웹디기에서 제일 어려운 부분이 아닐까 싶습니다. 위아래 움직이기 위해서는 높이값이 잡혀야 하는데 height값을 퍼센트로 표현하는 건 힘듭니다. 브라우저는 내리면 계속 내려가기 때문에 height: 100%값이 존재하지 않습니다. 물론 부모 박스 높이 값.. 2023. 5. 11. 2023년 웹디자인 기능사 메뉴 : S-5 Tutorial/webd 2023년 웹디자인 기능사 슬라이드 : S-5 by @webs 2023. 05. 01. 32 웹디자인 기능사 슬라이드 유형 : S-5 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 반응형 이미지 슬라이드 S-5 유형입니다. 이번 유형은 S-2 유형과 유사하지만, 반응형으로 작업하기 위해서는 가로 값을 퍼센트로 설정해야 하고, 이미지는 백그라운드로 처리하는 것이 포인트입니다. 그래서 S-2 유형을 어느 정도 이해했다면 이번 유형도 쉽게 할 수 있을겁니다. 그럼 시작해보겠습니다. 1. 구조 잡기 이번에도 E-1 유형의 레이아웃을 사용하였습니다. 소스는 그대로 복사하셔서 사용하셔도 상관없습니다. * { margin: 0; p.. 2023. 5. 11. 2023년 웹디자인 기능사 메뉴 : S-4 Tutorial/webd 2023년 웹디자인 기능사 슬라이드 : S-4 by @webs 2023. 05. 01. 31 웹디자인 기능사 슬라이드 유형 : S-4 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 웹디자인기능사의 하이라이트 이미지슬라이드 반응형 S-4 유형입니다. 이번에 반응형 레이아웃이 새롭게 생기면서 이미지 슬라이드도 반응형에 맞추어서 작업을 해야 합니다. 하지만 시험지에는 반응형으로 이미지 슬라이드를 구현하시오! 라는 내용이 없습니다. 그래서 이미지를 적절하게 포토샵에서 자른 후 반응형이 아닌 대충 크기를 맞추어도 상관이 없을 듯합니다. 이 부분은 저도 자세히 모르니 여러분이 시험을 보시고 옳은 정보를 알려주시면 감사하겠습니다. .. 2023. 5. 11. 2023년 웹디자인 기능사 메뉴 : S-3 Tutorial/webd 2023년 웹디자인 기능사 슬라이드 : S-3 by @webs 2023. 05. 01. 30 웹디자인 기능사 슬라이드 유형 : S-3 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 마지막 이미지 슬라이드입니다. 이번 유형은 두번째 유형과 똑같습니다. 이미지가 좌에서 위로 움직이는 것 빼고는 똑같습니다. 이 부분은 몇 가지만 바꾸면 구현이 되기 때문에 두번째 유형을 완벽하게 이해했다면, 응용해서 작업할 수 있는 유형입니다. 저랑 같이 하기 전에 먼저 해보시는 것을 추천합니다. 그럼 시작해볼까요? 🫢 1. 구조 잡기 이번에는 A-2 유형의 레이아웃을 사용하겠습니다. 레이아웃을 그대로 복사하셔서 사용하셔도 됩니다. * { m.. 2023. 5. 10. 2023년 웹디자인 기능사 메뉴 : S-2 Tutorial/webd 2023년 웹디자인 기능사 슬라이드 : S-2 by @webs 2023. 05. 01. 29 웹디자인 기능사 슬라이드 유형 : S-2 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 좌우로 움직이는 이미지 슬라이더를 구현해보겠습니다. 좌로 움직이는 이미지 슬라이더는 두가지 유형으로 구분할 수 있습니다. 1 2 3 이미지고 보이고 다시 1로 이동 후 보여주는 방식과 1 2 3 1 2 3 무한으로 연속적으로 자연스럽게 보여주는 방식이 있습니다. 첫 번째 방법이 더 간단하고, 소스도 짧겠지만, 시험에서는 두번째 방식을 원하는 것 같습니다. 그래서 두번째 방법으로 작업을 시작해보겠습니다. 그럼 시작해볼까요? 😚 1. 구.. 2023. 5. 10. 2023년 웹디자인 기능사 메뉴 : S-1 Tutorial/webd 2023년 웹디자인 기능사 슬라이드 : S-1 by @webs 2023. 05. 01. 28 웹디자인 기능사 슬라이드 유형 : S-1 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 웹디자인기능사의 하이라이트! 제일 어려운! 제일 재밌는! 이미지 슬라이드입니다. 이 영역은 시험장에서 구현을 못하면 바로 떨어집니다. 무조건 암기하고 또 암기하고, 이해해야, 구현이 가능해야 합니다. 이미지 슬라이드의 유형은 크게 3가지로 나누어 집니다. 페이드 효과, 좌우 슬라이드 효과, 위아래 슬라이드 효과입니다. 페이드 효과는 이미지가 제자리에서 천천히 없어지고 천천히 나타나는 유형이고, 좌우 슬라이드 효과는 이미지고 우에서 좌로 움직이.. 2023. 5. 10. 2023년 웹디자인 기능사 메뉴 : M-6 Tutorial/webd 2023년 웹디자인 기능사 메뉴 : M-6 by @webs 2023. 05. 01. 27 웹디자인 기능사 메뉴 유형 : M-6 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 드뎌 메뉴 유형도 마지막입니다. 마지막 유형은 백그라운드가 들어간 메뉴 유형입니다. M-3 유형에서 작업을 했습니다. 이번엔 전체 배경이 가로로 들어간 형태이기 때문에 기존 유형과 약간 다르기 합니다. 그래도 원리는 동일하니까! 바로 한번 시작해보겠습니다. 1. 구조 잡기 이번에도 D-1 유형 레이아웃에 메뉴 유형을 작업을 해보겠습니다. 기본적인 코드는 그대로 복사하셔서 사용하셔도 됩니다. * { margin: 0; padding: 0; } li {.. 2023. 5. 9. 2023년 웹디자인 기능사 메뉴 : M-5 Tutorial/webd 2023년 웹디자인 기능사 메뉴 : M-5 by @webs 2023. 05. 01. 26 웹디자인 기능사 메뉴 유형 : M-5 난이도 중급 소스 다운로드 완성 화면 보기 완성 코드 보기 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 메뉴 유형 5번째 시간입니다. 이 유형은 M-4 유형과 동일합니다. 단지 서브메뉴의 위치만 다르기 때문에 이것은 CSS로 컨트롤 해주면 됩니다. 스크립트 부분은 동일하게 때문에 먼저 해보시고, 따라하시면 더 도움이 될 것 같습니다. 그럼 시작해보겠습니다. 😇 1. 구조 잡기 이번에도 D-1 유형 레이아웃에 메뉴 유형을 작업을 해보겠습니다. 기본적인 코드는 그대로 복사하셔서 사용하셔도 됩니다. * { margin: 0; padding: 0;.. 2023. 5. 9. 2023년 웹디자인 기능사 메뉴 : M-4 Tutorial/webd 2023년 웹디자인 기능사 메뉴 : M-4 by @webs 2023. 05. 01. 25 웹디자인 기능사 메뉴 유형 : M-4 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 네번째 메뉴 유형을 작업하겠습니다. 이번 메뉴는 세로 유형이며, 사이드 메뉴가 있는 레이아웃에서 사용되는 메뉴 스타일입니다. PDF를 확인해보면 반응형 레이아웃 및 정적인 레이아웃에서 다 사용이 되지만 반응형에서 메뉴 유형이 조금 더 어려울 것 같아서 이번에는 반응형 레이아웃에서 작업을 해보겠습니다. 가로형 1,2,3과 세로형 1,2,3는 같은 원리이지만, 가로 세로에 따라 약간의 차이가 있습니다. 기존에 1,2,3번을 다시 한번 복습한다고.. 2023. 5. 9. 2023년 웹디자인 기능사 메뉴 : M-3 Tutorial/webd 2023년 웹디자인 기능사 메뉴 : M-3 by @webs 2023. 05. 01. 24 웹디자인 기능사 메뉴 유형 : M-3 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 가로 메뉴 유형 3번째 시간이 되겠습니다. 3번째 유형의 특징은 마우스 오버시 서브메뉴의 전체 배경이 나온다는 것이 두번째 유형과 다른 점입니다. 이런 유형은 웹 사이트에서 많이 쓰이는 메뉴 유형으로 활용성이 높습니다. 비록 시험이지만 실제 실무에서도 많이 쓰이기 때문에 꼭 알아두면 좋을 것 같습니다. 그럼 또 시작해볼까요!😃 1. 구조 잡기 미리보기를 확인하시면 서브 메뉴가 전체 영역을 차지하는 메뉴 유형입니다. 메뉴가 헤더 밑 부분으로 .. 2023. 5. 9. 2023년 웹디자인 기능사 메뉴 : M-2 Tutorial/webd 2023년 웹디자인 기능사 메뉴 : M-2 by @webs 2023. 05. 01. 23 웹디자인 기능사 메뉴 유형 : M-2 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 가로 메뉴 유형 2번째 시간이 되겠습니다. 미리보기 버튼을 통해 완성할 스크립트를 확인해보세요! 두번째 메뉴는 첫번째와 다르게 전체 서브메뉴가 나오는 구조입니다. 첫번째는 해당 메뉴만 나오지만 두번째는 전체 서브 메뉴가 나오는 구조라 스크립트 상의 차이점은 별거 없습니다. 우선 시험장에서 당황하지 않고 작업하려면 CSS부터 완벽하게 하고 넘어가야 합니다. 그럼 시작해보겠습니다. 렛츠기릿🥹 1. 구조 잡기 미리보기 화면을 확인해 보시면 메뉴에.. 2023. 5. 9. 2023년 웹디자인 기능사 메뉴 : M-1 Tutorial/webd 2023년 웹디자인 기능사 메뉴 : M-1 by @webs 2023. 05. 01. 22 웹디자인 기능사 메뉴 유형 : M-1 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 웹디기의 하이라이트 스크립트 유형입니다. 코딩을 처음 해본 분들은 가장 어렵게 느낄 수 있는 부분인데요! 저도 처음엔 어떻게 하면 스크립트를 가장 짧고, 간단하게 외울 수 있을까 고민을 많이 했는데요! '중요한건 실무에서 어떻게 활용할 수 있을까?'가 가장 중요하지 않을까 싶습니다. 그래서 소스를 짧고 간단하게 구현하는 것보단, 논리적인 순서에 맞게, 흐름에 맞게 코드를 이해하기 쉽게 만드는 것이 가장 중요하다고 생각합니다. 그래서 소스가 .. 2023. 5. 9. 2023년 웹디자인 기능사 레이아웃 : E-4 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : E-4 by @webs 2023. 05. 01. 21 웹디자인 기능사 레이아웃 유형 : E-4 난이도 중간 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 E유형을 작업해보겠습니다. 아마도 레이아웃 유형 중에 제일 어려운 유형이 아닐까 싶네요! 하지만 몇 번만 만들어 보면 여러분들도 충분히 할 수 있습니다. 그럼 다 같이 시작해봅시다. 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 E-4.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 E-4으로 변경해주겠습니다. 상단에.. 2023. 5. 7. 2023년 웹디자인 기능사 레이아웃 : E-3 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : E-3 by @webs 2023. 05. 01. 20 웹디자인 기능사 레이아웃 유형 : E-3 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. E-3 유형을 작업해보겠습니다. 이번 유형은 E-2 유형과 동일합니다. 링크 대신에 배너가 들어간 것뿐, 차이점이 없습니다. 그러니 이번에는 혼자서 해보고 저랑 같이 해보는게 좋을 것 같네요! 그럼 한번 해보고 오세요^^ 🤩 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 E-3.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 .. 2023. 5. 7. 2023년 웹디자인 기능사 레이아웃 : E-2 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : E-2 by @webs 2023. 05. 01. 19 웹디자인 기능사 레이아웃 유형 : E-2 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 E-2 유형을 작업해보겠습니다. E-1 유형과 동일하지만 차이점이 있다면 높이값이 임의지정입니다. E-1 유형은 화면 높이 값에 딱 맞추었다면, E-2 유형은 높이 값을 임의로 지정하기 때문에 딱 맞출 필요는 없습니다. 그럼 시작해볼까요? 🥹 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 E-2.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title.. 2023. 5. 7. 2023년 웹디자인 기능사 레이아웃 : E-1 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : E-1 by @webs 2023. 05. 01. 18 웹디자인 기능사 레이아웃 유형 : E-1 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 E유형을 작업해보겠습니다. 아마도 레이아웃 유형 중에 제일 어려운 유형이 아닐까 싶네요! 하지만 몇 번만 만들어 보면 여러분들도 충분히 할 수 있습니다. 그럼 다 같이 시작해봅시다. 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 E-1.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 E-1으로 변경해주겠습니다. 상단에.. 2023. 5. 7. 2023년 웹디자인 기능사 레이아웃 : D-4 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : D-4 by @webs 2023. 05. 01. 17 웹디자인 기능사 레이아웃 유형 : D-4 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 D유형의 마지막 레이아웃을 연습해보겠습니다. 전체적인 유형은 동일하나 세부적인 부분이 조금 틀린 구조입니다. 기본에 충실하다면 어떻게 변형하여도 여러분은 코딩할 수 있을거예요! 🫢 그럼 시작해볼까요! 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 D-4.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 D-4으로 변경해.. 2023. 5. 7. 2023년 웹디자인 기능사 레이아웃 : D-3 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : D-3 by @webs 2023. 05. 01. 16 웹디자인 기능사 레이아웃 유형 : D-3 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 D-3 유형을 작업해보겠습니다. D-3 유형은 D-1 유형과 비슷합니다. 푸터를 제외하고는 비슷합니다. 복습하는 개념으로 한번 해보겠습니다. 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 D-3.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 D-3으로 변경해주겠습니다. 상단에 디자인 보기 버튼을 누르면 전체적인 레이.. 2023. 5. 7. 2023년 웹디자인 기능사 레이아웃 : D-2 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : D-2 by @webs 2023. 05. 01. 15 웹디자인 기능사 레이아웃 유형 : D-2 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 D-2유형을 작업해보겠습니다. D-1유형과 비슷하지만 컨텐츠 영역은 조금 다릅니다. 샘플이미지를 보고 잘 따라해주세요! 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 D-2.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 D-2으로 변경해주겠습니다. 상단에 디자인 보기 버튼을 누르면 전체적인 레이아웃을 한 눈에 볼 수.. 2023. 5. 7. 2023년 웹디자인 기능사 레이아웃 : D-1 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : D-1 by @webs 2023. 05. 01. 14 웹디자인 기능사 레이아웃 유형 : D-1 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 D유형을 작업해보겠습니다. 이번 유형은 반응형 유형으로 전체화면을 기준으로 작업하게 됩니다. 기존에 레이아웃과는 많은 부분이 다르기 때문에 좀 더 디테일하게 작업하셔야 합니다. 샘플 PDF를 참고하여 수치도 정확하게 작업해야 합니다. 그럼 시작해보겠습니다. 🤩 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 D-1.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 .. 2023. 5. 6. 2023년 웹디자인 기능사 레이아웃 : C-4 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : C-4 by @webs 2023. 05. 01. 13 웹디자인 기능사 레이아웃 유형 : C-4 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 C-4유형을 작업해보겠습니다. 기존 레이아웃과 똑같고, 푸터만 다르기 때문에 이번에도 얼릉 작업해보겠습니다. 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 C-4.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 C-4으로 변경해주겠습니다. 상단에 디자인 보기 버튼을 누르면 전체적인 레이아웃을 한 눈에 볼 수 있으니 참.. 2023. 5. 6. 2023년 웹디자인 기능사 레이아웃 : C-3 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : C-3 by @webs 2023. 05. 01. 12 웹디자인 기능사 레이아웃 유형 : C-3 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 C-3유형을 작업해보겠습니다. 기존 레이아웃과 비슷하기 때문에 얼릉 작업해보겠습니다. 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 C-3.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 C-3으로 변경해주겠습니다. 상단에 디자인 보기 버튼을 누르면 전체적인 레이아웃을 한 눈에 볼 수 있으니 참고해주세요! 전체적인 구.. 2023. 5. 6. 2023년 웹디자인 기능사 레이아웃 : C-2 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : C-2 by @webs 2023. 05. 01. 11 웹디자인 기능사 레이아웃 유형 : C-2 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. C-2유형을 작업해보겠습니다. 벌써 11번째 레이아웃입니다. 10번 정도 따라하니까 감이 잡히죠^^ 설명할 때 기초적인 부분을 세세하게 하지 못해도, 반복적으로 따라하시면 느낌이 오실거라 생각이 듭니다. 그래도 잘 모르겠다면, 검색을 하거나, GTP한테 물어보면 거의 해결될 것입니다. 중요한건 흐름이나 방법을 아는게 중요합니다. CSS 속성이나 HTML 태그는 방법을 알고나면, 검색하면 다 나오니까, 그런 부분을 잘 모른다고, 속상해 할 필요.. 2023. 5. 6. 이전 1 2 3 4 ··· 10 다음
