특정 웹 페이지 로딩시 프로그레서 바/프로그레스 써클 띄워야 할 경우가 있다면 dialog 태그와 img 태그와 로딩 이미지를 보여주는 gif 이미지를 적절히 조합하여 로딩 상태를 띄워줄수가 있다. 
아래는 코드이다.

<html>
<head>
	<title>프로그레스 써클 띄우기</title>
	<style>

	</style>
</head>
<body>
	<br/>
	<button onclick="showProCircle()" style="padding: 5px;"> 프로그레스 써클 띄우기 </button><br/>
	<h3> 5초 후에 자동으로 닫힙니다. </h3>

	<div>
		<!-- dialog 태그를 border-radius 속성을 이용해서 원형으로 만들고 gif 이미지도 동일하게 원형으로 만든다 -->
		<dialog id="progressCircleDialog" style="width:200px; height:200px; padding:-5px; background-color:#ffffff; border: 0px solid black; border-radius: 50%;">
			<img style="width: 100%; height: 100%; display: block; margin: 0px auto; padding: 0px; border-radius: 50%;" src="loading.gif">
		</dialog>
	</div>
	<script>
		function showProCircle(){
			var dialog = document.getElementById("progressCircleDialog");
			dialog.showModal();

			setTimeout(function(){
				dialog.close();
			}, 5000);
		}
	</script>
</body>
</html>

'HTML' 카테고리의 다른 글

dialog 태그를 이용한 모달 창 만들기 - alert 대체용 메시지 창 만들기  (0) 2020.10.29
HTML의 col 태그에 대해서  (0) 2018.08.31
크롬 웹 브라우저의 개발자 도구 - 검사 (특정 영역의 html 요소 확인하기)  (0) 2018.08.22
textarea 내용을 초기화 하는 법  (0) 2018.06.11
HTML 링크를 새 창에서 열기  (0) 2015.10.26

웹의 view단을 작업할때 alert() 함수를 이용해서 사용자에게 필요한 알림을 제공하게 된다. 가장 간단하고 쉬운 방법이나 alert()을 사용할때 예상치 못한 곤란을 만날수도 있다. 아무튼 alert()과 같은 역할을 하면서 alert()을 대체할수 있는 dialog 태그에 대해 정리하고자 한다.

<html>
<head>
	<title>alert을 대체할 dialog 태그</title>
	<style>
		#myMsgDialog {
			width:40%; 
			background-color: #f4ffef; 
			border:1px solid black; 
			border-radius: 7px;
		}		

		#mButton {
			padding: 7px 30px;
			background-color: #66ccff;
			color: white;
			font-size: 15px;
			border: 0;
			outline: 0;
		}
	</style>
</head>
<body>
	<button onclick="showMsg()">메시지 띄우기</button>

	<div>
		<!-- 아래 dialog 태그 영역이 메시지 창 -->
		<dialog id="myMsgDialog">
			<h3>여기는 메시지 내용입니다.</h3>
			<input type="button" id="mButton" onclick="closeMsg()" value=" 확 인 " >
		</dialog>
	</div>
	<script>
		function showMsg(){
			var dialog = document.getElementById("myMsgDialog");
			dialog.showModal();
		}
		
		function closeMsg(){
			var dialog = document.getElementById("myMsgDialog");
			dialog.close();
		}
	</script>
</body>
</html>

코드가 그렇게 복잡하지는 않다. 아무튼 alert() 대체용으로 간단하면서 아주 유용한 기능이다. 아래는 실행 결과이다.

 

 

'HTML' 카테고리의 다른 글

웹 페이지에서 프로그레스 써클 띄우기  (0) 2020.12.01
HTML의 col 태그에 대해서  (0) 2018.08.31
크롬 웹 브라우저의 개발자 도구 - 검사 (특정 영역의 html 요소 확인하기)  (0) 2018.08.22
textarea 내용을 초기화 하는 법  (0) 2018.06.11
HTML 링크를 새 창에서 열기  (0) 2015.10.26


HTML의 <col> 태그에 대해서


<col> 태그는 테이블에서 column(열)의 속성을 지정하는 역할을 하는 태그이다.

<col> 태그는 테이블의 column 전체에 특정한 속성(예를들어 특정 색상으로 표시되게)을 적용하는데 유용하다.


다음과 같은 코드가 있다고 할때


<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

    border: 1px solid black;

}

</style>

</head>

<body>


<table>

  <colgroup>

    <col style="background-color:red">

    <col style="background-color:yellow">

    <col style="background-color:#ababab">

  </colgroup>

  <tr>

    <th>이름</th>

    <th>나이</th>

    <th>전화번호</th>

  </tr>

  <tr>

    <td>홍길동</td>

    <td>25</td>

    <td>010-1234-4567</td>

  </tr>

  <tr>

    <td>고길동</td>

    <td>45</td>

    <td>010-7777-8888</td>

  </tr>

</table>


</body>

</html>


이 경우 테이블은 2행 3열의 테이블을 이룰것인데 colgroup 안에서 첫 번째 column 전체를 red로, 두 번째 column 전체를 yellow로 그리고 세 번째 column 전체의 색상을 짙은 회색(#ababab의 색상이 짙은 회색임)으로 column의 속성을 지정하는 경우가 되겠다.




만일 col 태그의 내용을 다음과 같이하면 

  <colgroup>

    <col span="2" style="background-color:red">

    <col style="background-color:#ababab">

  </colgroup>


이 경우는 다음과 같이 첫 번째, 두 번째 column 전체가 red로 설정이 된다. 왜냐하면 span 속성에 의해 첫번째와 두번째 column을 합쳐서 적용하도록 했기 때문이다.




만일 col 태그의 내용을 다음과 같이하면 

  <colgroup>

    <col style="background-color:red">

    <col span="2" style="background-color:yellow">

  </colgroup>


이 경우는 다음과 같이 첫 번째 column은 red, 두 번째, 세 번째 column은 yellow로 적용이 될 것이다.




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

'HTML' 카테고리의 다른 글

웹 페이지에서 프로그레스 써클 띄우기  (0) 2020.12.01
dialog 태그를 이용한 모달 창 만들기 - alert 대체용 메시지 창 만들기  (0) 2020.10.29
크롬 웹 브라우저의 개발자 도구 - 검사 (특정 영역의 html 요소 확인하기)  (0) 2018.08.22
textarea 내용을 초기화 하는 법  (0) 2018.06.11
HTML 링크를 새 창에서 열기  (0) 2015.10.26


웹 애플리케이션 개발시 크롬 웹 브라우저의 개발자 도구(F12,  혹은 Ctrl-Shift-I)를 적절히 활용하면 html 코드의 복잡한 숲속에서 좀 더 스마트하게 돌아다닐수가 있게 된다.

오늘 포스팅에서는 개발자 도구 중에서 웹 페이지의 복잡한 구조 중에서 특정 영역에 대한 html 요소를 한번에 쉽게 찾아서 확인하는 방법에 대한 글이다.

보통은 디자이너나 웹 프블리셔가 디자인이 적용된 html, css 파일을 던져 주면 그것을 가지고 개발자가 기능을 구현하게 될텐데 구성이 복잡한 웹 페이지의 경우 특정 영역에 대한 html 구성이 어떻게 되었는지를 확인할려면 html 태그 숲 속을 헤매는 경우가 있다.

이러한 작업을 한번에 해결해 주는 기능이 크롬 웹 브라우저의 개발자 도구가 제공하고 있다.


아래와 같은 웹 페이지가 있다고 할 경우(이해를 돕기 위해서 그냥 단순한 경우를 예로 살펴보기로...) 빨간색 영역에 대한 html 요소를 확인하고자하면

(저 영역이 사실은 게시글 작성자 닉네임을 적는 공간인데 input 태그로 되어 있는 영역이다. 이미지가 좀 희미...;;)



-. F12로 개발자 도구 창이 활성화 되도록 한 후에 상단의 "Elements" 탭을 클릭

-. 웹 페이지에서 해당 영역을 마우스로 클릭한 후 마우스 우측을 클릭

-. 팝업 메뉴 중에서 "검사(N)"을 클릭하면

-. 우측 개발자 창에서 해당 영역에 대한 html 요소에 대한 정보가 한번에 보여진다.






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

'HTML' 카테고리의 다른 글

dialog 태그를 이용한 모달 창 만들기 - alert 대체용 메시지 창 만들기  (0) 2020.10.29
HTML의 col 태그에 대해서  (0) 2018.08.31
textarea 내용을 초기화 하는 법  (0) 2018.06.11
HTML 링크를 새 창에서 열기  (0) 2015.10.26
HTML의 th와 td의 개념  (0) 2015.10.13

textarea 내용을 초기화 하는 법


textarea의 내용을 초기화 상태가 되고 "메시지를 입력하세요"와 같은 힌트 글이 희미하게 보이도록 하는 방법에 대한 것이다.


<html>

... 중략 ...


<body>

<form action="push_noti.php" method="post">

<textarea id="mTxtArea" onclick=this.value='';" name="message" rows="4" cols="50" placeholder="메시지를 입력하세요" required>

</textarea><br/>

<input type="submit" name="submit" value="Send" id="submitButton">

</form>

<script type="text/javascript">

document.getElementById("mTxtArea").value='';

</script>

</body> 

</html>


여기서 구현한 방법은 textarea에 id 값을 지정해서 JavaScript에서 이 id 값을 이용해서 textarea의 내용을 초기화 했다는 것이다.

JavaScript에서 textarea을 초기화한 핵심 코드는 아래 코드이다.


document.getElementById("mTxtArea").value='';


그리고 textarea를 클릭했을 때 onclick 이벤트를 활용해서 역시 내용을 초기화 하기도 했다.

   

placeholder="메시지를 입력하세요"는 textarea에 아무런 값도 없을 때 힌트 메시지를 보이게 하는 기능이다.



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

'HTML' 카테고리의 다른 글

dialog 태그를 이용한 모달 창 만들기 - alert 대체용 메시지 창 만들기  (0) 2020.10.29
HTML의 col 태그에 대해서  (0) 2018.08.31
크롬 웹 브라우저의 개발자 도구 - 검사 (특정 영역의 html 요소 확인하기)  (0) 2018.08.22
HTML 링크를 새 창에서 열기  (0) 2015.10.26
HTML의 th와 td의 개념  (0) 2015.10.13


HTML에 있는 링크(a 태그의 링크)를 새로운 창에서 여는 법이다.


링크를 클릭했을 때 브라우저의 현재 창에서 링크가 열리지 않고

새로운 창에서 열리도록 해야 할때가 있다.



새로운 창에서 열기 위해서는 <a> 태그의 target 속성을 이용하면 된다.

이때 target속성의 값(value)은 반드시 _blank이어야 한다.


새 창에서 열도록 할때의 잇점은 방문자로 하여금 자신의 사이트에 머물도록 하는 방편이 될 것이다.


아래는 코드 조각이다.



<a href="http://uljavajoe.blogspot.kr">구글에 개설한 블로그</a> (현재 창에서 열기)

<p>

<a href="http://uljavajoe.blogspot.kr" target="_blank">구글에 개설한 블로그</a> (새 창에서 열기)




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

'HTML' 카테고리의 다른 글

dialog 태그를 이용한 모달 창 만들기 - alert 대체용 메시지 창 만들기  (0) 2020.10.29
HTML의 col 태그에 대해서  (0) 2018.08.31
크롬 웹 브라우저의 개발자 도구 - 검사 (특정 영역의 html 요소 확인하기)  (0) 2018.08.22
textarea 내용을 초기화 하는 법  (0) 2018.06.11
HTML의 th와 td의 개념  (0) 2015.10.13


HTML의 th와 td의 개념


<th>내용</th> : table head 약자로, 표의 제목을 쓰는 역할. bold체로 표시됨

<tr>내용</tr> : table row 약자로 가로줄을 만드는 역할

<td>내용</td> : table data 약자로 셀을 만드는 역할


<table border="1" width="350" >

   <tr align="center" >

        <th>Number</th>

        <th>Name</th>

   </tr>

   <tr align="center">

        <td>111</td>

        <td>Kim. S. Y</td>

   </tr>

   <tr align="center">

        <td>222</td>

        <td>Lee. K. H</td>

   </tr>

</table>



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

'HTML' 카테고리의 다른 글

dialog 태그를 이용한 모달 창 만들기 - alert 대체용 메시지 창 만들기  (0) 2020.10.29
HTML의 col 태그에 대해서  (0) 2018.08.31
크롬 웹 브라우저의 개발자 도구 - 검사 (특정 영역의 html 요소 확인하기)  (0) 2018.08.22
textarea 내용을 초기화 하는 법  (0) 2018.06.11
HTML 링크를 새 창에서 열기  (0) 2015.10.26

+ Recent posts

티스토리툴바