'프로그래밍/HTML'에 해당되는 글 22건

제목 날짜
  • HTML5 마크업 요소 활용하기ㆍheaderㆍnavㆍsectionㆍasideㆍfooterㆍtime(2) 2021.04.18
  • HTML 기본 코드와 그냥 지나쳤던 HTML 태그들 2021.01.06
  • 이미지에 링크를 연결하는 방법_HTML 이미지맵 활용 2019.08.28
  • HTML 바둑판 형식 div 태그 정렬 샘플 예제 몇가지(div 왼쪽, 오른쪽, 가운데 정렬) 2019.07.05
  • HTML 작업을 편하게 하는 방법(크롬 개발자 도구를 활용하세요) 2018.11.04
  • HTML 파일 소스 코드 보는 방법 2016.05.24
  • HTML 글자크기, 글씨 진하게, 목록 표시, 테이블 태그, 이미지 태그 넣는 방법 2015.05.22
  • HTML Frame, Form, 메서드, 식별자 이론 2012.04.19
  • HTML 주소록, 전자제품 목록 예제 2012.04.18
  • HTML ol, ul, li, 링크 사용방법 2012.04.18

HTML5 마크업 요소 활용하기ㆍheaderㆍnavㆍsectionㆍasideㆍfooterㆍtime

HTML5 마크업 요소 활용하기ㆍheaderㆍnavㆍsectionㆍasideㆍfooterㆍtime

웹사이트 화면을 구성하며 HTML div 태그만을 활용해 작성한 코드를 HTML5 마크업 요소를 변경하게 되면 브라우저에 어떠한 역활을 하는 웹페이지인지 목적을 알려줄 수 있다.

 

CSS에서 HTML5 마크업 요소는 어떠한 방식으로 선택하는지 그리고 HTML5 마크업 요소는 HTML로 어떻게 표현하면 되는지 간단히 예제 소스를 작성하였으며 다음에 필요한 경우 제가 활용하기 위한 목적도 있습니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>div 레이아웃 대신 HTML5 요소 활용해 보기</title>
  <style>
	p{
		text-align:center;
		font-size: 25px;
		font-weight: bold;
	}
	#all{
		padding: 10px 10px 10px 10px;
		width: 100%;
	}
  	header{
		height: 100px;
		border: black 1px solid;
		background-color: rebeccapurple;
		margin: 10px;
	}
	ul{
		margin: 10px;
		display: inline-block;
		background-color: yellowgreen;
		width: 97%;
	}
	li{
		list-style-type: none;
		display: inline;
		font-weight: bold;
	}

	ul li.selected{
		background-color: #ffbc00;
	}
	section#left, section#center, aside{
		display: inline-block;
		margin: 10px;
	}
	a:link{
		text-decoration: none;
	}
	section#left{		
		height: 580px;
		padding: 15px;
		width: 30%;
		background-color: cadetblue;
	    float: left;
	}
	section#center{
		height: 580px;
		padding: 15px;
		width: 30%;
		background-color: cornflowerblue;
	}
	aside{
		height: 580px;
		padding: 15px;
		width: 30%;
		background-color: darkslategrey;
		float: right
	}
	footer{
		height: 100px;
		border: black 1px solid;
		background-color: crimson;
		padding: 15px;
		margin: 10px;
		clear:right;		
	}
  </style>
 </head>

 <body>
 <div id="all">
 	<header>
		<p>HEADER</P>
	</header>

	<nav>
		<ul>
			<li><a href="">홈</a></li>
			<li class="selected">1번 메뉴</li>
			<li><a href="">2번 메뉴</a></li>
			<li><a href="">3번 메뉴</a></li>
		</ul>
	</nav>

	<section id="left">
		<p>LEFT</P>
	</section>

	<section id="center">
		<p>
			CENTER			
		</P>
		<p><time datetime="2021-04-16">2021/04/16</time></p>
	</section>

	<aside>
		<p>RIGHT</P>
	</aside>

	<footer>
		<p>FOOTER</P>
	</footer>
 </div>
 </body>
</html>

 

결과 화면


 

화면을 구성하며 이미 구성한 div 요소를 HTML5 마크업 요소로 변경하여 사용하지 않았는데 브라우저에게 어떠한 의미를 확실하게 전달해야 할 필요성이 있다고 판단될 땐 위와 같이 HTML5 마크업 요소를 활용해 변경해 코드를 작성할 수 있다는 부분을 기억하고 있으면 좋을 것 같다.

HTML5의 section만 코드를 작성하였으나 article과 section 태그 차이가 궁금하신 분들은 링크된 경로를 참고하시면 좋을 듯합니다. - aboooks.tistory.com/346

저작자표시비영리변경금지
  • 나그네
    2021.10.24 22:32

    좋은 정보 공유 감사합니다!

    • Favicon of https://zzarungna.com BlogIcon zzarungna
      2021.10.24 23:26 신고

      좋은 댓글 남겨 주셔서 감사합니다.! :)

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

HTML 기본 코드와 그냥 지나쳤던 HTML 태그들

HTML 기본 코드와 그냥 지나쳤던 HTML 태그들

HTML, CSS, PHP, My SQL, Mobile, JAVA 등 기존에 알고 있는 내용도 꽤 있고 공부도 했었지만 다시 한번 HTML부터 책을 읽으며 프로그래밍 관련 서적을 재미 삼아 읽고 있습니다.


개인적으로 작업을 진행하면서 HTML 코드를 기본적으로 많이 다루게 되는데 평소에 자주 잘 사용하지 않거나 특정 태그를 사용하긴 했지만, 그했지만 그 의미에 대해 전혀 신경 쓰지 않다 보니 지나쳤던 몇몇 HTML 태그들이 있습니다.

 

물론 검색만 조금 해본다면 쉽게 알 수 있는 내용이지만 개인적으로 HTML 기본 구문들과 HTML에서 잘 사용하지 않았거나 그 의미를 알면 좋은 HTML 태그 몇 가지를 정리해 볼까 합니다.

먼저 아래 HTML 코드와 같이 HTML 코드 작성 시 기본 구조를 아래와 같이 작성하면 좋습니다. 복잡한 DOCTYPE도 필요 없고 인코딩도 UTF-8 하나면 사용하면 됩니다.

 

태그는 CSS를 html 문서 내에 직접 사용할 때 주로 사용. 다른 폴더에 있는 CSS 파일을 가져올 땐  사용.

Javascript는 <head> 태그 안 CSS 라인 아래에 작성하거나 <body> 태그가 끝나는 부분에 위치하는 경우가 많은데 가벼운 자바스크립트 사용의 경우는 <head> 태그 안에 사용해도 무방하지만 대부분 <body> 태그가 끝나는 부분에 Javascript 사용.

개인적으로 매번 타이핑하기 귀찮으니 HTML과 관련된 기본 구조 코드는 정리해 두는 게 좋을 것 같아 정리해 봅니다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>여긴 제목</title>
    <style></style><!-- 현업에선 거의 쓰지 않음 거의 테스트 용도로 로컬에서 바쁠 때 사용. -->
	<link href="css파일이름.css" rel="stylesheet"><!-- 외부 css 파일 참조 -->
</head>
<body>
<!-- 각종 HTML 태그 시작 -->
<!-- 각종 HTML 태그 끝 -->

<script type="text/javascript">
	/* javascript or jquery */
</script>
<script src="스크립트파일이름.js"></script><!-- 외부 jquery 및 javascript 파일 참조 -->
</body>
</html>

 

그냥 지나칠 수도 있었던 HTML 의미와 유용하게 써볼 만하지 않을까? 하는 몇몇 HTML 태그에 대한 내용을 소스 코드를 간단히 작성해 봤습니다. 코드와 같이 설명은 주석을 참고.


내용은 DOCTYPE, charset(인코딩), ol과 ul 사용 차이, blockquote, 하이퍼 링크 아이디 지정에 대한 내용입니다.

<!DOCTYPE html><!-- 문서의 형태를 브라우저에게 알려주기 html 문서라고 알려준다. -->
<!--
	doctype과 관련 문서의 형태를 다양하게 브라우저에게 알려주기 위해 아래 와 같이 사용된 형태가 많았으나
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <!doctype html> 만으로도 충분함.
-->
<html>
<head>
	<meta charset="utf-8"><!-- 현재 문서의 인코딩 형태는 UTF-8 형태라고 알려주기 위함 -->
    <!-- 간혹 UTF-8로 저장한 파일이 한글이 깨지는 경우가 있는데 대부분 소스 파일 저장시 UTF-8 형태로 파일을 저장하지 않은 경우 한글이 깨진 경우가 있다면 파일 인코딩 저장이 어떻게 되어 있는지 확인 대부분 (EUC-KR) -->
	<title>HTML의 기본 뼈대</title>
	<style>
		h1 { border-bottom: 1px solid; }
	</style>
</head>
<body>
<h1>1. 텍스트 작성 시 쌍 따옴표(더블쿼테이션)이 필요할 때</h1>
<p>글자 작성중 <q>쌍 따옴표(더블 쿼테이션)</q>이 필요할 때 사용하면 좋을 듯 </p>
<br>

<h1>2_1. 순서가 있는 리스트를 표현할땐 ol과 li로</h1>
<p>다음 보기를 보고 한글이 아닌 문자를 고르세요</p>
<ol>
	<li>아이유</li>
	<li>HUNTER</li>
	<li>홍길동</li>
	<li>구미호</li>
</ol>
<br>

<h1>2_2. 순서와 관련 없는 리스트를 표현할때</h1>
<p>연예인 이름 몇가지</p>
<ul>
	<li>아이유</li>
	<li>톰 크루즈</li>
	<li>오드리 햅번</li>
	<li>스티븐 스필버그</li>
</ul>
<br>

<h1>3. 무언가 삭제되었다는 것을 표현할땐 del 태그를 기억해 놓으면 좋을 듯</h1>
<h2>판매중인 상품</h2>
<ol>	
	<li>PS5 - 650,000원</li>
	<li>XBOX - 650,000원</li>
	<li><del>AMD CPU - 750,000원</del></li>
	<li>INTEL CPU - 740,000원</li>
</ol>
<br>

<h1>4. 문서 작성 중 글자 시작 지점에 간격이 필요할땐 nbsp를 사용하는 것 보다 blockquote 태그를 사용하면 좋을듯</h1>
	<h2>일반적으로 글자를 작성하는 경우</h2>
	<p>일반적인 문자를 작성할때 띄어쓰기(탭) 효과가 없기에 css를 이용해 패딩이나 마진을 사용하여 간격을 벌일 필요가 없다. 가능하다면 blockquote를 이용하면 좋을 듯?</p>

	<h2>blockquote 태그를 사용하는 경우</h2>
	<blockquote>글자의 첫 시작 지점을 작성할 때 blockquote 태그를 사용하면 좋을 듯 하다.</blockquote>	
<br>

<h1>5. 아이디 지정 링크를 사용하면 페이지 이동시 원하는 지점으로 이동 가능 사이트간 링크시 상품의 특정 페이지로 이동된다든가 원하는 내용으로 링크를 연결할때 사용하면 좋을 듯 하다.</h1>
<p><a href="http://enjoyrank.com/blog/index.html/#no3">아이디 지정 링크</a></p>

</body>
</html>

 

위 코드를 브라우저에서 출력했을 때 화면.


 

마지막으로 아이디 지정 링크는 제가 연습 삼아 가끔 개발하고 있는 웹사이트에 링크를 연결해 놓았으니 어떻게 표시되는지 궁금하신 분들은 눌러 보시면 됩니다. enjoyrank.com/blog/index.html/#no3

 

기존에 이미 익숙한 태그에 대한 몰랐던 의미와 자주 사용하지 않았지만 유용해 보이는 HTML 태그를 정리해 보았으니 기억해 두면 좋을 것 같습니다.

 

나중에 시간을 내어 CSS → PHP/MYSQL → Mobile → Java 책을 읽어 보면서 자주 사용하지는 않지만 유용한 내용이 있다면 하나씩 또 정리해 보겠습니다.

저작자표시비영리변경금지

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

이미지에 링크를 연결하는 방법_HTML 이미지맵 활용

이미지에 링크를 연결하는 방법_HTML 이미지맵 활용

웹사이트에서 HTML 코드를 이용해 이미지 파일에 링크를 연결할 수 있습니다. 기본적으로 이미지를 불러오는 img 태그를 이용해 이미지를 불러오고 해당 이미지를 감싸는 HTML의 a 태그를 연결해 이미지에 링크를 연결할 수 있습니다.

그런데 위와 같은 방법은 전체 이미지에 대한 링크를 거는 것이고 이미지의 특정 영역에 링크를 연결하고 싶다면 이미지를 부분적으로 잘라내거나 이미지를 백그라운드에 배치하고 이미지 위에 HTML 태그를 배치해 링크를 연결할 수 있습니다.

위와 같은 방법을 이용해 링크를 건다면 시간도 오래 걸리고 이미지를 자르거나 배치하는데 매우 번거로운 작업이 될 수 있습니다.

기본적인 방법을 통해 사이트를 구현하면 좋겠지만 이미 구현된 사이트를 수정해야 하는 경우나 일정 기간 내에 사이트를 만들어야 하는데 급하게 처리되어야 하는 경우 이미지 맵을 활용하는 방법도 굉장히 괜찮은 방법의 하나라고 생각이 듭니다.

 

아래 샘플 이미지는 네모 버튼 영역을 눌렀을 때만 각각의 버튼 영역에 따라 다른 링크를 연결하는 것이 목적입니다.


 

위 이미지를 이미지맵 코드를 이용해 coords 부분에 링크로 지정할 영역을 지정해 줘야 하는데 사이트를 통해 간편하게 해당 코드를 얻어낼 수 있습니다.

제가 자주 이용하는 사이트 중 하나인데 https://www.image-map.net  사이트에 접속하시고 이미지를 불러올 형태를 선택하시면 됩니다.

 

Select Image from My PC(PC에 있는 이미지를 직접 불러올 때)
Load Image from Website (웹사이트에 이미 올려져 있는 이미지 링크 주소를 불러올 때)


 

개인적으로는 웹사이트에 이미지 파일을 올리고 이미지 링크 주소를 통해 이미지를 가져오는 방식을 선호합니다. 링크를 지정할 이미지를 하나 선택하시면 됩니다.


 

그럼 아래 이미지와 같이 이미지를 불러온 뒤에 링크를 걸 영역을 지정해 주시면 됩니다. 이미지에 링크를 걸 때 네모 형태 링크도 가능하고 원형도 가능하며 자유로운 형태의 링크를 연결할 수 있습니다.

링크를 모두 지정하시고 형태를 지정하셨다면 Show Me The Code 버튼을 눌러 주시면 됩니다. Target은 _blank로 지정하면 새 창으로 열리며 나머지는 모두 현재 창에서 지정한 링크가 열립니다.


 

그럼 아래 이미지와 같이 생성된 코드를 확인할 수 있으며 해당 코드를 모두 복사하시면 됩니다.


 

위 코드를 복사하시고 HTML 코드 수정이 가능한 부분에 방금 복사하신 코드를 넣어 주시면 됩니다.

<!DOCTYPE html>
<html>
<head>
	<title>DIV</title>
	</head>
	<body>
		<div>
		<!-- 사이트를 이용해 구한 이미지맵 코드를 이곳에 넣어준다. -->
		<img src="http://enjoyrank.com/blog_img/flower.jpg" usemap="#image-map">

		<map name="image-map">
			<area target="_blank" alt="랭크" title="랭크" href="http://enjoyrank.com/main.php" coords="804,13,1268,110" shape="rect">
			<area target="_parent" alt="블로그" title="블로그" href="https://zzarungna.com/" coords="34,488,503,585" shape="rect">
			<area target="_top" alt="블로그 프로그래밍" title="블로그 프로그래밍" href="https://zzarungna.com/category/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D" coords="652,968,1122,1065" shape="rect">
		</map>
		</div>
	</body>
</html>

 

사이트를 통해 얻어낸 이미지맵 코드를 실제 사이트 적용하면 아래 이미지와 같이 원하는 이미지 영역에 링크를 걸 수 있습니다.

 

실제 적용한 사이트 링크 주소 - http://enjoyrank.com/blog_test_source/pc_link_test.html

 

위와 같이 이미지에 특정 영역에 링크를 걸 수 있으며 이미지가 여러 개인 경우는 위와 동일한 방법으로 진행하면 되는 데 usemap, map name 이름은 동일하게 지정하시고 추가한 이미지 태그에 usemap, map name은 다르게 지정해 주시면 됩니다.

실제 적용한 사이트 링크 주소 - http://enjoyrank.com/blog_test_source/pc_link_multi.html

<!DOCTYPE html>
<html>
<head>
	<title>DIV</title>
	<meta charset="UTF-8">
	</head>
	<body>
		<div>
		<img src="http://enjoyrank.com/blog_img/barrel.jpg" usemap="#image-map_a">
		
		<map name="image-map_a">
		    <area target="_blank" alt="사이트 링크" title="사이트 링크" href="http://enjoyrank.com" coords="105,183,236,381" shape="rect">
		    <area target="_blank" alt="블로그 링크" title="블로그 링크" href="https://zzarungna.com/" coords="414,3,628,245" shape="rect">
		</map>
		
		<img src="http://enjoyrank.com/blog_img/lotus-blossom.jpg" usemap="#image-map_b">
		
		<map name="image-map_b">
		    <area target="_blank" alt="꽃왼쪽" title="꽃왼쪽" href="https://zzarungna.com" coords="19,68,214,239" shape="rect">
		    <area target="_blank" alt="꽃오른쪽" title="꽃오른쪽" href="http://enjoyrank.com/" coords="363,182,593,290" shape="rect">
		</map>		
		</div>
	</body>
</html>

 

모바일 이미지 맵 링크

PC 버전은 위와 같이 특정 사이트를 이용해 생성된 코드를 적용하면 간단히 이미지에 원하는 영역에 링크를 연결할 수 있습니다.

하지만 모바일의 경우 이미지가 유동적인 경우가 많습니다. 그래서 이미지 크기가 변형되는 경우가 많은데 이런 경우에는 이미지 맵을 활용해 영역을 지정해도 이미지 크기가 변경되기 때문에 제대로 링크가 연결되지 않습니다.

그래서 jQuery에서 지원하는 것을 활용해 이미지 크기가 유동적으로 변해도 지정한 영역에 링크가 걸리도록 하실 수 있습니다.

핵심적인 부분 몇 가지만 정리하였습니다.
1. jQuery 사용을 위한 스크립트 첨부
2. 유동적으로 변하는 이미지 링크를 유지하기 위해 jQuery 스크립트 첨부
3. HTML 로딩이 완료된 후 rwdImageMaps 함수 호출

주의할 점은 이미지를 불러오는 이미지 태그 영역이 항상 100% 형태로 이미지 형태가 화면 사이즈에 맞게 늘어나도록 지정해 주어야 정상적으로 작동합니다.

실제 적용한 사이트 링크 주소 - http://enjoyrank.com/blog_test_source/mobile_link_multi.html

<!DOCTYPE html>
<html>
<head>
	<title>DIV</title>
	<meta charset="UTF-8">
	<style type="text/css">
	.test_img{
		width: 100%;
	}
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>	
	<script type="text/javascript">
	$( document ).ready(function() {
	   $('img[usemap]').rwdImageMaps();
	});
	</script>
	</head>
	<body>
		<div>
		<img src="http://enjoyrank.com/blog_img/barrel.jpg" usemap="#image-map_a" class="test_img">
		
		<map name="image-map_a">
		    <area target="_blank" alt="사이트 링크" title="사이트 링크" href="http://enjoyrank.com" coords="105,183,236,381" shape="rect">
		    <area target="_blank" alt="블로그 링크" title="블로그 링크" href="https://zzarungna.com/" coords="414,3,628,245" shape="rect">
		</map>
		
		<img src="http://enjoyrank.com/blog_img/lotus-blossom.jpg" usemap="#image-map_b" class="test_img">
		
		<map name="image-map_b">
		    <area target="_blank" alt="꽃왼쪽" title="꽃왼쪽" href="https://zzarungna.com" coords="19,68,214,239" shape="rect">
		    <area target="_blank" alt="꽃오른쪽" title="꽃오른쪽" href="http://enjoyrank.com/" coords="363,182,593,290" shape="rect">
		</map>		
		</div>
	</body>
</html>

 

아래 이미지와 같이 모바일 화면에서도 지정한 영역에 링크 버튼이 정상적으로 작동하는 것을 확인할 수 있었습니다.


 

이미지에 특정 영역에 링크를 거는 방법에 대해서 나름대로 상세히 작성해 보았습니다. 인터넷에 있는 자료를 참고하여 작성한 것이지만 실제로 제가 처리한 방식이 기존에 있는 자료와 다른 부분이 많습니다.

 

나름대로 정리해 보았으니 필요하신 분들에게 도움이 되었으면 좋겠습니다.

저작자표시비영리변경금지

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

HTML 바둑판 형식 div 태그 정렬 샘플 예제 몇가지(div 왼쪽, 오른쪽, 가운데 정렬)

HTML 바둑판 형식 div 태그 정렬 샘플 예제 몇가지(div 왼쪽, 오른쪽, 가운데 정렬)

좋은 내용의 글을 작성하려고 하는 데 최근에 정말 많이 바쁜 것 같습니다. 언젠가 지금 하는 일들이 손에 익고 개인적인 실력이 더 늘어난다면 좀 더 유용한 글을 작성할 수 있을 것 같습니다.

여러 개의 div 태그를 이용해 전체 태그 안에 있는 div 태그들은 가운데 정렬하고 전체 div 태그 자체를 왼쪽, 가운데, 오른쪽으로 정렬하는 샘플 예제 div를 몇 가지 작성해 보려고 합니다.

개인적으로도 많이 사용하게 될 것 같아 기록을 남기는 의미도 있고 필요한 분들에게 도움이 되길 바라며 간단히 작성하였습니다.

 

글만으로는 어떤 내용인지 조금 헷갈리실 수 있으니 div 태그들의 이미지와 소스 코드를 첨부하였습니다. 작성한 코드가 완벽하진 않아도 필요하신 분들이 있다면 도움이 되는 내용이 있기를 바랍니다.

간단히 설명해 드리자면 영역을 나누기 위해 9개의 div 태그가 있으며 전체를 감싸는 div 태그가 한 개 있습니다. 메인 div 태그의 영역을 지정하였고 각각의 div 태그들도 영역을 나누었기에 3 x 3 형태로 div를 나눌 수 있었습니다.

전체 영역을 지정한 후 안에 있는 div 태그들은 블록 요소로 지정하였기 때문에 전체 div 크기가 넘어가게 되면 자동으로 아래 영역에 배치됩니다.

HTML에서는 블록이라는 요소로 지정하게 지정한 요소의 공간을 넘어가게 되면 자동으로 다음 영역에 배치됩니다.

가장 먼저 왼쪽으로 정렬된 상태에서 총 9개의 div 태그를 정렬했을 때 이미지입니다.

 

가장 안쪽에 있는 div 들을 감싸고 있는 바깥 div에 특별한 영역을 지정하지 않았기 때문에 기본적으로 왼쪽 정렬이 됩니다.

div 왼쪽 정렬 3 x 3 소스 코드 입니다.

<html>
 <head>
  <meta charset="UTF-8">
  <title>DIV</title>
  <style>
.main_title{
	text-align: center;
}

.main_list {
    width: 700px;
}

.list_start {
    text-align: center;
}

.list_detail {
    display: inline-block;
    width: 220px;
    height: 260px;
	border: 1px solid;
    margin-bottom: 5px;
}

.paging_start{
	text-align: center;
}
  </style>
 </head>
 <body>
 	<!-- 리스트 불러오기  -->
	<div class="main_list">
		<!-- 상단 제목 -->
		<div class="main_title">
			<p>DIV 영역을 나눠보자.</p>
		</div>
		<!-- 리스트 -->
		<div class="list_start">
			<div class="list_detail"><p>1</p></div>
			<div class="list_detail"><p>2</p></div>
			<div class="list_detail"><p>3</p></div>
			<div class="list_detail"><p>4</p></div>
			<div class="list_detail"><p>5</p></div>
			<div class="list_detail"><p>6</p></div>
			<div class="list_detail"><p>7</p></div>
			<div class="list_detail"><p>8</p></div>
			<div class="list_detail"><p>9</p></div>
		</div>
	<!-- 하단 리스트 번호 -->
	<div class="paging_start">
		<div>1 2 3 4 5 </div>
	</div>
	</div>
 </body>
</html>

 

div 태그들을 가운데 정렬 후 웹페이지에 보게 되는 이미지입니다.

대부분 비슷한 소스 코드 형태이지만 가장 안쪽 div를 감싸고 있는 바깥 div를 text-align:center; 로 지정하게 되면 div가 화면 중앙에 위치하게 됩니다. 

 

div 가운데 정렬 3x3 소스 코드 입니다.

<html>
 <head>
  <meta charset="UTF-8">
  <title>DIV</title>
  <style>
.main_title{
	text-align: center;
}

.main_list {
    width: 700px;
    margin: 0 auto;
}

.list_start {
    text-align: center;
}

.list_detail {
    display: inline-block;
    width: 220px;
    height: 260px;
	border: 1px solid;
    margin-bottom: 5px;
}

.paging_start{
	text-align: center;
}
  </style>
 </head>
 <body>
 	<!-- 리스트 불러오기  -->
	<div class="main_list">
		<!-- 상단 제목 -->
		<div class="main_title">
			<p>DIV 영역을 나눠보자.</p>
		</div>
		<!-- 리스트 -->
		<div class="list_start">
			<div class="list_detail"><p>1</p></div>
			<div class="list_detail"><p>2</p></div>
			<div class="list_detail"><p>3</p></div>
			<div class="list_detail"><p>4</p></div>
			<div class="list_detail"><p>5</p></div>
			<div class="list_detail"><p>6</p></div>
			<div class="list_detail"><p>7</p></div>
			<div class="list_detail"><p>8</p></div>
			<div class="list_detail"><p>9</p></div>
		</div>
	<!-- 하단 리스트 번호 -->
	<div class="paging_start">
		<div>1 2 3 4 5 </div>
	</div>
	</div>
 </body>
</html>


div 태그들을 오른쪽 정렬 했을 때 소스 코드와 이미지입니다.

 

마찬가지로 비슷한 형태이지만 div 태그들을 전체적으로 감싸고 있는 main_list 태그를 float 속성을 이용해 오른쪽 정렬했습니다.

 

div 오른쪽 정렬 소스 코드 입니다.

<html>
 <head>
  <meta charset="UTF-8">
  <title>DIV</title>
  <style>
.main_title{
	text-align: center;
}

.main_list {
    width: 700px;
    float: right;
}

.list_start {
    text-align: center;
}

.list_detail {
    display: inline-block;
    width: 220px;
    height: 260px;
	border: 1px solid;
    margin-bottom: 5px;
}

.paging_start{
	text-align: center;
}
  </style>
 </head>
 <body>
 	<!-- 리스트 불러오기  -->
	<div class="main_list">
		<!-- 상단 제목 -->
		<div class="main_title">
			<p>DIV 영역을 나눠보자.</p>
		</div>
		<!-- 리스트 -->
		<div class="list_start">
			<div class="list_detail"><p>1</p></div>
			<div class="list_detail"><p>2</p></div>
			<div class="list_detail"><p>3</p></div>
			<div class="list_detail"><p>4</p></div>
			<div class="list_detail"><p>5</p></div>
			<div class="list_detail"><p>6</p></div>
			<div class="list_detail"><p>7</p></div>
			<div class="list_detail"><p>8</p></div>
			<div class="list_detail"><p>9</p></div>
		</div>
	<!-- 하단 리스트 번호 -->
	<div class="paging_start">
		<div>1 2 3 4 5 </div>
	</div>
	</div>
 </body>
</html>

 

이렇게 div 영역을 개인적으로 원하는 모습이 나오도록 나름대로 div 영역 샘플 코드를 작성해 봤습니다.

class 중 list_detail 부분이 조금 눈에 거슬리긴 하지만 개인적으로 필요한 곳에서 유용하게 자주 사용할 수 있을 것 같습니다.

아무래도 웹에서는 아직 div 태그를 이용해 활용할 수 있는 것들이 많다 보니 필요한 분이 있을 것 같기도 합니다.

필요하신 분들은 참고하세요.

저작자표시비영리변경금지

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

HTML 작업을 편하게 하는 방법(크롬 개발자 도구를 활용하세요)

HTML 작업을 편하게 하는 방법(크롬 개발자 도구를 활용하세요)

HTML 코딩을 하면서 크롬 브라우저의 개발자 도구를 활용해 사용하는 방법에 대해서 작성해 보려고 합니다. HTML 작업 중 간단한 작업의 경우는 브라우저의 화면을 직접 보면서 CSS 작업까지 동시에 진행 할 때 개인적으로 자주 사용하는 방법입니다.


HTML이나 CSS 작업의 경우 태그의 속성이 기억나지 않을때 자주 사용하는 방식이며 작성한 HTML 파일은 특정 프로그램이나 다른 도구를 이용하지 않아도 HTML 파일을 완성할 수 있는 장점이 있습니다. 


직접 수정한 내용을 눈으로 보면서 확인하고 완성된 코드를 가지고 쓰다 보니 다시 코드를 수정하지 않아도 되는 장점도 있는 것 같습니다.


먼저 HTML 파일을 하나 만들어 보도록 하겠습니다. 윈도우 바탕 화면에서 마우스 오른쪽 버튼을 누르고 새로 만들기 텍스트 문서를 눌러 주시면 됩니다.



생성된 텍스트 파일의 이름은 아무거나 지정하시고 확장자만. html로 변경해 주시면 됩니다. 


확장자가 숨겨져 있으신 분들은 먼저 윈도우 환경에서 숨겨진 확장자를 표시하는 설정을 참고 하시기 바랍니다. - https://zzarungna.com/487



확장자만 html로 변경한 파일을 끌어서 크롬 브라우저에 옮겨 주시면 됩니다.



그럼 아래 이미지와 같이 컴퓨터에 있는 HTML 파일이 크롬 브라우저에서 실행됩니다. 


F12 버튼을 눌러 주시면 개발자 도구가 나오며 개발자 도구 메뉴 중에서 Elements 메뉴를 선택하시고 html 태그가 나오는 영역에 마우스 오른쪽 버튼을 누르신 뒤 Edit as HTML 메뉴를 선택해 주시면 됩니다.



아래 이미지와 같이 크롬 브라우저 내에서 HTML 소스 코드를 추가하고 수정하고 코딩하실 수 있습니다. 텍스트 파일에 아무런 내용이 없어도 기본 HTML 코드가 작성되어 있으며 HTML 코드도 수정하고 CSS 코드도 같이 수정을 합니다.


작업이 완료되면 CTRL+Enter 버튼을 눌러 주시면 크롬 브라우저에 작성한 HTML 내용이 적용됩니다.


CSS 코드 작성과 관련해 크롬 브라우저로 편하게 코딩하는 방법에 대해서 작성한 적이 있으니 필요하신 분들은 참고하시기 바랍니다. - https://zzarungna.com/1221



그런 뒤에 아래 이미지와 같이 크롬 브라우저에서 작성한 HTML 내용 확인이 가능합니다. 이제 작업이 완료되었으니 작성한 HTML 내용을 텍스트 파일로 붙여넣어야 합니다.


크롬 브라우저의 개발자 도구를 이용해 작성한 HTML 태그를 복사하시려면 html 코드가 있는 최상위 태그인 html 태그를 선택하시고 마우스 오른쪽 버튼을 누르고 Copy 메뉴 Copy element를 선택해 주시면 됩니다.


전체 태그를 복사할 때는 html 태그를 선택하시고 특정 html 태그 복사도 가능하니 참고하시기 바랍니다. 


크롬 브라우저에서 작성한 CSS 코드도 HTML 코드에 포함된 것을 확인하실 수 있습니다.



작업이 끝났으니 HTML 파일을 열어서 방금 복사한 코드를 붙여넣어서 저장하면 됩니다.


아래 이미지와 같이 크롬 브라우저에서 작업한 내용을 붙여넣었을 때 화면인데 코드 정렬이 안 되어 있는 게 흠이지만 어차피 저에게 필요한 코드 작업은 끝났기에 필요한 곳에 활용하면 되겠네요.



간단히 HTML, CSS 코드를 크롬 브라우저를 활용해서 파일을 만들고 수정하는 방법까지 간단히 작성해 보았습니다.


개인적으로 필요할 때 자주 사용하는 방식인데 크롬 브라우저의 개발자 도구 중에서 몰랐던 기능이었다면 참고하셔서 필요할 때 활용하시면 좋을 것 같습니다.

저작자표시비영리변경금지

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

HTML 파일 소스 코드 보는 방법

HTML 파일 소스 코드 보는 방법

기본적인 프로그램 교육을 받거나 IT에 관심이 있으신 분들은 대부분 파일의 확장자가 html확장자에 대해서 굉장히 익숙 하실 겁니다. 하지만 프로그래밍 IT에 지식이 없으신 분들이 확장자가 html인것을 보면 무엇인지 잘모르실 겁니다.

간단하게 html확장자는 웹페이지를 보기위한 파일이라고 생각하시면 될것 같습니다. 사이트, 블로그, 까페등을 운영 하면서 html파일을 열어보는 일이 한두번은 생기게 됩니다.

여기서 html에 이론에 대한 설명은 모두 드리기 힘들것 같으니 단순히 HTML파일 확장자의 파일을 열어 소스코드를 확인하고 수정 하는 방법을 써볼까 합니다.

html파일의 경우는 바로 아래 이미지에 나온것처럼 생겼습니다. 더블 클릭을 하거나 파일을 열어보면 바로 인터넷창으로 연결이 되는 파일입니다. 이안에 들어있는 소스코드는 무엇이 있는지 한번 보도록 합시다.



안에 파일을 열어 소스코드를 확인하고 수정하기 위해 텍스트를 입력하고 작성할수 있는 윈도우 메모장을 실행을 하도록 합시다. 메모장을 못찾으신 분은 (http://zzarungna.tistory.com/456)이경로에 링크를 걸어 놓겠습니다.

메모장에서 파일 메뉴를 선택후 열기 버튼을 눌러 주도록 합시다.



그런뒤에 저장을 한 html파일의 위치로 가서 파일을 선택하고 여시면 되는데 열기 창에서 오른쪽 하단에 파일종류를 모든 파일로 해주셔야 파일 리스트가 나오니 참고 하시기 바랄게요.



파일을 열어보면 html구문과 한글이 섞여 있는것을 확인 하실수 있습니다.  이상태에서 아래 2번째 나온 이미지 처럼 글자를 한번 추가해 보도록 하겠습니다. 추가를 하고 저장을 눌러주세요. Ctrl+S가 메모장 저장 단축키 입니다.



그런뒤에 다시 수정한 html파일을 더블클릭 하거나 열어보면 인터넷창에 수정한 글이 들어간것을 확인 하실수가 있으실 겁니다.



HTML에 더많은 정보를 보고싶으신분은 제블로그 상단 왼쪽 메뉴 버튼에 HTML 메뉴를 참고 하시면 HTML에 대한 자료가 많이 있으니 관심이 있으신 분은 한번 보시길 바라겠습니다.

저작자표시비영리변경금지

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

HTML 글자크기, 글씨 진하게, 목록 표시, 테이블 태그, 이미지 태그 넣는 방법

HTML 글자크기, 글씨 진하게, 목록 표시, 테이블 태그, 이미지 태그 넣는 방법

html 글자 크기 조절, 링크, 글자 강조하기

SOURCE.HTML

<html>

<!--

      html에서 주석은 이렇게 표시한다.

      여러 줄에 걸쳐서 적을 수 있다.

      주석부분은 웹 브라우저에서 무시한다.

-->

<!-- 헤더 영역

      문서와 관련된 부가 정보를 정의한다.

-->

<head>

    <!-- 부가적인 정보 정의 -->

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!-- title태그는 문서의 제목을 표시한다. -->

    <title>html연습1 </title>

</head>

 

<!-- 본문 영역

      브라우저의 화면에 표시되는 영역

-->

<body>

    <!--

    <h1~h6> : 중요도에 따라서 쓰는 태그. 글씨 크기를 조절하는것이 아니다.

    <p> : 다른 단락이라는 의미

    <br> : 줄바꿈 -->

    <h1>HTML </h1>

    <h2>html의 역사 </h2>

    <p>팀버너스리에 의해서 처음으로 시작되었다. 처음에는 연구논문을 공유할 목적으로 시작되었다. </p>

 

    <p>

        <strong>자바 </strong>에서는 서블릿/jsp 기술을 사용해서 다이나믹한 웹 페이지를 제작할 수 있다. <br />

        특히, jsp기술은 html포맷 기반에서 개발하기 때문에 <br />훨씬 html친화적인 코드로 웹 개발이 가능 하다. <br />

        자바를 이용한 웹 개발은 <a href='http://www.oracle.com'> 오라클</ a> 에서 배울 수 있다.

    </p>

 

    <h2>html의 문법 </h2>

    <h3>html의 태그 </h3>

    <h4>태그의 구분 </h4>

</body>

</html>


결과 화면




HTML 리스트 표현 방법


SOURCE.HTML

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>New Web Project </title>

</head>

<body>

    <h1>리스트 엘리먼트 </h1>

    <h2>ol태그 </h2>

    <h3>이번주 개봉영화 순위 </h3>

    <ol>

        <li><a href="http://movie.daum.net/moviedetail/moviedetailMain.do?movieId=54361"><strong>매드맥스</strong> </a></li>

        <li><a href="http://movie.daum.net/moviedetail/moviedetailMain.do?movieId=73750"> 어벤저스 </a></li>

        <li>스파이 </li>

    </ol>

 

    <h3>떡볶이 만드는 방법 </h3>

 

    <!-- 순서가 필요한 경우 ol -->

    <ol type = "I">

    <li>물을 끓인다. </li>

    <li>떡을 넣는다. </li>

    <li>각종 양념을 넣는다. </li>

    <li>섞으면서 끓인다. </li>

    </ol >

 

    <h2>ul태그 </h2>

    <h3>개강 예정 과목 </h3>

 

    <!-- 순서가 필요없는 경우 ul -->

    <ul style=" list-style-type square ;">

        <li>아이폰 어플 개발 과정 </li>

        <li>전자정부 표준 프레임워크 전문가 과정 </li>

        <li>모바일 웹/앱 개발자 과정 </li>

    </ul>

    <!-- -->

    <h3>보유중인 전자제품 </h3>

    <ul>

        <li>컴퓨터 </li>

        <ul>

            <li>데스크탑 </li>

            <li>노트북 </li>

            <ul>

                <li>2011년 맥북 에어 </li>

                <li>2013년 맥북 프로 </li>

            </ul>

        </ul>

        <li>모바일 디바이스 </li>

        <li>테블릿PC </li>

    </ul>

 

</body>

</html>

 

 

결과화면




HTML 항목을 표현할때 사용 한다.


SOURCE.HTML

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>정의목록 만들기 </title>

</head>

<body>

    <h1>dl, dt, dd 태그 연습 </h1>

 

    <h3>책 정보 </h3>

 

    <!-- 항목과 그 것에 관한 설명. 많이 쓰이진 않음 -->

    <dl>

        <dt>제목 </dt>

        <dd>오라클 sql과 pl/sql </dd>

        <dt>저자 </dt>

        <dd>서진수 </dd>

        <dt>출판사 </dt>

        <dd>생능출판사 </dd>

        <dt>가격 </dt>

        <dd>27,000원 </dd>

    </dl>

</body>

</html>


결과화면



html 테이블(table) 기본 사용방법


SOURCE.HTML

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>테이블 만들기 </title>

</head>

<body>

    <h1>table, tr, th, td 연습 </h1>

 

    <table border="">

        <tr>

            <!-- tr은 행을 표시-->

            <th>순위 </th>

            <th>팀명 </th>

            <th>승률 </th><!-- th 제목을 표시하는 셀-->

        </tr>

        <tr>

            <td>1위 </td><!-- td는 테이블에 들어가는 값 -->

            <td>롯데 자이언츠 </td>

            <td>5할 </td>

        </tr>

        <tr>

            <td>2위 </td>

            <td>한화 이글스 </td>

            <td>7할 </td>

        </tr>

        <tr>

            <td>3위 </td>

            <td>삼성 라이온스 </td>

            <td>4할 </td>

        </tr>

    </table>

 

    <h2>셀 병합 </h2>

    <table border="1" style="width : 500px; ">

        <tr>

            <td>1 </td>

            <td colspan="2"> colspan=2 2칸 병합</ td> <!-- 가로방향으로 2칸 병합하라는 뜻-->

        </tr>

 

        <tr>

            <td>1 </td>

            <td>1 </td>

            <td>1 </td>

        </tr>

 

        <tr>

            <td colspan="3"> colspan=3</ td>

        </tr>

 

        <tr>

            <td colspan="2"> colspan=2</ td>

            <td>1 </td>

        </tr>

    </table>

 

    <table border="1">

        <tr>

            <td rowspan="2"> 1</ td>

            <td>1 </td>

            <td>1 </td>

        </tr>

 

        <tr>

            <td>1 </td>

            <td>1 </td>

        </tr>

    </table>

 

</body>

</html>


결과화면



HTML 테이블 병합 연습 해보기


SOURCE.HTML

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>셀 병합연습 </title>

</head>

<body>

    <h1>테이블 만들기 연습 </h1>

 

    <table border="1" style="width : 500px; ">

        <tr>

            <td rowspan="2"> &nbsp;</ td>

            <td colspan="3"> &nbsp;</ td>

            <td colspan="2"> &nbsp;</ td>

        </tr>

 

        <tr>

            <td>&nbsp; </td>

            <td>&nbsp; </td>

            <td>&nbsp; </td>

            <td>&nbsp; </td>

            <td>&nbsp; </td>

        </tr>

 

        <tr>

            <td>&nbsp; </td>

            <td>&nbsp; </td>

            <td>&nbsp; </td>

            <td>&nbsp; </td>

            <td>&nbsp; </td>

            <td>&nbsp; </td>

        </tr>

 

        <tr>

            <td>&nbsp; </td>

            <td>&nbsp; </td>

            <td>&nbsp; </td>

            <td>&nbsp; </td>

            <td>&nbsp; </td>

            <td>&nbsp; </td>

        </tr>

 

    </table>

</body>

</html>



결과화면




HTMLthread, tfoot, tbody, colgroup 사용방법


SOURCE.HTML

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>테이블 만들기 </title>

    <style>

        tbody {

            /* css 선택자

                      tbody의 값들을 가운데 정렬로 만드는 방법*/

            text-align: center;

        }

    </style>

</head>

<body>

 

    <h1>thead, tfoot, tbody, colgroup, col </h1>

 

    <table border="1">

        <!-- 너비 설정 -->

        <colgroup>

            <col width="100px;">

            <col width="200px;">

            <col width="150px;">

            <col width="100px;">

        </colgroup>

        <thead>

            <tr>

                <th>번호 </th>

                <th>상품명 </th>

                <th>가격 </th>

                <th>수량 </th>

            </tr>

        </thead>

 

        <!-- 바닥글 표시-->

        <tfoot>

        <td colspan="2"> 합계</ td>

        <td colspan="2">

            4,000,000원</ td>

            </tfoot >

 

        <tbody>

            <tr>

                <td>1 </td>

                <td>갤럭시 S6 </td>

                <td>900,000 </td>

                <td>2 </td>

            </tr>

 

            <tr>

                <td>2 </td>

                <td>아이폰 6 </td>

                <td>700,000 </td>

                <td>4 </td>

            </tr>

 

            <tr>

                <td>3 </td>

                <td>아이패드 레티나 </td>

                <td>400,000 </td>

                <td>6 </td>

            </tr>

 

            <tr>

                <td>4 </td>

                <td>갤럭시 탭S </td>

                <td>600,000 </td>

                <td>10 </td>

            </tr>

        </tbody>

    </table>

</body>

</html>



결과화면



HTML 이미지 넣는 방법


SOURCE.HTML

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>그림 표시하기 </title>

</head>

<body>

    <h1>img 태그 연습 </h1>

    <img src="images/after_boom.png" width="400px" height="250px;" />

    <!-- 경로 표시

         상대경로 표시법

              - "/"로 시작하지 않는 경로

              - 현재 페이지의 url에 대한 상대적인 경로다.

         절대경로 표시법

              - "/"로 시작하는 경로

              -

    -->

</body>

</html>


결과화면



HTML FORM 태그, input 태그 사용방법(체크박스, 라디오 버튼등)


SOURCE.HTML

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>폼 만들기 </title>

</head>

<body>

    <h1>form, input 태그 연습 </h1>

 

    <form method="post" action="add.jsp">

        <input type="hidden" name="jumin" value="740111-" />

        <!-- type="hidden" 실제로 값은 있으나 화면에는 표시되지 않음 -->

        이름 : <input type="text" name="username" value="홍길동" readonly="readonly" /><br/>

        <!-- readonly 읽기만 가능, 수정이 안된다. -->

        별명 : <input type="text" name="nick" value="짜룽나" disabled="disabled" />

        <!-- disabled 비활성화-->

        암호 : <input type="password" name="userpwd" maxlength="12" /><br/>

        <!-- maxlength 입력받을 글자 수 제한 -->

        성별 : <input type="radio" name="gender" checked="checked" /> 남자

        <input type="radio" name="gender" />여자 <br />

        <!-- name의 이름이 같기때문에 같은 그룹으로 인식하여 중복 체크가 불가

            input박스의 name으로 서버에 정보가 저장된다-->

        취미 : <input type="checkbox" name="hobby" value="sports" /> 운동

        <input type="checkbox" name="hobby" value="game" /> 게임

        <input type="checkbox" name="hobby" value="movie" /> 영화보기

        <input type="checkbox" name="hobby" value="music" /> 음악<br/>

        <!-- 체크박스는 중복이 허용된다. -->

        파일 : <input type="file" name="attachedfile" />

        <input type="submit" value="등록" /> <!-- 입력된 값들이 서버로 전달된다. -->

        <input type="reset" value="취소" /> <!-- 입력된 값들을 초기화 -->

    </form>

 

</body>

</html>

결과





HTML select, textarea 사용방법


SOURCE.HTML

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>form 만들기 </title>

</head>

<body>

    <h1>select, textarea 연습 </h1>

 

    <form method="post" action="add.jsp">

        이름 : <input type="text" name="username" /> <br />

        학력 :

        <select name="school">

            <!-- 실제로 전달되는 값은 value 값이 전달된다. -->

            <option value="E"> 초등학교</ option>

            <option value="M"> 중학교</ option>

            <option value="H" selected="selected">

                고등학교</ option>

                <!-- selected 특정 값을 미리 선택해 놓는 것-->

            <option value="U"> 대학교</ option>

        </select><br />

        <!-- optgroup : option안에 그룹을 지어넣는 것 -->

        부서 :

        <select name="dept">

            <optgroup label="영업팀">

                <option value="s1"> 영업1팀</ option>

                <option value="s2"> 영업2팀</ option>

                <option value="s3"> 영업3팀</ option>

            </optgroup>

 

            <optgroup label="마케팅팀">

                <option value="m1"> 마케팅1팀</ option>

                <option value="m2"> 마케팅2팀</ option>

                <option value="m3"> 마케팅3팀</ option>

            </optgroup>

        </select><br/>

 

        메일 : <input type="text" name="email" /> @

        <select name="email2" size="1">

            <!-- size : 한 번에 보여주는 선택목록의 갯수 -->

            <option value="hanmail.net"> hanmail.net</ option>

            <option value="naver.com"> naver.com</ option>

            <option value="gmail.com"> gmail.com</ option>

            <option value="hotmail.com"> hotmail.com</ option>

        </select><br/>