HighLight in your life~

메뉴 좌측이 풀로 펼쳐짐, 하단에 로그인/회원가입 버튼, 상단 우측 퀵 메뉴, 고정 넓이가 아닌 점

반응형 넓이의 경우 calc() 속성 사용

https://webstoryboy.co.kr/category/Tutorial/WebD

*** 시험 주의사항
1. 상호작용이 필요한 모든 콘텐츠(로고, 메뉴, 버튼, 바로가기 등)는 임시 링크(예: #)를 적용하고 tab키로 이동할 수 있어야 한다. (감점요인)
2. 모든 이미지에는 이미지에 대한 대체 텍스트 표기한다. alt 속성이 있어야 한다. (감점요인)
3. 폴더 용량은 5MB를 넘으면 안된다. (용량이 넘으면 제출 못 함)
4. 나머지 다 구현해도 슬라이드 구현 못 하면 실격 처리
5. 메인 페이지는 반드시 최상위 폴더에 index.html로 만들어야 한다.
6. html, css는 charset utf-8로 제작해야 한다.
 - css는 @charset "UTF-8"; 최상단에 추가해주기
7. 웹 표준 준수하기 (main, header, footer, section, article 등)
 - section, article 태그는 h1~h6 제목 태그를 포함해야 한다. (W3C validator에서 에러 남 - 감점요인)
8. 실격기준
 - 완성도가 20%미만 / 슬라이드 이미지가 움직이지 않을 때 / 파일 압축했을 때 / 파일 크기 5MB 초과한 경우

"슬라이드 > 메뉴 > 탭 메뉴 > 팝업" 순으로 공부함

* 볼펜 챙겨가기
* 포토샵 이미지 웹 용으로 내보내기, grayscale 변경하는 단축키 또는 메뉴 위치 알고 가기
* 웹스토리보이, TV율희
* (웹디자인 실기예제 사이트) http://webdesignmilk.com/
* (올 뉴 30분 요약강좌(CSS) - 2022년까지 업데이트) 
   https://www.youtube.com/watch?v=_PeEALPPauk&list=LL&index=7
* (웹디자인 기능사 실기 시험 전에 보면 좋은 지시서 요점정리) https://ninefloor.tistory.com/56
* https://blog.naver.com/153mmm/223153549890
* https://fay-story.com/entry/%EC%9B%B9%EB%94%94%EC%9E%90%EC%9D%B8-%EA%B8%B0%EB%8A%A5%EC%82%AC-%EC%8B%A4%EA%B8%B0-%EB%8F%85%ED%95%99-%ED%9B%84%EA%B8%B0-%EC%9B%B9%EB%94%94-%EC%8B%A4%EA%B8%B0-%EC%A4%80%EB%B9%84-%EB%B0%A9%EB%B2%95%EA%B3%BC-%ED%9C%98%EA%B2%BD%EB%8F%99-%EC%8B%9C%ED%97%98%EC%9E%A5-%ED%9B%84%EA%B8%B0
* https://mongooz.co.kr/%EC%9B%B9%EB%94%94%EC%9E%90%EC%9D%B8%EA%B8%B0%EB%8A%A5%EC%82%AC-%EB%8F%85%ED%95%99-%ED%95%A9%EA%B2%A9-%ED%9B%84%EA%B8%B0/
* https://blog.naver.com/gmlwjddl2582/222857430418
* https://blog.naver.com/easysun0805/222773359854
* https://blog.naver.com/mtme_/223274854880

*** 웹디자인 기능사 실기, 공부 Tip.

(1) 공부순서
가. 기출문제 풀이 유튜브 보며 타이핑한다. (A~E 각 1개씩)
나. script를 자꾸 보면서 html, css, js 구조 파악한다.
다. 기출문제 유형을 파악한다.
라. 레이아웃/슬라이드/메뉴/팝업 모르는 부분은 반복해서 연습한다.
마. 실제 시험 치는 것처럼 모의시험 본다.

(2) 오류찾기
스스로 오류를 찾아낼 수 있어야 한다.

(3) 디자인
디자인보다는 코딩이 중점인 시험이지만, 감점 요소가 될 수 있기에 미리 디자인을 머릿속으로 그려놓고 가는게 좋다.
평소 잘 된 홈페이지를 보거나, 이미 만들어진 문제의 디자인을 미리 참고하면 된다.
지디웹 사이트와 구글에 웹디자인기능사를 검색하면 나오는 이미지를 참고했다.
포토샵 일러스트는 간단한 작업이지만 전혀 할 줄 모르면 문제가 된다. 꼭 필요한 부분은 연습해야 한다.

(4)시간분배
시험시간은 총 4시간. 1시간 디자인, 2시간30분 코딩, 30분 검수

(5)웹디자인 기능사 실기, 시험 당일
8시 30분에 신분증 확인 후 비번호를 뽑고 전자기기를 제출한다.
비번호에 맞는 자리에 가서 앉고 감독관 지시에 따라 비번호를 입력하면, 9시에 시험이 시작된다.

자신의 비번호로 된 폴더와 수험자제공파일 폴더가 생성되어 있다.
수험자제공파일에는 header, slide, contents, footer 각각의 폴더에 이미지와 테스트가 있다.
이미지들이 많이 커서 포토샵에서 이미지 사이즈를 줄인 다음 디자인하여 불러왔다.
contents 폴더에는 많은 아이콘들이 있다. 내용에 맞게 선택하여 디자인에 이용하면 된다.
생각보다 친절하게 제공 파일이 제공되어서 수월했다. (로고도 jpg, ai 파일 모두 준비되어 있다.)

운이 좋게도 가장 쉬운 문제인 A-4 유진건설 문제가 나왔다.
html, css를 차례차례 정리하고, 마지막으로 js 메뉴 팝업까지는 잘했는데,
슬라이드가 작동하지 않아서 당황했다. 침착하게 슬라이드 부분을 다시 작성해서 정상적으로 작동되었다.
슬라이드가 실행이 안되면 실격이기 때문에 슬라이드 부분은 정말 침착하게 작성했고, 꼼꼼히 공부해야 한다.
슬라이드 3가지 유형 중 한 가지만이라도 완벽하게 숙지하여 친다면, 실격은 막을 수 있을 것 같다.

.index 파일을 크롬으로 열어 놓고 새로고침 해가며 확인하면 된다.
마지막으로 5MB가 넘는지 확인 한 후에 제출 버튼을 누르기만 하면 제출이 완료된다.

시험지에 jQuery 슬라이드, 탭 가장 안외워지는 부분을 펜으로 먼저 적어놓고, Visual studio code로 적었다.

로고, 메뉴, 이미지슬라이드를 css까지 끝냈다면 이 때 jQuery를 연결하여 미리 적어 놓은 기능들이 잘 실행되는지 확인한다.
혹 여기서 제대로 안된다면 최대한 이미지 슬라이드만 잘 움직이게 하고 넘어가서 일단 완성하는 것이 좋다.

그리고 유효성 검사를 하고 크롬과 마이크로엣지에서 잘 구현되는지 확인 한번씩 더 확인하고 마지막으로 폴더 용량 확인하고 나온다.

1. readonly, required - 읽기 전용, 필수 값 지정

readonly : input type=text에서 텍스트를 표시하고 수정하지 못하고 read하게만 설정

required : form에서 submit 버튼을 눌렀을 때, 반드시 입력하게 설정 / 반드시 값이 있어야 서버 프로그램에 전송됨