코딩하는라민

웹디자인기능사 실기 공부 시 참고하면 좋은 사이트 ▶ 실기 공부시 참고한 사이트 webStudyBasic 웹디자인 기능사 실기 시험 공부 webstudybasic.pe.kr 시험지 종류별, 유형별 완성된 페이지가 정리된 사이트입니다. 이런 식으로 타입, 슬라이드, 메뉴 별로 나눠있어서 찾아보기 편합니다. [F12] - [소스] 에 들어가면 html, css, script 소스를 확인할 수 있어서 공부하기 좋습니다. 👍🏻 ▶ 유튜브 강의 저는 강의는 안 들었지만 사람들이 많이 듣는 웹디자인기능사 유튜브 강의입니다. 유형별로 강의가 있어서 처음에 기초를 다지기 좋은 사이트입니다. https://www.youtube.com/c/Webstoryboy www.youtube.com ↑ 웹스토리보이님의 유튜브 강의 ..

웹디자인기능사 드디어 실기 시험 하루 전. 시험보기 전에 보고 들어갈 것 메모 혹시라도 자동입력이 안 되거나, 잊어버릴 것 같은 부분들을 시험 시작 전에 보려고 정리해놓은 것. 1. html, css 기본 구조 .. @charset "UTF-8"; ... ▶ 혹시라도 자동 입력이 안 될 경우를 대비해서 이 정도는 외워두고자 정리. ▶ 독타입은 html ▶ html 태그에는 lang="ko" ▶ html에는 meta 태그에 charset="UTF-8" ▶ css에 @charset "UTF-8"; 잊어버리지 않기! *{ padding:0; margin:0; box-sizing:border-box; color:#333333; font-family: "맑은 고딕",sans-serif; } a{ text-deco..

[웹디자인기능사 실기] 남도맛기행 축제 C-3 0. 이전 유형과 다른 점 ✅ 세로 메뉴 - 서브 메뉴가 세로로 펼쳐지는 것이 아닌 우측으로 펼쳐진다. 1. 헤더 1-1. mark-up 남도맛기행축제 협회소개 인사말 명인 오시는길 행사안내 요리경연대회 전시참가 참가신청 홍보마당 축제소식 보도자료 레시피 회원마당 Q&A 사진갤러리 공지사항 ✅ 헤더의 전체적인 구조는 이전과 모두 동일하다. ✅ 모든 요소에 a 태그가 있는지, a 태그에는 임시 링크 # 이 붙어있는지 확인하기 1-2. css .wrap{ width: 1000px; height: 650px; display: flex; } /* 헤더 */ header{ width: 200px; height: 650px; text-align: center; posi..

[웹디자인기능사 실기] html, css 유효성 검사하기 유효성 검사? ▶ 이렇게 시험지 뒤쪽에 있는 기술적 준수사항에 보면 유호성 검사에 'ERROR' 가 없도록 코딩하여야 한다고 명시되어 있다. 하지만 시험장에서는 인터넷을 사용할 수 없으므로, 이 유효성 검사를 돌려볼 수 없다. 따라서 시험 전에 코드를 연습할 때마다 돌려보고 자주 틀리는 부분을 숙지하고 시험장에 들어가야할 것. ▶ 오류가 없는 파일의 경우 No errors 라고 표시가 뜬다. ▶ 하지만 오류가 있는 경우 error 와 warnming 이라는 문구가 뜬다. ▶ 이런 경우 잘못된 line 수를 알려주므로, 찾아서 수정해준다. html 오류의 유형 1. li 의 부모가 잘못된 경우 ▶ li 를 ul, ou 안에 넣지 않은 경우. ▶ li..

[웹디자인기능사 실기] 부여 가을연꽃축제 ✅ 콘텐츠는 왼쪽정렬 ✅ 세로메뉴 ✅ 슬라이드는 서서히 나타났다 서서히 사라지게 ✅ 탭 메뉴는 없음 ✅ 푸터에 패밀리 사이트 1. 헤더 - 세로 메뉴 1-1. mark-up 축제소개 초대의 글 축제개요 축제연혁 오시는길 행사안내 셔틀버스안내 행사안내 행사일정 소공연장 홍보마당 축제소식 보도자료 음식레시피 참여마당 참가후기 연꽃갤러리 포토갤러리 ... ✅ 로고 : 포토샵 이미지 or html 텍스트 ✅ ul 안에 ul : ul.gnb li 안에 ul.sub_list li 가 들어있는 구조. ✅ 다 a로 감쌌는지 확인, a태그의 링크는 #이 들어갔는지 확인 ✅ 텍스트 또는 이미지가 a태그 안에 있는지 확인(바깥으로 빠져나가면 안 됨) 1-2. css .wrap{ wi..

[웹디자인기능사 실기 독학] 0. 이전 유형(A, B)과 다른점 ✅ 헤더에 세로 메뉴 바로 구성됨 1. 헤더 1-1. 메뉴 바 mark-up 이용안내 이용방법 이용시간 이용요금 이벤트정보 현장이벤트 온라인이벤트 이벤트예약 프로그램 프로그램안내 온라인예약 단체상담예약 고객센터 공지사항 자주묻는질문 자료실 1-2. 메뉴 바 css .wrap{ width: 1000px; display: flex; } header{ width: 200px; height: 650px; text-align: center; position: relative; z-index: 10; } header h1{ width: 200px; margin-top: 30px; } header nav{ width: 200px; height: 550p..

웹디자인기능사 실기 독학] 대한은행 0. 이전 유형(A-1~4)과 달라진 점 3-1. 콘텐츠 영역 mark-up ✅ 브라우저의 전체 넓이(100%)가 생김, 그에 따른 안의 콘텐츠들은 가운데 정렬 ✅ 그 이외에는 동일 1. 헤더 1-1. 헤더 mark-up 개인 조회 이체 공과금 예금/신탁 기업 조회 이체 전자결제 수표/어음 금융상품 저축상품 대출상품 투자상품 카드 카드정보 카드신청 이용내역조회 ✅ header는 100% 영역으로 설정, 아래에 header_in 추가하여 가로 영역 1200px 으로 설정 1-2. 헤더 css header{ width: 100%; height: 100px; text-align: center; position: relative; z-index: 10; background: ..

[웹디자인기능사 실기 독학] 유진건설 0. 이전 유형(A-1, A-2, A-3)과 다른점 ✅ 갤러리 이미지에 호버했을 경우 투명도 변화 ✅ 푸터 영역에 로고 없어지고, 구성 변화. 1. 헤더 회사단소개 인사말 조직구성도 오시는길 사업영역 전원주택 도시재생 인테리어 입주정보 입주단지 입주캘린더 고객센터 공지사항 건축상담 홍보자료실 header{ width: 1200px; height: 100px; text-align: center; position: relative; z-index: 10; } header h1{ width: 200; height: 40px; float: left; margin-top: 30px; } header nav{ width: 100%; float: right; margin-top:..

[웹디자인기능사 실기 독학] 강원천문대 제일 먼저 해야할 것 1. 컬러가이드 2. 와이어프레임 0. 이전 유형(A-1, A-2)과 다른 것 ✅ 이미지 슬라이드는 서서히 나타나고, 서서히 사라짐 ✅ 서브 메뉴가 하나씩 떨어진다. ✅ 푸터의 구성 1. 헤더 1-1. 메뉴 바 mark-up 강원천문대 천문대소개 인사말 오시는길 이용안내 프로그램 관람시간표 이달의 별자리 천문대예약 예약하기 예약확인 예약취소 커뮤니티 공지사항 방문후기 자유게시판 1-2. 메뉴 바 css header{ width: 1200px; height: 100px; text-align: center; position: relative; z-index: 10; } header h1{ width: 200; height: 40px; float: ..

[웹디자인기능사 실기 독학] 그린복지재단 ※ 이번에는 지난번 형태와 비슷하므로 시간 절약을 위해서 중복되는 부분은 빼고, 차이가 있는 부분만 작성 제일 먼저 해야할 것 1. 컬러 가이드 2. 와이어프레임 0. 이전 유형(A-1)과 다른점 ✅ 메인 메뉴의 위치는 조금 아래로 ✅ 서브 메뉴에 배경이 있다. ✅ 이미지 슬라이드는 좌우로 전환 ✅ 탭 메뉴가 없이 공지사항, 갤러리, 배너로 구성 ✅ 패밀라 사이트 추가 1. 헤더 ✅ A-1에 비해 헤더의 높이가 좀 더 내려왔음 ✅ 서브메뉴 너비가 전체 너비와 같다.(배경이 있음) - 지난번 A-1 JUST 쇼핑몰에서는 이러한 형태였다. 1-1. 메뉴 바 mark-up 재단소개 설립취지 연혁 찾아오시는길 후원하기 국내후원 국외후원 맞춤후원 자료실 서식자료실 사진자료..