웹프로그래밍 – 페이지 2

Chapter 03. HTML5 문서 구조화와 웹 폼

Chapter 03 시멘틱 태그 시멘틱 태그 사용예 구 HTML(div, span 사용) HTML5(header, section 사용) html5 sample(mozart) 예제 3-2 블록 태그(figure) 예제 3-3 블록 태그(detail summary) 예제 3-4 인라인 태그(mark, time, meter, progress) 예제 3-5 로그인 폼(PHP 추가했음) 예제 3-6 폼(text, password, textarea) 예제 3-7 폼(datalist) 예제 3-8 폼(button, submit, reset,… Continue Reading Chapter 03. HTML5 문서 구조화와 웹 폼

HTML, CSS, Javascript 사용 웹페이지 샘플

참조 : 명품 HTML5+CSS3+Javascript 웹 프로그래밍 (개정판) HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>웹 페이지의 구성 요소</title>
</head>
<body>
<h3>Elvis Presley</h3>
<hr>
He was an American singer and actor. In November
1956, he made his film debut in <span>Love Me
Tender</span>. He is often referred to as
"<span>the King of Rock and Roll</span>".
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3>Elvis Presley</h3>

<hr>

He was an American singer and actor. In November

1956, he made his film debut in <span>Love Me

Tender</span>. He is often referred to as

"<span>the King of Rock and Roll</span>".

</body>

</html>

CSS 코드로 문서 모양 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>웹 페이지의 구성 요소</title>
<style>
	body { background-color : linen; color : green;
				margin-left : 40px; margin-right : 40px;}
	h3 { text-align : center; color : darkred;}
	hr { height : 5px; border : solid grey;
				background-color : grey }
	span { color: blue; font-size: 20px; }
</style>
</head>
<body>
<h3>Elvis Presley</h3>
<hr>
He was an American singer and actor. In November
1956, he made his film debut in <span>Love Me
Tender</span>. He is often referred to as
"<span>the King of Rock and Roll</span>".
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

<html>

<head>

<style>

body { background-color : linen; color : green;

margin-left : 40px; margin-right : 40px;}

h3 { text-align : center; color : darkred;}

hr { height : 5px; border : solid grey;

background-color : grey }

span { color: blue; font-size: 20px; }

</style>

</head>

<body>

<h3>Elvis Presley</h3>

<hr>

He was an American singer and actor. In November

1956, he made his film debut in <span>Love Me

Tender</span>. He is often referred to as

"<span>the King of Rock and Roll</span>".

</body>

</html>

JavaScript 코드로 사용자 인터페이스 처리

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<title>웹 페이지의 구성 요소</title>
<style>
	body { background-color : linen; color : green;
				margin-left : 40px; margin-right : 40px;}
	h3 { text-align : center; color : darkred;}
	hr { height : 5px; border : solid grey;
				background-color : grey }
	span { color: blue; font-size: 20px; }
</style>
<script>
	function show() { // <img>에 이미지 달기
		document.getElementById("fig").src = "ElvisPresley.png"
	}
	function hide() { // <img>에 이미지 제거
		document.getElementById("fig").src= "";
	}
</script>
</head>
<body>
<h3 onmouseover="show()" onmouseout="hide()">
		Elvis Presley</h3>
<hr>
<div><img id="fig" src=""></div>
He was an American singer and actor. In November
1956, he made his film debut in <span>Love Me
Tender</span>. He is often referred to as
"<span>the King of Rock and Roll</span>".
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<!DOCTYPE html>

<html>

<style>

body { background-color : linen; color : green;

margin-left : 40px; margin-right : 40px;}

h3 { text-align : center; color : darkred;}

hr { height : 5px; border : solid grey;

background-color : grey }

span { color: blue; font-size: 20px; }

</style>

function show() { // <img>에 이미지 달기

document.getElementById("fig").src = "ElvisPresley.png"

}

function hide() { // <img>에 이미지 제거

document.getElementById("fig").src= "";

}

</script>

</head>

<body>

Elvis Presley</h3>

<hr>

He was an American singer and actor. In November

1956, he made his film debut in <span>Love Me

Tender</span>. He is often referred to as

"<span>the King of Rock and Roll</span>".

</body>

</html>

html_css_js.zip

Chapter 02. HTML5 기본 문서 만들기

HTML5 페이지의 기본 구조

<!DOCTYPE html>
<!-- 주석문 -->
<html>
    <head>
        문서제목, 자바스크립트 코드, CSS 스타일 정의, 메타데이터 정의
    </head>
    <body>
        문서의 본문
    </body>
</html>

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<head>

문서제목, 자바스크립트 코드, CSS 스타일 정의, 메타데이터 정의

</head>

<body>

문서의 본문

</body>

</html>

HTML 태크와 속성 대소문자 구분 없음 태그는 시작 태그 – 종료 태그 쌍으로 이루어짐(예외 : BR, HR 등) 속성에 불필요한 공백은 HTML5 표준에 어긋남 태그 <title>, <h1>, <h2>, .. , <h6> <p>, <hr>, <br>, <pre> 문자, 기호 표현 : " ' > 블록 태그, 인라인… Continue Reading Chapter 02. HTML5 기본 문서 만들기

Chapter 01. 웹프로그래밍과 HTML5 개요

용어 웹 서버 웹 클라이언트 웹 문서 인터넷 응용 서비스 전자우편(e-mail) 뉴스(news) 파일전송(ftp) 채팅(Internet Relay Chat) 메신저(Messenger) P2P(Peer to Peer) 스트리밍 서비스(Streaming Service) 인터넷 전화기(Internet Phone) 월드 와이드 웹(World Wide Web) 인터넷이 고속도로라면 웹은 고속도로 망을 이용한 물류 산업 웹 브라우저 종류 마이크로 소프트 엣지 오페라 파이어폭스 크롬 웹 브라우저의… Continue Reading Chapter 01. 웹프로그래밍과 HTML5 개요

[DJango] 파이참(PyCharm)을 이용하여 장고 프로그래밍 설정

PyCharm Community Edition 설치 https://www.jetbrains.com/pycharm/download 환경 구축 File -> New Project Terminal에서 django-admin startproject mysite cd mysite python manage.py migrate File 메뉴 -> Setting Project -> Project Interpreter Run 메뉴 -> Run 클릭 Edit Configuration 선택

[PHP/DJango] 04 CSS 적용하기

인라인 Style : 각 태그에 스타일 추가 예 : <p style=’background-color:#333; color:#fff;’> 안녕하세요 </p> 내부 Style : 템플릿 파일에 직접 style 코드 추가하기 vi glass/board/templates/board/index.html

<style>
	body {
		background-color:#333; /* 배경색은 짙은 회색 */
		color:#fff; /* 글자색은 흰색 */
		font:12pt/200% 돋움;
	}
</style>

{% if latest_board_list %}
	{% for board in latest_board_list %}
		{{ board.id }}
		<a href=/board/{{ board.id }}/>
		{{ board.subj }} </a> {{ board.wdate }} <br>
	{% endfor %}
{% else %}
	empty
{% endif %}

<a href="{% url 'board:new' %}"> 글쓰기 </a>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<style>

body {

background-color:#333; /* 배경색은 짙은 회색 */

color:#fff; /* 글자색은 흰색 */

font:12pt/200% 돋움;

}

</style>

{% if latest_board_list %}

{% for board in latest_board_list %}

{{ board.subj }} </a> {{ board.wdate }} <br>

{% endfor %}

{% else %}

empty

{% endif %}

외부 Style : 파일에 저장후 불러서 사용하기 장고 프로젝트에 /static/ 폴더 생성 : settings.py 수정

STATIC_URL = '/static/'

import os
STATIC_ROOT = os.path.join(BASE_DIR, 'www_dir', 'static')

1

2

3

4

STATIC_URL = '/static/'

import os

STATIC_ROOT = os.path.join(BASE_DIR, 'www_dir', 'static')

python3 manage.py collectstatic 실행 glass/www-dir/static 폴더가 생성되고 그… Continue Reading [PHP/DJango] 04 CSS 적용하기

[PHP/DJango] 03 새글(new) / 수정(edit)

서버 접속 Putty 접속 IP : ir.jj.ac.kr Port : 10022 ID/PW는 개인별로 알려줬음 FTP 접속 IP : ir.jj.ac.kr Port : 21 ID/PW는 개인별로 알려줬음 Notepad++의 플러그인 중 NPPFtp를 사용하여 접속하면 편함 phpmyadmin 접속 http://ir.jj.ac.kr/phpmyadmin ID/PW는 개인별로 알려줬음 phpmyadmin을 이용하여 테이블생성 ID/PW는 개인별로 알려줬음 테이블 이름 : pd_board 필드 id :… Continue Reading [PHP/DJango] 03 새글(new) / 수정(edit)

[PHP/DJango] 02 자세히(detail) / 삭제(delete)

서버 접속 Putty 접속 IP : ir.jj.ac.kr Port : 10022 ID/PW는 개인별로 알려줬음 FTP 접속 IP : ir.jj.ac.kr Port : 21 ID/PW는 개인별로 알려줬음 Notepad++의 플러그인 중 NPPFtp를 사용하여 접속하면 편함 phpmyadmin 접속 http://ir.jj.ac.kr/phpmyadmin ID/PW는 개인별로 알려줬음 phpmyadmin을 이용하여 테이블생성 ID/PW는 개인별로 알려줬음 테이블 이름 : pd_board 필드 id :… Continue Reading [PHP/DJango] 02 자세히(detail) / 삭제(delete)

[PHP/DJango] 01 목록보기(index)

서버 접속 Putty 접속 IP : ir.jj.ac.kr Port : 10022 ID/PW는 개인별로 알려줬음 FTP 접속 IP : ir.jj.ac.kr Port : 21 ID/PW는 개인별로 알려줬음 Notepad++의 플러그인 중 NPPFtp를 사용하여 접속하면 편함 phpmyadmin 접속 http://ir.jj.ac.kr/phpmyadmin ID/PW는 개인별로 알려줬음 phpmyadmin을 이용하여 테이블생성 ID/PW는 개인별로 알려줬음 테이블 이름 : pd_board 필드 id :… Continue Reading [PHP/DJango] 01 목록보기(index)

장고(DJango) 애플리케이션 만들기

리눅스 설치 sudo pip3 install Django 업그레이드 : sudo pip3 install Django –upgrade 윈도우 설치 pip install Django 업그레이드 : pip install Django –upgrade 윈도우 환경에서는 python3 대신 python을 사용 장고에서의 애플리케이션 개발 방식 MVT 방식 : Model, View, Template (MVC; Model, View, Controller와 유사) 프로젝트 구조 만들기 프로젝트 생성… Continue Reading 장고(DJango) 애플리케이션 만들기