devil cat everdevel character

프로그래머가 아니던 시절 만들기 시작한 에버디벨 !
첫 오픈 한달과 최근 한달의 방문자수를 비교해보니 무려 190배 이상 증가했습니다.
그 사이 어느새 1년 9개월의 경력을 갖고 있는 프로그래머가 되었습니다.
실무의 경험을 담아 더 많은 내용으로 올해 언젠가 에버디벨이 책으로 나옵니다.
{HTML5, CSS3, jQuery, MySQL5, PHP7(PDO, OOP, MVC)}
아무것도 몰라도 컴퓨터만 있다면 하나부터 학습하며 발전해 나가는 자신을 보는 감동을 드리겠습니다.

disney Teyon kin

리스트 태그와 링크태그에 대해서 배워 봅시다 ^-^

우리가 웹사이트를 돌아다니면서 메뉴등을 보게 되는데요. 그러한 메뉴들은
대부분 리스트 태그로 만들어 졌답니다.

리스트 태그는 번호가 없는 형태가 있고, 번호가 있는 형태가 있습니다. 번호가 없는 경우는 아래의 <ul>로 시작하고요.


						<ul>
						<li>내용1</li>
						<li>내용1</li>
						<li>내용1</li>
						</ul>
	
						번호가 있는 경우면은 <ol>로 시작합니다.

						<ol>
						<li>내용1</li>
						<li>내용1</li>
						<li>내용1</li>
						</ol>
	
						<li></li> 는 목록의 시작과 끝입니다.

						<li>네이버</li> 이렇게 하면 메뉴는 네이버 하나만 나오구요

						<li>네이버</li>
						<li>다음</li>
						

이렇게 하면 메뉴는 목록은 네이버 와 다음 2개가 뜹니다 이런식으로 자신의 원하는 목록을 만들어 나가면 됩니다.

그럼 소스를 쳐보면서 실습을 해봅시다.

							<!DOCTYPE html>
							<html>
							<head>
							<title>리스트를 만들어 봅시다. </title>
							</head>
							<body>
							<h2>리스트 만들기</h2><br />
							<h3>번호가 없는 리스트</h3>
							<ul>
							<li>네이버</li>
							<li>다음</li>
							<li>네이트</li>
							</ul>
							<br />
							<h3>번호가 있는 리스트</h3>
							<ol>
							<li>네이버</li>
							<li>다음</li>
							<li>네이트</li>
							</ol>
							</body>
							</html>
							

결과를 봅시다.


list_tag

이번에는 하이퍼링크에 대해서 배워 봅시다.


하이퍼링크는 우리가 네이버등에서 뉴스를 클릭했을때 어딘가로 이동을 하죠,, 바로 그 기능인데요.


href 주소지정에 파일의 경로를 지정시 그 파일을 다운로드도 합니다.
href="app.exe" 와같이

지금 해봅시다. ㅋ

하이퍼 링크 태그는 이것 입니다.
<a href="주소">링크를 거는 콘테츠 내용, 텍스트, 이미지등 </a>

그럼 우리는 위의 리스트 위에서 실습한 리스트 소스로 테스트를 해보도록 합시다. ^^


<li></li>태그 안에다가 하이퍼링크 태그를 넣을 거에요.!!

								<!DOCTYPE html>
								<html>
								<head>
								<title>하이퍼링크를 학습해보자.</title>
								</head>
								<body>
								<h2>하이퍼 링크</h2><br />
								<ul>
								<li><a href="http://www.naver.com">네이버</a></li>
								<li><a href="http://www.daum.net">다음</a></li>
								<li><a href="http://www.nate.com">네이트</a></li>
								</ul>
								</body>
								</html>
								

위의 소스를 테스트 해보시고 네이버 다음 네이트 등을 눌러 보시기 바랍니다. ^^

hyperlink_tag

위의 샘플에서 링크를 눌러 보면 자신이 현재 보고 있는 웹브라우저에서 바로 이동을 하죠?
그럼 새창이 열리고 그곳에서 원하는 페이지가 나오게 하는 방법을 알아봅시다.
바로 a태그 안에 target="_blank" 를 넣어 줍니다.
위의 소스에 그대로 타겟 블랭크만 넣어서 테스트 해볼까요?
아래처럼 소스를 작성해 주시구요.

									<!DOCTYPE html>
									<html>
									<head>
									<title>하이퍼링크를 학습해보자.</title>
									</head>
									<body>
									<h2>하이퍼 링크</h2><br />
	
									<ul>
										<li><a href="http://www.naver.com" target="_blank">네이버</a></li>
										<li><a href="http://www.daum.net" target="_blank">다음</a></li>
										<li><a href="http://www.nate.com" target="_blank">네이트</a></li>
									</ul>
									</body>
									</html>
									

테스트 해봅시다. ^^


hyperlink_tag_target

위처럼 네이버가 따로 창에 뜹니당.
그럼 이번강좌는 여기까지 하고 다음에 또 봅시당 다음 강좌에서는 이미지를 띄어봅시다. ^^

다음강좌는 4강.이미지 띄우기 입니다. 클릭하면 다음 강좌로 이동합니다.