기타14 [웹 표준에 맞는 HTML5 프로그래밍] 10차시 - UI를 통해 화면 구현하기 CSS 레이어 팝업1. HTML과 CSS만으로 구현2. HTML에 모달 관련 클래스 이름을 명시3. CSS의 요소 :hover특성을 이용하여 opacity 속성을 1로 할당함으로서 레이어 팝업을 구현 JQuery 모달 팝업1. JQuery 파일을 연결2. HTML에 모달 관련 클래스 이름을 명시3. javascript 파일에서 요소 클릭 시, fadeln(); 및 fadeOut(); 메소드를 호출함으로서 레이어 팝업을 구현 Bootstrap 모달 팝업1. http://getbootstrap.com/ BootstrapPowerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt.. 2023. 2. 10. [웹 표준에 맞는 HTML5 프로그래밍] 9차시 - UI 설계 확인하기 이미지 슬라이드(좌우)1. CSS로 구현하기- @keyframes를 이용함- margin-lert로 좌측 좌표를 선언하여 좌우 슬라이드를 구현2. JavaScript로 구현하기- 지정 시간마다 반복되는 setinterval()함수를 활용- animate 메소드를 통해 지정 시간 마다 요소의 left 속성을 할당하여 구현 이미지 슬라이드(상하)1. CSS로 구현하기- @keyframes를 이용함- margin-top으로 상단 좌표를 선언하여 상하 슬라이드를 구현2. JavaScript로 구현하기- 지정 시간마다 반복되는 setinterval()함수를 활용- animate 메소드를 통해 지정 시간 마다 요소의 top 속성을 할당하여 구현 페이드인-아웃 구현하기1. CSS로 구현하기- @keyframes를 이.. 2023. 2. 10. [웹 표준에 맞는 HTML5 프로그래밍] 8차시 - 화면설계 UI 해석하기 자바스크립트와 제이쿼리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. 와이어프레임에 제시된 지시사항 확인하기- 세로형 메뉴 구현하기를 .. 2023. 2. 10. [웹 표준에 맞는 HTML5 프로그래밍] 7차시 - 화면설계 확인하기 와이어프레임1. 와이어프레임(wireframe)의 개념- 웹사이트의 회로도(schematic)또는 청사진(blueprint)라고도 불리우며, 웹사이트의 골격을 나타내는 시각적 가이드2. 와이어프레임(wireframe)의 구성요소- Wrap : 전체박스- Header : 헤더- Slide : 이미지 슬라이드- Contents : 콘텐츠- Footer : 푸터- Tab Menu : 탭메뉴- Pop-up : 팝업창3. 와이어프레임(wireframe)의 종류- 가로형과 세로형이 있음 레이아웃 구현하기1. HTML 기본구성 입력과 CSS Reset하기- 웹에디터의 Emmet 기능을 활용하여 html 기본 구성을 완성함- HTML 태그에 대한 기본 CSS 요소를 초기화2. HTML 기본 레이아웃 구현하기- head.. 2023. 2. 10. 이전 1 2 3 4 다음
