유수봉 교수의 WEB-05

Notice

Recent Posts

Recent Comments

Link

📖깃허브

« 2024/05 »
일	월	화	수	목	금	토
			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

Tags more

Archives

Today

Total

관리 메뉴

최코딩의 개발노트

유수봉 교수의 WEB-05 본문

수업/자바스크립트

유수봉 교수의 WEB-05

seung_ho_choi.s 2024. 4. 4. 20:48

하이퍼 링크 만들기

Lab_Link1

<!DOCTYPE html>

<html>

<head>

<title>링크의 target 속성 활용</title>

</head>

<body>

<h3>링크의 target 속성 활용</h3>

<hr>

<ul>

<li><a href="text.txt" target="_blank">(새 윈도우, _blank)</a>

<li><a href="text.txt" target="_parent">(부모 윈도우, _parent)</a>

</ul>

</body>

</html>

Lab_Link2

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<HR>

<h3 id="top">스티브잡스(Steve Jobs) 스탠포드대 졸업식 연설 </h3>

<HR>

<ul>

<li><a href="#english">English</a>

<ol>

<li><a href="#first">first story</a>

<li><a href="#second">second story</a>

<li><a href="#third">third story</a>

</ol>

<ol>

<li><a href="#첫번째">첫번째이야기</a>

<li><a href="#두번째">두번째이야기</a>

<li><a href="#세번째">세번째이야기</a>

</ol>

</ul>

<HR>

<h3 id="english">English</h3><BR>

I am honored to be with you today at your commencement from one of the finest universities in the world. I never

graduated from college. Truth be told, this is the closest I've ever gotten to a college graduation. Today I want to

tell you three stories from my life. That's it. No big deal. Just three stories.<BR>

<BR>

<h3 id="first">first sotory <a href="#top">(top)</a></h3>

The first story is about connecting the dots.<BR><BR>

<P>I dropped out of Reed College after the first 6 months, but then stayed around as a drop-in for another 18 months

so before I really quit. So why did I drop out?</P>

<P>It started before I was born. My biological mother was a young, unwed college graduate student, and she decided

put me up for adoption. She felt very strongly that I should be adopted by college graduates, so everything was

all

set for me to be adopted at birth by a lawyer and his wife.</P>

<P>Except that when I popped out they decided at the last minute that they really wanted a girl. So my parents, who

were on a waiting list, got a call in the middle of the night asking: "We have an unexpected baby boy; do you

want

him?" They said: "Of course."</P>

My biological mother later found out that my mother had never graduated from college and that my father had never

graduated from high school. She refused to sign the final adoption papers. She only relented a few months later when

my parents promised that I would go to college. This was the start in my life.

And 17 years later I did go to college. But I naively chose a college that was almost as expensive as Stanford, and

all of my working-class parents' savings were being spent on my college tuition.

After six months, I couldn't see the value in it. I had no idea what I wanted to do with my life and no idea how

college was going to help me figure it out. And here I was spending all of the money my parents had saved their

entire life. So I decided to drop out and trust that it would all work out OK.

It was pretty scary at the time, but looking back it was one of the best decisions I ever made. The minute I dropped

out I could stop taking the required classes that didn't interest me, and begin dropping in on the ones that looked

interesting.

It wasn't all romantic. I didn't have a dorm room, so I slept on the floor in friends' rooms, I returned coke

bottles for the 5¢ deposits to buy food with, and I would walk the 7 miles across town every Sunday night to get one

good meal a week at the Hare Krishna temple. I loved it.

And much of what I stumbled into by following my curiosity and intuition turned out to be priceless later on. Let

me give you one example:

Reed College at that time offered perhaps the best calligraphy instruction in the country. Throughout the campus

every poster, every label on every drawer, was beautifully hand calligraphed. Because I had dropped out and didn't

have to take the normal classes, I decided to take a calligraphy class to learn how to do this.

I learned about serif and san serif typefaces, about varying the amount of space between different letter

combinations, about what makes great typography great. It was beautiful, historical, artistically subtle in a way

that science can't capture, and I found it fascinating.

None of this had even a hope of any practical application in my life.

But ten years later, when we were designing the first Macintosh computer, it all came back to me. And we designed

it all into the Mac. It was the first computer with beautiful typography. If I had never dropped in on that single

course in college, the Mac would have never had multiple typefaces or proportionally spaced fonts. And since Windows

just copied the Mac, its likely that no personal computer would have them.

If I had never dropped out, I would have never dropped in on this calligraphy class, and personal computers

[출처] 유수봉 교수의 WEB-05|작성자 oopp2314eehh

iframe

iframe1

<!DOCTYPE html>

<html>

<head>

<title>최승호 : iframe 실습-1</title>

</head>

<body>

<h3>▶iframe 이 뭘까요 ?</h3>

<hr>

<hr>

</body>

</html>

iframe2

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>최승호 : iframe 실습-2</title>

</head>

<body>

<h3>▶iframe 에 name 을 설정하면 이렇게 사용할 수 있습니다.</h3>

<hr>

</iframe>

</iframe>

<a href="Lab_link2.html#second" target="IFRAME2">스티브잡스</a>

</body>

</html>

WebFrom

로그인

<!DOCTYPE html>

<head>

</head>

<body>

<hr>

<form>

사용자 ID : <input type="text" size="15" value=""><br>

비밀 번호 : <input type="password" size="15" value="">

자소서 : <textarea cols="25" rows="3">이곳에 자기소개서 작성

</textarea><br>

나라 : <input type="text" list="나라">

</datalist>

<br>보고싶은것 : <input type="text" list="어디">

</datalist>

짜장면 <input type="checkbox" value="1">

짬뽕 <input type="checkbox" value="2" checked>

탕수육 <input type="checkbox" value="3">

<hr>

<input type="radio" name="china" value="1">짜장면

<input type="radio" name="china" value="2" checked> 짬뽕

<input type="radio" name="china" value="3">탕수육

<input type="radio" name="korea" value="2" checked> 냉면

<input type="radio" name="korea" value="3">라면

<hr>

</select>

</form>

</body>

</html>

회원가입

<!DOCTYPE html>

<head>

</head>

<body>

<hr>

<form>

<tr><td>사용자 ID :

</table>

<hr>

국적 : <input type="text" list="나라">

</datalist>

</datalist>

성별 :

<input type="radio" name="sex" value="1"> 남자

<input type="radio" name="sex" value="2"> 여자

본인의 연령대

<input type="radio" name = "age" value="1"> 10대

<input type="radio" name = "age" value="2"> 20대

<input type="radio" name = "age" value="3"> 30대

<input type="radio" name = "age" value="4"> 40대

<input type="radio" name = "age" value="5"> 50대 이상

E-mail : <input type="text" value"">

<hr>

회원가입 사유 <br><br>

방문 경로<br><br>

<input type="checkbox" value="1"> 광고

<input type="checkbox" value="2"> 지인추천

<input type="checkbox" value="3"> 포털사이트 검색

<hr>

<img src="//t1.daumcdn.net/postcode/resource/images/close.png" id="btnFoldWrap"

style="cursor:pointer;position:absolute;right:0px;top:-1px;z-index:1" onclick="foldDaumPostcode()"

alt="접기 버튼">

</div>

// 우편번호 찾기 찾기 화면을 넣을 element

var element_wrap = document.getElementById('wrap');

function foldDaumPostcode() {

// iframe을 넣은 element를 안보이게 한다.

element_wrap.style.display = 'none';

}

function sample3_execDaumPostcode() {

// 현재 scroll 위치를 저장해놓는다.

var currentScroll = Math.max(document.body.scrollTop, document.documentElement.scrollTop);

new daum.Postcode({

oncomplete: function (data) {

// 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

// 각 주소의 노출 규칙에 따라 주소를 조합한다.

// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.

var addr = ''; // 주소 변수

var extraAddr = ''; // 참고항목 변수

//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.

if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우

addr = data.roadAddress;

} else { // 사용자가 지번 주소를 선택했을 경우(J)

addr = data.jibunAddress;

}

// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.

if (data.userSelectedType === 'R') {

// 법정동명이 있을 경우 추가한다. (법정리는 제외)

// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.

if (data.bname !== '' && /[동|로|가]$/g.test(data.bname)) {

extraAddr += data.bname;

}

// 건물명이 있고, 공동주택일 경우 추가한다.

if (data.buildingName !== '' && data.apartment === 'Y') {

extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);

}

// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.

if (extraAddr !== '') {

extraAddr = ' (' + extraAddr + ')';

}

// 조합된 참고항목을 해당 필드에 넣는다.

var fullAddress = addr;

// 사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.

if (data.userSelectedType === 'R') {

// 사용자가 도로명 주소를 선택했을 경우 참고항목을 조합한다.

fullAddress += extraAddr;

}

// 우편번호와 주소 정보를 해당 필드에 넣는다.

document.getElementById('sample3_postcode').value = data.zonecode; // 우편번호

document.getElementById('sample3_address').value = fullAddress; // 주소

document.getElementById('sample3_detailAddress').focus(); // 상세주소 필드로 포커스 이동

}

// 우편번호 찾기 화면을 다시 보이게 한다.

element_wrap.style.display = 'block';

// 사용자가 찾은 주소로 화면을 다시 조정한다.

document.body.scrollTop = currentScroll;

width: '100%',

height: '100%'

}).embed(element_wrap);

// iframe을 넣은 element를 보이게 한다.

element_wrap.style.display = 'block';

}

</script>

</form>

</body>

</html>

출처

https://blog.naver.com/newbongman/223404405642

▷유수봉 교수의 WEB-05

유수봉 교수의 WEB-05 ▶ Lab_Link1.html ▶ Lab_Link2.html ▶ Lab_iframe1.html ▶ Lab_iframe2...

blog.naver.com

728x90

'수업 > 자바스크립트' 카테고리의 다른 글

유수봉 교수의 WEB-08 (0)	2024.04.25
유수봉 교수의 WEB-07 (0)	2024.04.17
유수봉 교수의 WEB-04 (0)	2024.03.28
유수봉 교수의 WEB-03 (0)	2024.03.21
유수봉 교수의 WEB-02 (0)	2024.03.14

'수업/자바스크립트' Related Articles

최코딩의 개발노트

유수봉 교수의 WEB-05 본문

유수봉 교수의 WEB-05

'수업 > 자바스크립트' 카테고리의 다른 글

티스토리툴바