2018년 11월 12일 박성진 parks@kangwon.ac.kr Web & Internet [09] 레이아웃 P2 2018년 11월 12일 박성진 parks@kangwon.ac.kr.

Slides:



Advertisements
Similar presentations
2. 미디어 쿼리 : 다양한 뷰포트의 지원 김은옥 1 학습목표 : 여기서는 미디어 쿼리 작성방법, 뷰포트 지정 방법 등 을 살펴본다.
Advertisements

1. HTML5 와 CSS3 를 사용한 기본 레이아웃 예제 2. 박스를 활용하여 구성한 HTML5 & CSS3 예제 3. 웹 폼을 이용한 회원가입 페이지 4. 안드로이드 웹 앱.
Android 프로그램개발 환경. 학습 목표 ■ 교육 목표  JDK 설치  JDK 환경 설정  Eclipse 설치  Android SDK 설치  ADT Plug-in 설치  Android Virtual Device(AVD) 설치  Android 예제 프로그램.
1 개요.
태그 해석을 통해 구문 이해 가능 -시맨틱(semantic, 의미가 통하는) 태그
파워포인트 2007.
30강_웹문서 제작 팁 웹문서 제작 팁 Lecturer Kim Myoung-Ho Nickname 블스
코크파트너 설치 가이드 Window 7.
윈도우7 체크 설치 매뉴얼
SSL - VPN 사용자 가이드 - IT 지원실 네트워크 운영팀 -.
컴퓨터 프로그래밍 기초 [Final] 기말고사
네트워크 스캔하기 WiFi 시리얼 보드 활용가이드 김영준 헬로앱스 (
CHAP 24. nfc와 앱위젯.
독도 바로알기 2. 사료와 지도로 보는 독도.
CHAPTER 02 OpenCV 개요 PART 01 영상 처리 개요 및 OpenCV 소개.
강좌 소개 웹프로그래밍기초 숙명여자대학교 임순범.
Visual Basic .NET 처음 사용하기.
전광판 어플 크레파스통 도상미 박아란 이민영.
Javascript Basic Sample Programs
iframe 사용하기 Chapter 3 Part 2
3강_HTML 기본-II 리스트 태그 - ul,li,ol 표를 나타내는 태그 - table 이미지를 출력하는 태그 – img
HTML CSS 자바스크립트 무작정 따라하기
From Block To C SW 코딩을 위한 5단계 교육
10강. JSP 본격적으로 살펴보기-II 스크립트릿, 선언, 표현식 지시자 주석 Lecturer Kim Myoung-Ho
2018년 10월 08일 박성진 Web & Internet [05] CSS3 속성 2018년 10월 08일 박성진
인터넷응용프로그래밍 JavaScript(Intro).
1 개요.
Chapter03 캔버스(1) HTML5 Programming.
박성진 컴퓨터 프로그래밍 기초 [09] 배열 part 1 박성진
반응형 웹 프로젝트
2018년 11월 05일 박성진 Web & Internet [08] 레이아웃 P1 2018년 11월 05일 박성진
Web & Internet [03] HTML5 다양한 태그
13장. 테두리, 폼 양식 관련 스타일과 레이어 테두리 관련 스타일 폼 양식 관련 스타일 레이어.
HTTP 프로토콜의 요청과 응답 동작을 이해한다. 서블릿 및 JSP 를 알아보고 역할을 이해한다.
Web & Internet [06] CSS3 응용과 레이아웃
CHAP 5. 레이아웃.
2차시: 달의 공전 지구과학
Web & Internet [11] JavaScript & BootStrap
폼 관련 태그 폼 양식 직접 만들어보기 회원가입 절차 4단계
프로그래밍 원리 Chapter 05 자바스크립트 기초 신한대학교 IT융합공학부 박 호 균.
웹디자인
1차시: 낮과 밤이 생기는 원리 지구과학
2018년 10월 01일 박성진 Web & Internet [04] CSS3 2018년 10월 01일 박성진
인천대학교 웹과 인터넷 수업 개요 및 내용 소개.
컴퓨터 프로그래밍 기초 [01] Visual Studio 설치 및 사용방법
빌드 성공.
박성진 컴퓨터 프로그래밍 기초 [04] 연산자 박성진
Web & Internet [02] HTML5 기본구조와 작성법
5 함수.
암호학 응용 Applied cryptography
암호학 응용 Applied cryptography
.Net Web Application 2007 컴퓨터공학실험(Ⅰ)
기초C언어 제2주 실습 프로그래밍의 개념, 프로그램 작성 과정 컴퓨터시뮬레이션학과 2016년 봄학기 담당교수 : 이형원
Ms-Office PowerPoint 한순희 한순희.
12 그리드 시스템.
웹과 모바일 홈페이지의 이해와 제작 폰트_레이아웃
웹과 모바일 홈페이지의 이해와 제작 HTML태그와 CSS로 꾸미기
9 브라우저 객체 모델.
Chapter 06. 다이어그램과 조직도. chapter 06. 다이어그램과 조직도.
노인학대예방 교육 교육강사 시 설 장 송나겸 보성실버센터.
박성진 컴퓨터 프로그래밍 기초 [03] 변수와 자료형 박성진
트위치 트게더 Twitogether 김준희.
Homework #3 - 페이지 모듈화 및 로그인처리 -
Web & Internet [10] 입문 – input 태그
3. 윈도우 미디어 플레이어 6.4 옵션(환경) 설정 변경
Docker Study 6~7.
7 생성자 함수.
6 객체.
Chapter 11. 문서 인쇄 및 파일 형식.
20 XMLHttpRequest.
Presentation transcript:

2018년 11월 12일 박성진 parks@kangwon.ac.kr Web & Internet [09] 레이아웃 P2 2018년 11월 12일 박성진 parks@kangwon.ac.kr

DBLab Template by Suan

DBLab Template by Suan

예제 4. 본문 구성 #main_section 태그 내부에 다음과 같이 입력 다음 스타일을 적용 DBLab Template by Suan

예제 4. 본문 구성 #main_section 태그 내부에 다음과 같이 입력 다음 스타일을 적용 DBLab Template by Suan

DBLab Template by Suan

사이드 탭바 구성 다음과 같이 같은 공간에 두 개 이상의 요소를 겹쳐놓는 것을 탭바라고 함 탭바는 일반적으로 자바스크립트로 생성 CSS3를 사용하면 탭바를 쉽게 생성할 수 있음 DBLab Template by Suan

예제 5. 사이드 탭바 구성 다음과 같이 #main_aside 태그를 구성 스타일을 적용 코드를 실행 DBLab Template by Suan

클릭! DBLab Template by Suan

예제 5. 사이드 탭바 구성 이 코드를 스타일 태그에 추가 DBLab Template by Suan

DBLab Template by Suan

예제 6. 목록 구성 #main_aside 태그 내부의 <li> 를 다 음 형태로 구성 스타일을 적용 DBLab Template by Suan

DBLab Template by Suan

예제 7. 푸터 구성 <body>내부에 다음과 같이 <footer> 를 생성 #main_footer 에 다음 코드를 입력 다음 스타일을 적용 DBLab Template by Suan

예제 7. 푸터 구성 DBLab Template by Suan