본문 바로가기
기타/Remote class

[웹 표준에 맞는 HTML5 프로그래밍] 8차시 - 화면설계 UI 해석하기

by howdyoon 2023. 2. 10.

자바스크립트와 제이쿼리

1. 자바스크립트(JavaScript)의 개념

2. jQuery의 개념 및 특징

- HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리

- 자바스크립트 라이브러리로서 자바스크립트 프로그래밍을 단순화

- 학습하기 쉬움

- 웹프로그래밍 시간을 단축시킴

3. jQuery의 버전

- 3.x.x 버전: 가장 최신버전(2020년 7월기준)v3.5.1, Ajax를 지원

- 2.x.x 버전: IE 6~8버전을 지원하지 않고, 1.x.x 버전이 간소화 되어 용량이 작음

- 1.x.x 버전: 구형 브라우저에 가장 안정적임

4. jQuery의 사용법

- Local 파일 사용

- CDN 사용

 

세로형 메뉴 구현하기

1. 와이어프레임에 제시된 지시사항 확인하기

- 세로형 메뉴 구현하기를 위한 와이어프레임 확인하기: 위에서 아래로 내려오는 메뉴 구성

2. HTML 기본 구성 입력하기

- nav 태그 이용

- ul, li 태그를 이용해서 각 메뉴 구성

- 각 메뉴에 ul, li 를 이용해서 서브 메뉴 구성

3. CSS 작업하기

- nav 전체 스타일링 하기

- 각 메뉴 스타일링, 마우스 오버 효과주기

- 서브 메뉴 스타일링, 마우스 오버 효과주기

4. 자바스크립트 작업하기

- HTML 문서에 스크립트 추가

- 메뉴에 지정된 함수에 사용자 지정 효과주기

 

가로형 메뉴 구현하기

1. 와이어프레임에 제시된 지시사항 확인하기

- 가로형 메뉴 구현하기를 위한 와이어프레임 확인하기: 좌에서 우로 펼쳐지는 메뉴 구성

2. HTML 기본 구성 입력하기

- nav 태그 이용

- ul, li 태그를 이용해서 각 메뉴 구성

- 각 메뉴에 ul, li 를 이용해서 서브 메뉴 구성

3. CSS 작업하기

- nav 전체 스타일링 하기

- 각 메뉴 스타일링, 마우스 오버 효과주기

- 서브 메뉴 스타일링, 마우스 오버 효과주기

4. 자바스크립트 작업하기

- HTML 문서에 스크립트 추가

- 메뉴에 지정된 함수에 사용자 지정 효과주기