God is in the details

E-1: 김치이야기 와이어프레임 살펴보기 E유형은 가로만 반응형인 D형과 다르게 가로&세로 모두 반응형으로 제작해야 한다. 영역별 애니메이션: 서브메뉴: 개별 세로 슬라이드 이미지: 좌우 슬라이드 레이어 팝업 E-1: 김치이야기 와이어프레임 구성하기 Visual Studio Code를 실행하고, 아래와 같은 구조로 파일을 생성한다: HTML을 사용해서 와이어프레임의 기본구조를 만든다. 먼저 Main과 Footer 두 영역으로 구분한다: CSS reset 작업을 하고 기본 구조를 정의한다: *세로(Height)는 %를 인식하지 못하므로 대신 vh 값을 사용한다. @charset "UTF-8"; /* reset */ * { margin: 0; padding: 0; color: #333; } a { text-..

D-1 조이컨트리클럽 와이어프레임 살펴보기 기존 A, B, C 유형과는 다르게 D유형은 반응형으로 제작해야 한다. 영역별로 구현해야 되는 애니메이션: 서브메뉴 - 세로형태 슬라이드 애니메이션 슬라이드 - 페이드 인&아웃 형태의 애니메이션 탭메뉴 레이어팝업 D-1: 조이컨트리클럽 와이어프레임 구성하기 Visual Studio Code를 실행하고, 아래와 같은 구조로 파일을 생성한다: HTML을 사용해서 와이어프레임의 기본 구조를 만든다. 먼저 3개의 영역(Aside, Main, Footer)을 만든다: CSS 최상단에 reset을 적용시키고 영역별로 정의해 준다. 고정형이 아닌 반응형이기 때문에 cal()를 사용한다: @charset "UTF-8"; /* reset */ * { margin: 0; padd..

C유형의 첫 번째 문제 C-1 해운대 빛축제 와이어프레임 살펴보기 기존에 풀어보았던 A, B이 서로 비슷한 구조를 가지고 있었다면 C유형은 완전히 다르다. 애니메이션 관련 세부사항: 공지사항/갤러는 탭메뉴로 구현 이미지 슬라이드는 사라졌다가 다음 슬라이드가 표시되는 페이드 인&아웃 형태 서브메뉴는 각각 세로형태로 표시되는 형태 레이어 팝업은 기존과 동일 C-1: 해운대 빛축제 와이어프레임 구성하기 Visual Studio Code를 실행하고, 아래와 같은 구조로 파일을 생성한다: HTML을 사용해서 와이어프레임의 기본 구조를 만든다. 먼저 Aside와 Main으로 영역을 2등분한다: 이후에 세부 영역을 추가로 작성한다: CSS 기존처럼 reset을 진행한 뒤 Aside와 Main 영역을 먼저 정의한다: ..

B유형의 첫 번째 문제 B-1 대한은행 와이어프레임 살펴보기 B유형의 경우 전반적인 레이아웃 구성은 A유형과 거의 동일하지만, 상단의 헤더와 푸터의 Width를 브라우저 100% 처리해 줘야 한다. B-1 유형의 경우 푸터를 제외한 나머지 구조(메뉴, 탭메뉴 등)는 A-1과 동일하고 하단의 푸터 레이아웃은 A-3와 동일하다. 메인메뉴에 마우스를 오버하면 서브메뉴 전체가 한 번에 나타나는 구조 이미지 슬라이드는 가로로 이동하도록 구현해야 한다. B-1: 대한은행 와이어프레임 구성하기 기존과 동일하게 Visual Studio Code를 실행하고, 아래와 같은 구로조 파일을 생성한다: HTML을 사용해서 와이어프레임의 기본 구조를 만든다: *A유형과 다른 점이 있다면 B유형은 각각의 id별로 container..

A유형의 마지막 문제를 풀어볼 차례 A-4: 유진건설 와이어프레임 살펴보기 앞서 작업했던 다른 A형 문제에서 한 번씩은 출제되었던 구조가 조합되어 있다: 배경이 서브메뉴와 함께 슬라이드 되는 형태는 A-2와 동일 공지사항과 갤러리가 별도로 구성된 형태 또한 A-2와 동일하다 푸터 영역은 좌측의 로고 영역이 제외되는 대신 A-2에서 출제되었던 패밀리사이트 메뉴가 우측에 배치된다 이미지 슬라이드의 경우 A-3와 동일한 페이드인&아웃 형태의 애니메이션을 구현해야 한다 A-4: 유진건설 와이어프레임 구성하기 기존과 동일하게 Visual Studio Code를 실행한 뒤, 아래와 같은 구조로 파일을 생성한다: HTML을 사용해서 와이어프레임의 기본 구조를 만든다: 이어서 CSS를 작성한다: @charset "@U..

A유형 3번째 문제 풀이. A-3: 강원천문대 와이어프레임 살펴보기 와이어프레임 구조는 앞서 풀었던(A1, A2)와 동일하고, 아래와 같은 효과를 적용해야 한다: A영역의 메뉴 애니메이션: A1과 동일한 애니메이션 효과지만, 각각의 메뉴에 효과가 별도로 적용돼야 한다. B영역 슬라이드 애니메이션: 이미지가 서서히 사라지고 나타나는 Fade-in, Fade-out 효과가 적용되어야 한다. C영역: A1과 동일한 탭메뉴를 적용해야 한다. A-3: 강원천문대 와이어프레임 구성하기 기존과 동일하게 Visual Studio Code를 실행한 뒤, 아래와 같은 구조로 파일을 생성한다: HTML를 사용해서 와이어프레임의 기본 구조를 만든다: CSS로 넘어가서 리셋(reset)을 먼저 적용한 뒤에, ID별로 코드를 작..

지난번에 풀어본 A1 문제(풀이 링크)에 이은 두 번째 문제 풀이. A-2: Green복지재단 와이어프레임 살펴보기 기본 와이어프레임 구조는 A1과 동일하고, 아래와 같은 4가지 차이점이 있다: 메인메뉴에 마우스를 오버하면 전체배경이 서브메뉴와 함께 내려온다. B영역의 슬라이드가 세로가 아닌 가로방향으로 전환된다. C영역의 공지사항과 갤러리가 탭메뉴가 아닌 별도 메뉴로 구성되어 있다. D영역 오른쪽 하단에 SNS 아이콘 대신 패밀리사이트 메뉴가 들어간다. A-2: Green복지재단 와이어프레임 구성하기 A1과 마찬가지고 Visual Studio Code를 실행한 뒤, 아래와 같은 폴더 구조로 파일을 생성해 준다: 먼저 아래와 같은 HTML 구조를 작성해서 와이프레임의 기본 구조를 만든다: 이어서 CSS를..

18일 뒤인 11월 25일에 웹디자인기능사 실기시험을 볼 예정이다. 남은 기간 동안 시험 주관처인 한국산업인력공단 홈페이지에서 제공하는 공개문제를 최대한 많이 풀어보기로 했다. 23년도에 출제되는 총 20개 문항이 제공된다: 공개문제 자료실 상세 | Q-netBODY { FONT-SIZE: 10pt; FONT-FAMILY: Malgun Gothic; COLOR: #000000; MARGIN: 0px } P { MARGIN-BOTTOM: 0px; MARGIN-TOP: 0px; LINE-HEIGHT: 1.2 } LI { MARGIN-BOTTOM: 0px; MARGIN-TOP: 0px; LINE-HEIGHT: 1.2 } ▶ 적용시기: 2023년 기능사 제1회 부터(1~www.q-net.or.kr *참고: 제이..