CSS HTML JAVASCRIPT 웹디자인기능사 GSAP 포트폴리오 유튜브 Tutorial/WebD40 2023년 웹디자인 기능사 레이아웃 : C-3 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : C-3 by @webs 2023. 05. 01. 11 웹디자인 기능사 레이아웃 유형 : 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. 10 웹디자인 기능사 레이아웃 유형 : C-2 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. C-2유형을 작업해보겠습니다. 벌써 11번째 레이아웃입니다. 10번 정도 따라하니까 감이 잡히죠^^ 설명할 때 기초적인 부분을 세세하게 하지 못해도, 반복적으로 따라하시면 느낌이 오실거라 생각이 듭니다. 그래도 잘 모르겠다면, 검색을 하거나, GTP한테 물어보면 거의 해결될 것입니다. 중요한건 흐름이나 방법을 아는게 중요합니다. CSS 속성이나 HTML 태그는 방법을 알고나면, 검색하면 다 나오니까, 그런 부분을 잘 모.. 2023. 5. 6. 2023년 웹디자인 기능사 레이아웃 : C-1 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : C-1 by @webs 2023. 05. 01. 09 웹디자인 기능사 레이아웃 유형 : C-1 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. C유형을 작업해보겠습니다. C유형은 예전에 2000년대 초창기때 많이 쓰던 레이아웃입니다. 가운데 정렬이 아닌 왼쪽정렬로 사이트와 컨텐츠로 구성된 레이아웃입니다. 이 레이아웃은 2023년 버전 업 되기 전에 레이아웃이여서 비교적 쉽습니다. 그럼 쨈싸게 끝내고 D유형으로 가보겠습니다. 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 C-1.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과.. 2023. 5. 6. 2023년 웹디자인 기능사 레이아웃 : B-4 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : B-4 by @webs 2023. 05. 01. 08 웹디자인 기능사 레이아웃 유형 : B-4 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. B유형의 마지막 B-4유형을 작업해보겠습니다. 기존의 B유형과 마찬가지로 동일한 구조에 푸터구조만 조금 다른 구조입니다. 그럼 마지막으로 복습한다는 생각으로 빠르게 진행해 보겠습니다. 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 B-4.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 B-4으로 변경해주.. 2023. 5. 6. 2023년 웹디자인 기능사 레이아웃 : B-3 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : B-3 by @webs 2023. 05. 01. 07 웹디자인 기능사 레이아웃 유형 : B-3 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번 유형도 전체 유형과 가운데 유형이 혼합된 레이아웃입니다. B-1, B-2에서는 각각 세션의 container유형을 각각 만들어서 속성을 설정했습니다. 하지만 이번에는 container 속성을 재활용해서 사용해보겠습니다. 재활용를 한다는 것은 여러번 쓸 수 있다는 얘기입니다. 즉 class를 적극적으로 사용한다는 의미입니다. 가령 id라는 선택자는 한번만 사용할 수 있고, class라는 선택자는 여러번 재사용이 가능.. 2023. 5. 6. 2023년 웹디자인 기능사 레이아웃 : B-2 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : B-2 by @webs 2023. 05. 01. 06 웹디자인 기능사 레이아웃 유형 : B-2 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. B유형의 두번째 레이아웃을 만들어보겠습니다. B-1유형의 원리를 이해했다면 B-2유형도 쉽게 만들 수 있습니다. 한번 더 연습해보고 빨리 감 잡을께요! 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 B-2.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 B-2으로 변경해주겠습니다. 상단에 디자인 보기 버.. 2023. 5. 6. 2023년 웹디자인 기능사 레이아웃 : B-1 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : B-1 by @webs 2023. 05. 01. 05 웹디자인 기능사 레이아웃 유형 : B-1 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이제 B유형을 만들어보겠습니다. B유형은 A유형과 다르게 전체 영역이 들어갑니다. 이런 유형은 실제 사이트에서도 많이 쓰는 부분이기에, 꼭 알고 넘어가는게 좋습니다. 전체 영역이 들어가기 때문에 A유형 보다는 조금 복잡할 수 있습니다. 그래도 반복연습하면 금방 이해가 될거예요! 그럼 시작해보겠습니다. 🥲 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 B-1.html파일을 만들겠습니다. !를 치고 ta.. 2023. 5. 6. 2023년 웹디자인 기능사 레이아웃 : A-4 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : A-4 by @webs 2023. 05. 01. 04 웹디자인 기능사 레이아웃 유형 : A-4 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. A유형의 마지막 A-4유형을 만들어보겠습니다. A-4유형도 A-3유형과 동일합니다. 푸터 영역의 위치만 다를 뿐 거의 똑같다고 보면 됩니다. 이번에는 마지막 유형이니 혼자 한번 해보고 저랑 같이 확인해보는 것이 좋을 것 같습니다. 먼저 해보시고 저랑 차이점을 비교해보면 더 좋을것 같네요. 그럼 고고!😗 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 A-4.html파일을 만들겠습니다. !를 치고 tab.. 2023. 5. 6. 2023년 웹디자인 기능사 레이아웃 : A-3 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : A-3 by @webs 2023. 05. 01. 03 웹디자인 기능사 레이아웃 유형 : A-3 난이도 쉬움 소스 다운로드 완성 화면 보기 완성 코드 보기 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. A-2유형도 A-3유형과 푸터만 빼고 거의 똑같습니다. 하단 메뉴와 카피라이터가 있는 구조로 별로 어렵지 않습니다. A유형은 기본 골격은 같고 푸터만 살짝 다른 유형으로 이루어져 있어서 어렵지 않습니다. 그럼 바로 시작해보겠습니다.😅 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 A-3.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변.. 2023. 5. 6. 2023년 웹디자인 기능사 레이아웃 : A-2 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : A-2 by @webs 2023. 05. 01. 02 웹디자인 기능사 레이아웃 유형 : A-2 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 2023버전 웹디자인 기능사 레이아웃 A-2유형을 작업하겠습니다. A-1유형과 A-2유형은 동일합니다. 안에 내용물만 틀릴뿐 전체적인 구조는 동일합니다. A-1유형에는 div태그를 이용해서 작업했다면, 이번에는 시멘틱 태그1를 통해 작업해보겠습니다. 웹디자인 기능사 시험은 웹표준을 준수하여 작업하라고 명시되어 있습니다. 기본 div 태그를 이용하여 작업하여도, 구성하는데에는 문제가 없지만, 웹 접근성 향상을 위해 이번에.. 2023. 5. 6. 2023년 웹디자인 기능사 레이아웃 : A-1 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : A-1 by @webs 2023. 05. 01. 01 웹디자인 기능사 레이아웃 유형 : A-1 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 2023버전 웹디자인 기능사 실기시험에 가장 중요한 레이아웃 연습을 시작하겠습니다. 레이아웃은 2023버전부터 두개의 레이아웃이 추가되었습니다. 새로운 레이아웃이 조금 어려울 수 있지만, 실제 사이트 제작에 있어 많이 활용되는 부분이기 때문에 알아두면 도움이 될 것이라고 생각이 듭니다. 레이아웃은 실제 사이트 제작시 가장 중요한 부분입니다. 레이아웃이 가장 기본이기 때문에 기본을 완벽하게 익히면 어떤 유형이 나와도 코딩.. 2023. 5. 6. 2023년 웹디자인 기능사 준비하기 Tutorial/webd 2023년 웹디자인 기능사 준비하기 by @webs 2023. 05. 01. 01 웹디자인 기능사 준비하기 난이도 쉬움 소스 다운로드 완성 화면 보기X 완성 코드 보기X 소개 안녕하세요! 웹스토리보이입니다. 2023버전 웹디자인 기능사를 준비하시는 분들을 위한 정보를 제공하는 블로그입니다. 2023버전 웹디자인 기능사에 핵심인 레이아웃 만드는 방법 5가지 유형과 스크립트를 통한 이미지 슬라이드, 탭 메뉴, 팝업 등을 정리하였습니다. 비록 시험을 위한 준비지만, 최신 웹사이트 트렌트에 맞게 최신 문법을 사용하여 제작하였습니다. 이 튜토리얼은 코딩 공부하고 싶은 초보자부터, 이미 경력이 있는 디자이너까지 모두를 위한 정보를 제공합니다. 블로그 내용을 통해 코딩을 처음 접하는 분들도 .. 2023. 5. 6. 이전 1 2 다음
