[HTML 강좌] iframe 태그학습  구조<iframe> </iframe>

 

아이프레임은 웹브라우저에 다른 사이트를 일정공간에 보이게 해줍니다.
아이프레임을 사용하여 위에는 한 화면을 반으로 쪼개서 한쪽은 네이버가 나오게 하고 한쪽은 다음이 나오게 할 수 있습니다.
아이프레임의 활용방법은 다음과 같습니다.

<iframe src="링크할 주소"> </iframe>

이 아이프레임의 크기를 설정하려면 테이블처럼 width, height를 지정하면 됩니다.
그리고 스크롤을 생성 여부도 조종할 수 있습니다 scrolling="yes,no,auto"세가지로 정하시면 되구요.
auto로 하시면 필요할시 생성하고 필요없을시 생성하지 않습니다. 그것은 사이즈로부터 판단합니다.

실습해 봅시다. 아래의 소스를 작성해 주시구요.

<iframe src="http://www.naver.com" width="700" height="800" scrolling="auto"> </iframe>


이 소스를 웹에서 보기

<iframe src="http://www.naver.com/" width="700" height="800" scrolling="auto" style="color: rgb(0, 0, 0); font-family: 'Nanum Gothic', 돋움, Dotum, AppleGothic, sans-serif; font-size: 15px; line-height: normal; text-align: start;"></iframe>

이런식으로 여러개 사용하여서 필요한만큼 쓰시면 됩니다.

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

div

이번 시간에는 div태그에 대해서 포스팅합니다..

<div>태그는 레이어를 만들때 주로 사용 한답니다. html코드를 작성할때 사용하고 CSS로 그 효과를 입히게 되죠.

또한 레이아웃을 잡을때도 사용합니다. header, container, content, footer 등등 이요. .

이러한 것들이 있는데 레이아웃 한번 보도록 하겠습니다.

 

 

 

div태그를 이용하여 위와 같은 레이아웃을 만듭니다.

하지만 div태그만으로는 위의 레이아웃은 만들어지지 않고요. 스타일 시트라는 것을 먹여야 합니다.

위의 레이아웃의 소스는 아래와 같습니다.

 

 

<div>
<div>
<p>I am header</p>
</div><!-- header -->
<div>
<div>
<div>
<p>I am content1</p>
</div><!-- content1 -->
<div>
<p>I am content2</p>
</div><!-- content2 -->
<div>
<p>I am content3</p>
</div><!-- content3 -->
</div>
<div>
<p>right</p>
</div>
</div><!-- container -->
<div>
<p >I am footer</p>
</div><!-- footer -->
</div>

 

 

 

단 div태그와 p태그가 있을 뿐입니다. 저기에 스타일시트를 적용하면 저렇게 레이아웃을 짠다든지 할 수 있습니다.

p태그에 대해서 설명드리면

p 태그는 텍스트를 쓰는 태그라고 생각 하시면 됩니다.

하나로 묶고 싶은 텍스트가 있다면 <p> 안녕하세요 </p> 이런식으로 쓰시면 됩니다.

유용하게 사용하시기 바랍니다.

 

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

 

 

자바스크립트객체  image, history, location

* Image객체
image에 관한 정보를 가지고 있는 객체를 말하며, name, src, height, width, hspace(가로여백), vspace(세로여백), border, align 등의 속성을 갖는다.

 

<html>
<head>

</head>
<body onclick="bgcol('pink','blue')">
<img name="img1" src="parksehun.png">
<br>
<script text="javascript">
 document.write(document.img1.src + "<br>");
 document.write(document.img1.name + "<br>");
 document.write(document.img1.width + "<br>");
 document.write(document.img1.height + "<br>");
</script>
</body>
</html>
 
위 처럼 img 태그 안의 name을 자바스크립트 안에서 document."이름" 으로 속성 등을 사용할 수 있다.
또한 document.images.length와 같이 document안의 이미지들의 개수 등을 구해줄 수도 있다.

 

* history 객체
history객체 역시 많이 이용하는 객체중에 하나로 보통은 전/후 단계로의 이동을 해주며,

 

//아래 두개는 같은 의미를 갖는다.
history.back()
history.go(-1)
 
length : 히스토리 안에 있는 url의 개수
back() : 전 단계로 이동
forward() : 히스토리 한 단계 앞으로 이동
go(): 히스토리에서 원하는 위치로 이동

 

* location 객체
문서에 대한 정보 프로토콜, 호스트 이름, 포트, 디렉토리, 파일 이름 등의 정보를 가지고 있다.
속성: href, host, hostname, protocol, pathname, port, hash, search
메소드: reload()-현재 페이지 재로드, replace()-현재 페이지를 원하는 페이지로 변경

 

<html>
<head>

</head>
<body onclick="bgcol('pink','blue')">
<br>
<script text="javascript">
 function rel(){
  location.reload();
 }
</script>
<input type="button" onclick="rel()" value="click">
</body>
</html>

 

 

 

 

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

 

 HTLM5 태그 정리

 

<header> TAG
Header태그는 여러번 사용할 수 있으며, body태그 안에서 사용이 가능합니다. <head>태그는  <html> 사이에 들어가야 하며, 사용 또한 다릅니다. 문서 내에서의 실제 타이틀을 나타낼 때 사용이 됩니다.

<hgroup> TAG
제목과 그와 관련된 부제목을 묶어주는 기능.
In this part of the useful HTML5 features series we are going to present you the new semantic tags that were introduced with HTML5 (most of them). We have provided a simple demo of a page that uses the HTML5 semantic tags.
You usually insert into a header one or more headings ( <h1> to <h6> ) , some sort of a logo or information about the author of the post/article/document that will be discussed below it.

<nav> TAG
<nav>는 어느 위치에 와도 상관이 없으며, <header> <footer> <aside> 등 어디에서든지 사용이 가능합니다.
We include another new element which is the <nav> – it is best used for the primary navigation(s) of the page. It would not be a good idea to enclose every distant anchor on your webpage with the <nav > tag.

<aside> TAG
본문의 내용을 표시하고 남은 부분들을 표시하기 위해서 사용합니다.
Next, we have the <aside> tag which indicates sidebars or content that is related to the DOM location where it is being placed but it is not essential to it. For example, if your readers are reading an article on a page, you can use it to show the user additional information about the article such as references, highlights from it, interesting facts and even to show the user related articles.

You can also see the use of <figure> . You should use it for code snippets, images, diagrams, charts and other visual content that is related to the place where it is placed but in the same time the enclosing content should still make sense without that figure . Inside the <figure> tag you can nest other tags such as <img> and you can add a caption which explains the figure through the <figcaption> element.

<article> TAG
웹 페이지 상에서 실제 내용을 의미하고, 다른 곳에 배포하거나 재사용할 수 있으며, 검색엔진에서는 article에 있는 내용은 배포할 수 있는 것으로 인식하게 됩니다.
<seciton> TAG
웹 컨텐츠들을 그룹으로 묶어 주는 역할을 하며, 재배포 할 수 없습니다. <section>으로 묶에서 다시 <article>로 다시 묶을 수 있다. <section>안에서 다시 <section>태그를 사용하는 것은 가능하다.

HTML1(1991)으로 시작되어, HTML2(1995), HTML3(1997.1), HTML4(1997.12)를 거쳐서 HTML5로 개발되었다.

H.

HTML5은 HTML4의 제한적인 기능 때문에 액티브X, 자바스크립트, 플러그인 등으로 웹을 구현하였고, 이러한 것들을 플러그인 없이 멀티미디어 컨텐츠를 실행하기 위해서 등장하였다. (하지만 현재도 주로 사용되는 것들은 HTML4이다)

웹표준은 같은 사이트라도 브라우저마다 다르게 보이게 되는데, 이는 표준이 없이 작성이 되었기 때문이다. HTML5의 특징은 자바스크립트, CSS, HTML이 분리되지 않고 통합된 체제로 이루어진 것을 의미한다. (HTML5는 자바스크립트, CSS3, HTML5 태그 모두를 의미한다)

HTML5특징
- HTML5는 동영상 재생이 가능하다.
- 2차원 벡터가 가능하다
- 서버와 소켓 통신이 가능하다.
- GPS장치접근, 스마트폰
- 오프라인 상태에서도 작업이 가능하다.
- 시멘틱 웹을 구현이 가능하다.
새로운 태그들
section, article, aside: 간단한 위젯 프로그램, 사이드바, hgroup: 제목과 부제목, header: 본문에 있는 머리부분, footer:페이지 가장 하단의 안내, nav: 네비게이션 요소를 표현, figure: 그림, 비디오 등의 캡션, figcaption.
audio, video, embed, mark:택스트 형광펜, progress:진행바, meter, time, ruby: 미주, 각주 등, canvas, command, details, datalist, keygen: 양식을 form으로 보낼 때 하는 key를 생성, output.
변경된 태그들
a, address, b, hr, i, menu, small, strong : 더 강화되거나 내용이 확장된 태그들
중단된 태그들
basefont, big, center, font, frame, frameset, noframe, s, strike, tt, u

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

 프로그램 다운로드 관하여

  

포토샵 관련 카페를 운영하다보니 포토샵 프로그램 다운로드에 관한 문의가 많은데

포토샵 프로그램을 설치하려면 정품 프로그램 CD가 필요해요. 정품 프로그램은 유료로 구매를 해야 합니다.

 

 아래 순서를 따라하면 프로그램을 구매하거나, 간단한 등록절차를 거친 후 시험버전을 다운받을 수 있습니다.

포토샵은 한글판이 아닌 영문판으로 설치하도록 하세요.

  

시작이 중요해요. 물론 초보딱지만 뗄꺼면 당장 보기 편한 한글판을 사용해도 무방하지만, 온라인 강좌나 서적에서 기본으로

채택하고 있는 버전이 영문판이고 나아가 실력이 업그레이드 되었을 때 외국의 포토샵 강좌들도 손쉽게 따라할 수 있답니다.

영문판에 길들여지록 하세요!

 

포토샵 프로그램은 Adobe 홈페이지를 통해 구입하거나 시험버전을 다운로드 받을 수 있습니다.

아래 링크주소를 클릭하여 홈페이지 접속 후 30일동안 사용할 수 있는 시험버전을 클릭합니다.

 

* 포토샵 정품구매 및 시험버전 다운로드 받기 >> http://www.adobe.com/kr/downloads/

* 포토샵 cc 시험 버전 다운로드 https://creative.adobe.com/products/photoshop

 

 

 

시험버전을 다운로드 받기 위해 Adobe사의 회원으로 등록해야 합니다. (역시나 그냥은 안줍니다.-_-;)

계정이 없는 분들은 <Adobe 계정 만들기> 버튼을 클릭해주세요.

 빨간 별 표시된 항목을 입력한 후, 아래로 스크롤 바를 내려 <계속> 버튼을 클릭해주세요.

 

 

 

시스템 요구사항에서 우측의 셀렉트 박스를 클릭하여 항목을 선택한 후 <다운로드> 버튼을 클릭해주세요.

(위에서도 언급했듯이 영문판으로 다운로드 받는 것이 좋아요~~☆)

 

 

저장할 위치를 선택하면 그림과 같이 포토샵 프로그램 다운로드가 시작됩니다. 네모 바 안에

색상이 다 채워지면 프로그램 다운로드가 완료가 됩니다.

 

  

자, 여기까지 시험버전 프로그램 다운로드 완료!

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

 

홈페지를 만들기 위해서 필수적으로 알아야할 할

html 명령어입니다. 다는 기억할 수 없다고 하더라고

기능은 어떠한지는 아셔합니다.


<*head*><*/head*> 홈페이지의 머리 부분입니다.
<*title*><*/title*>익스플로러 맨 윗부분에 뜨는 부분입니다.(네이버, 이런식으로)
<*body*><*/body*>홈페이지의 몸통 부분입니다.
<*img src="그림경로"*>이미지 링크 태그입니다.
<*a href="파일주소"*><*/a*> 파일 링크 태그입니다.(다운 가능)
<*iframe*><*/iframe*>iframe을 사용하는 태그입니다.
<*frameset rows/cols"화면을 나눌비율"*><*/frameset*> frame을 사용하는 태그입니다.
<*embed src="음악경로"*> 음악 재생 태그 입니다.
<*b*><*/b*>글씨체를 굵게 해줍니다.
<*i*><*/i*>글씨를 눕게 해줍니다.
<*u*><*/u*>글씨에 밑줄을 긋습니다.
<*font*><*/font*>글씨에 대한 사항을 지정합니다.
- color=글씨색 : 글씨의 색 지정
- size=번호 : 글씨의 크기를 지정합니다.(1~7까지가 있고, 7이 가장 큽니다.)
- face=글씨체 : 글씨의 체를 지정합니다.
<*marque*><*/marque*>글씨에 옆으로 지나가도록 합니다.
<*center*><*/center*>글씨를 가운데 정렬로 합니다.
<*sub*><*/sub*>아래 첨자로 표현합니다.
<*sup*><*/sup*>위 첨자로 표현합니다.
<*pre*><*/pre*>입력한 내용과 형식을 그대로 표현합니다.
<*p*><*/p*> 문단을 띄어줍니다.
<*br*>[enter]키와 동일한 효과입니다.
<*hr*>수평선을 긋습니다.
<*ul type=disc/circle/square*><*/ul*>disc는 ●, circle은 ○, square는 ■로써 무순서 목록앞에 붙음
<*ol start=번호*><*/ol*> 문서에 숫자 순서를 지정한다.
<*caption*><*/caption*>도표 바로 위에 도표의 제목을 지정한다.
<*table*><*/table*>테이블을 만든다.
- <*tr*><*/tr*>도표의 가로줄을 정한다.
- <*td*><*/td*>도표의 새로줄을 정한다.
<*em*><*/em*> 이탤릭체로 표현
<*strong*><*/strong*> 굵은 글자로 표현
<*cite*><*/cite*> 인용문구처럼 표현
<*kbd*><*/kbd*>키보드로 입력받는 것처럼 표현
<*h숫자*><*/h숫자*> 본문에서 제목의 글자를 크게 하기 위해서 사용
- 1~6 1이 가장큼.
<*au*><*/au*>저자의 이름을 표현할때 사용
<*blink*><*/blink*>글씨를 깜빡 거리게 함
<*code*><*/code*>영어 타자체로 표현
<*blockquote*><*/blockquote*>다른 글을 인용할 때 주로 사용하느데, 적당한 왼쪽 여백을 주어서 표현한다.

이 정도의 태그만 알고 계시면 간단한 홈페이지를 만드시는데는 큰 지장이 없다고 봅니다.
만약 더 알고 싶으시다면 인터넷 사이트를 찾아보시구요
사용하실 때에는
* 표시는 제외하셔야 합니다.

태그고 머고 전혀 모르는 님을 위한 기초 전 강좌 임다.
대부분은 아시는 내용이지만, 행여 알짜 초보를 위해
기본적인 내용을 먼저 써 놓습니다.


1. 태그란(Tag)

태그(tag)는 HTML 문에서 쓰이는 일종의 명령언어를 지칭하는
명령문이다.( 영어로 따지면 스펠링 쯤 되겠네욤?? )

예)
1) <html></html>
2) <head></head>
3) <br>
...

 

2. HTML ( Hyper Text Markup Language )

HTML이란 하이퍼 텍스트 마크업 랭귀지의 줄임말로써
태그들로 조합된 하나의 문장이다.
( 영어로 따지면 문장 쯤 되겠네욤?? :; 장문도 있고 단문도 있듯 )
우리가 흔히 인터넷 사이트에서 보여지는 모든 내용들을
HTML로 표현할수 있다.

예)
<html></html>
<head></head>
<!--edt:htmlhead:s-->
<title>야후! 코리아</title>
<link rel="SHORTCUT ICON" href="http://kr.yahoo.com/favicon.ico">
<meta http-equiv="Content-type" content="text/html; charset=euc-kr">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="Wed, 04 Jul 1973 16:00:00 GMT">
<script language=javascript>
<!--
function popWin(url, w, h, t, l) {
var win = null;
win = window.open('','_popup','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width='+w+',height='+h+',top='+t+',left='+l);
if (win == null) return;
win.location.href = url;
}
//-->
</script>
.....

</html>

 

3. 태그의 형식

태그는 태그의 시작과 종료를 알리는 한쌍의 구문으로 이루어진다.
시작은 걍 < > 요거 안에 태그쓰면 시작이구
끝은 </ > 요렇게 하고 태그를 쓰면 끝을 알립니다.

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

워드프레스 phpMyAdmin 접근방법

대부분 worldpress 홈페이지 구축은 cafe24에  설치한다.
도메인을 구입하고,phpMyAdmin까지 설치해 놓고
db의 계정과 비밀번호는 알고있지만
MySql에 접근을 어떻게 하는지 자세히 알지 못하고 있다
그래서 오늘은 워드프레스 phpMyAdmin 로그인하는 법을
포스팅합니다.
일단 cafe24에 본인의 계정과 비밀번호로 로그인하여들어갑니다.
그리고 나의 서비스관리를 클릭합니다.
좌측하단에 보시면 [서비스 접속관리]가 있으며
메뉴에는 [MySQL 웹어드민]을 클릭합니다.

 

 

좌측하단에 보시면 [서비스 접속관리]가 있으며
접속하기를 클릭핳시면 MySQL의 DB에 접속할 수 있습니다.

 

 

 

phpMYAdmin에 로그인 하셔서 테이블도 만들고, 게시판도 만들고,

전자상거래 홈페이지 테이블도 만들어 사용할 수 있습니다.

 

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

My custom Css 를 이용하여 CSS수정하기  
우선 My custom Oss 설치해야한다
설치하고 활성화 하면 wp홈페이지
오른에 메뉴바에 My custom Css  보인다

 

이상태에서 Wp 홈으로 와서 F12를 누르면 하단에 html소스와 CSS창이 나우어져 나타난다

오늘은 상단 메뉴바의 글자크기를 확대/축소하는 법을 알아보겠습니다.

 

왼쪽 하단에 화살 표가 보이는데 이것을 클릭하시고  contact를 누르고

키보드 화살표를 상하로 눌러 보시면 CSS에서 코드가 나타나는데 여기서 Font 크기를 18에서 25로 변경하고자 하시면

그곳의 코들 복사하여 My customs CSS에 오셔서 붙여넣고 폰트크기를 25로 변경하고 상단에 저장하기를 클릭한다

이렇게 저장한 다음 페이를 넘겨 wp홈으로 와서 새로고침을 해보시면 메뉴의 크기 변경되어 있음을 불 수있습니다.

 


위처럼 여러가지를 시험해 보시기 바랍니다.

 

위의 설명드린 방법대로 하고 wp홈페이지와서 새로고침을 해보시면 메뉴크기 변경되어 있음을 알 수 있다

 

My custom CSS의 플러그인을 사용하여 작업을 쉽고 빠르게 할 수 있습니다.

 

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

워드프레스에 다음지도 맵넣기

지난번에 교회 홈페이지 만들면서 약도를 넣어야 할 일이있었습니다.

그래서 다음지도를 넣기로 했는데 어렵지 않았습니다.

다음 지도에서 공유를 선택하시시고

 

공유를 클릭하시고

지도퍼가기에서

소스를 복사하여 옵니다.

 

 

 

이곳 워드프레스 오셔서 복사한 코드를 붙여넣으면 됩니다.

 

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

플러그인을 활용한 페이지 관리

 

 

 

페이지 구조화란
상위/ 하위 페이지로 구분해서 그룹을 짖고,
패이지의 순서를 정렬해서, 전체적인 구조를 한 눈에 들어오도록 하는 것입니다
사이트 맵을 보여 주는 메뉴의 구성과 맞추기를 하는 것입니다.

페이지를 관리하는 이유는
많은 페이지 관리의 어려움이 있기 때문이며
페이지,데모페이지,임시페이지등이 많아지면 관리가 힘들어진다
직관적,검색의 친화적인 주소체계을 가지고 있습니다.
- sunwoo.kr/ceo
아래처럼 그룹을 지어 놓으면 편리합니다.
- sunwoo.kr/company/ceo
페이지 순서를 지정하는 방법은
페이지 편집시 속성/순서에서 지정합니다.

페이지의 번호체계(예시)
구분                  / 페이지 번호
전면페이지            / 1
메뉴에 사용되는 페이지 / 2~20
관리용페이지           / 21~50
임시페이지             / 51~


왜 페이지를 구조화하고 관리해야 하는가 ?
복잡하고 직관적이인 페이지 주소를 만들기 위해서 이며
페이지를 구조화하는 것은  하위/상위 그룹을 짖고
순서를 지정함으로서 쉽게 만들 수 있다
페이지 순서를 지정하는 방법은
페이지 속성에서 빠른 편집을 추천합니다.
페이지 순서 부여 하는 원칙은
전면페이지, 메뉴페이지,관리용페이지,임시페이지등이 있습니다.


** 플러그인을 활용한 페이지 관리
마우스로 끌어서 쉽게 관리할 수 있다

실제로 프러그인 2가 소개
Amin menu tree page view
CMS page Order을 다운받아 하나 하나 설치하여
사용해 보시기 바랍니다.

 

                                                페이지 관리 플러그인 비교

 

플러그인을 통해서 관리하면 아주 편합니다.

곧바로 마우로 집어서 옮겨 놓으면 됩니다.

저는 CMS page Order를 사용하는 것이 편리했습니다.

 

 

 

 

 

 

 

 

 

 


 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,