웹페이지에 이벤트가 종류가 있어요. 

UI 이벤트 , 키보드 이벤트 , 마우스 이벤트, 포커스 이벤트, 폼이벤트 , 변형이벤트 에요. 

UI이벤트종류

LOAD -> 페이지가 로드되었을때

UNLOAD -> 페이지가 언로드될때 (새로운페이지로 이동시)

ERROR -> 스크립트 오류발생시

RESIZE -> 브라우저 창 크기 조절시

SCROLL -> 페이지 스크롤 이동시 

키보드 이벤트 

keydown -> 키 보드 다운시

keyup -> 키보드 땔때

keypress -> 키보드 누르고 있을때 

마우스이벤트 

click -> 클릭시

dbclick-> 더블 클릭시

mousedown -> 마우스 버튼을 누를때

mouseup-> 마우스 버튼을 땔때

mousemove -> 마우스가 움직일때

mouseover->마우스가 요소위로 움직였을때

mouseout -> 요소 밖으로 마우스가 이동시. 

포커스 이벤트

focus/focusin -> 요소가 포커스를 얻었을때

blur/focusout->요소가 포커스를 잃었을때

폼이벤트

input -> 값이 변경될때

change -> 상태가 변경될때

submit -> 폼을 제출시

reset -> 리셋버튼 클릭시

cut -> 컨텐츠 잘라내기를 했을때

copy -> 복사했을때

paste -> 붙여넣기했을때

select -> 텍스트를 선택시

변형이벤트

dom구조 변경시

 

 

 

블로그 이미지

은호아빠

여행, 맛집, 일상, 프로그래밍, 개발자, 윈도우, 웹, jsp, spring, db, mysql, oracle, c#

,

window.innerHeight -> 창의 높이

window.innerWidth -> 창의 너비

window.pageXOffset -> 문서의 가로 스크롤 크기

window.pageYOffset -> 문서의 세로 스크롤 크기

window.screenX -> 화면 좌측상단으로부터 현재 마우스  X

window.screenY -> 화면 좌측 상단으로부터 현재 마우스 Y

window.location -> 현재 URL 

window.document -> 현재 페이지 로드된 document

window.history -> 현재 창이나 탭을 통해 로드 되었던 상세정보를 제공

window.history.length -> history객체에 보관된 페이지 개수

window.screen -> screen객체에 대한 참조

window.screen.width -> width 값

window.screen.height -> height 값

메서드 

 window.alert() ->대화상자 표시

window.open -> 새로운 브라우저 창 생성 

window.print() -> 인쇄 명령 

 

블로그 이미지

은호아빠

여행, 맛집, 일상, 프로그래밍, 개발자, 윈도우, 웹, jsp, spring, db, mysql, oracle, c#

,

document 문서 객체 모델

document문서 객체 모델

document눈 문서 객체 모델인데요. 

객체를 탐색하거나 수정할때 document를 이용해 접근할수 있어요. 

1. ID값으로 접근하기 

document.getElementById ('아디');

2. name 값으로 접근하기

document.getElementsByName('네임값')

※ 잘보면 Element가 name값의 경우 복수형으로 들어가있죠? id는 고유한값이라 한개만 찾고 네임은 다수를 찾아서 그래요. 

3. class 값으로 접근하기

document.getElementsByClassName('클래스값')

4. 태그로 접근하기

document.getElementsByTagName ( "html태그");

5. css로 접근하기. 

document.querySelector ( ".myclass");

※ html 에 클래스를 접근할땐 .을 찍고 이름을 적는다 제이쿼리나 css나 공통사항이니 기억해두자!

 

블로그 이미지

은호아빠

여행, 맛집, 일상, 프로그래밍, 개발자, 윈도우, 웹, jsp, spring, db, mysql, oracle, c#

,

자바스크립트 브라우저객체모델 window

window -> 현재브라우저 창이나 탭

document -> 현재 로드된 웹 페이지

history -> 브라우저 히스토리에 기록된 웹페이지

location -> 현재 페이지의 url

navigator -> 브라우저와 관련된 정보

screen  -> 장치의 디스플레이 정보 

내장객체 관계도

 

블로그 이미지

은호아빠

여행, 맛집, 일상, 프로그래밍, 개발자, 윈도우, 웹, jsp, spring, db, mysql, oracle, c#

,

오브젝트란 변수와 함수의 모음인데요. 

사용방법은 아래와 같아요. 

var people = {

 age : '11살'

sex : '남자'

birthday : '5월24일'

getAge : function(){return this.age}

};

 function  같은 경우 외부에 선언하고 쓸수도 있어요.

function getAge()
{
	return this.age;
}
var people = {

 age : '11살'

sex : '남자'

birthday : '5월24일'

getAge : getAge

};

 

블로그 이미지

은호아빠

여행, 맛집, 일상, 프로그래밍, 개발자, 윈도우, 웹, jsp, spring, db, mysql, oracle, c#

,

해운대 외식하기가장좋은집 숯불갈비 다녀왔어요.

안녕하세요. 오늘은 해운대에 있는 숯불갈비집을 다녀왔어요. 

시간은 저녘 6시 35분 즘 방문을 했는데요. 이 시간이면 주차하기가 엄청 힘들 때인데 가게 입구에 주차장이 넉넉하여 주차가 편해 좋았어요.  

가게입구

버턴을 누르면 문이 열려요. 

한상

먼저 온 처남이 메뉴를 시켜놓았네요. LA갈비와 돼지갈비인데 전 돼지갈비가 좋았어요.. LA갈비는 뼈 때문에 남은 부위 먹는 게 불편했어요. 

장모님이 고기를 잘라주셔서 너무 맛나게 먹었지 뭐에요. 

밑반찬들

물김치도 새콤하니 맛났구요. 잡채는 잡채대로 맛있었어요. 

연두부를 주는데 저는 간장소스가 좋은데 여긴 간장소스가 아니어서 저한텐 좀 별로였어요. 

찌 종류가 있는데요. 찌와 고기를 같이 먹어도 맛있었어요. 

물비빔 막국수

그리고 후식으로 먹는 물비빔 막국수를 시켰는데요. 추가로 양념을 하지 않아도 시원했어요. 

고기

파무침과 함께 고기를 먹어보았는데요.. 와.. 저는 상추에 사 먹는 것보다 이게 더 맛있더라고요. 

셀프바

셀프바가 마련되어 있는데요. 

 

각종 채소와 양념을 가져와 먹을수 있었어요. 

매운갈비는 사진을 못 찍었는데요. 매운 갈비는 고추장 양념이라 호불호가 있는 거 같아요. 저는 먹으면서 장어 고추장구이를 먹는 느낌을 받았어요.

고기 육전도 사진을 못 찍었네요. 육전도 파는데요. 한 접시 시켜서 먹었어요 이것도 사진을 못 남겼네요 ㅎㅎㅎ

계란을 넉넉하게 풀어육전을 구워서 인지 제 입맛엔 딱이었어요. 모두들 맛있다고 했었어요. 

마지막으로 키즈존이 존재하여 자녀와 방문하여도 좋은 장소인 것 같아요. 

블로그 이미지

은호아빠

여행, 맛집, 일상, 프로그래밍, 개발자, 윈도우, 웹, jsp, spring, db, mysql, oracle, c#

,

안녕하세요 CSS정리를 할려고 해요. 

CSS는 웹페이지의 스타일을 정의를 해줘요. 전체적으로 일관댄 디자인을 가지게 할수 있어요. 

CSS의 제일 기본은 선택자인거 같아요.

선택을 잘해야 원하는 곳에 원하는 효과를 적용할수 있어요. 

div { 
background-color: red; 
color: white; 
}

여기서 div는 태그 선택자에요 html의 태그가 선택자가 될수 있어요. 

그리고 대가로를 열고 { 속성: 속성값; } 이렇게 적어요. 

속성이 배경색은 빨간색으로 컬러값은 흰색으로 이렇게 선언되어 있어요. 

태그를 적고 원하는 값을 적으면 되요. 

ID로 선택을 할때에는 #을 적으면 되요. 

#아이디값 {
background-color: 00ff00;
color: white;
}

클래스로 선택할땐 .을 찍으면 되요. 

.클래스값  { 
background-color: 00ff00; 
color: white; 
}

간단한 페이지를 작성해서 테스트 해볼께요. 

<html>
<head>
	<meta charset="utf-8">
	<title>css</title>
	<style>
	div {
		background-color: red;
		color: white;
	}
	#test1 {
		background-color: blue;
		color: white;
	}
	.test2 {
		background-color: yellow;
	}
	.test3 {
		color: black;
	}
	
	</style>	
</head>
<body>
	<DIV>
		태그 선택자.
	</DIV>
	<DIV ID="test1">
		아디 선택자.
	</DIV>
	<DIV class="test2 test3">
		클래스 선택자.
	</DIV>
</body>
</html>

font css 결과

여기서 클래스는 다수를 적용할수 있어요. 

그래서 css를 사용할땐 클래스명을 권장하고 있어요. id는 가끔 필요할때만 사용하시면 될것 같아요. 

<html>
<head>
	<meta charset="utf-8">
	<title>css</title>
	<style>
	div {
		background-color: black;
	}
	div p{
		background-color: red;
		color: white;
	}
	div>p{
		background-color: green;
		color: white;
	}
	</style>	
</head>
<body>
	<div>
		<p>	
		하위 선택자 테스트
		</p>
		<div>
			하위 선택자 테스트
		</div>
		<pre>
			<p>
				하위 선택자 테스트
			</p>
		</pre>
	</div>
	<div>
		<p>	
		자식 선택자 테스트
		</p>
		<div>
			자식 선택자 테스트
		</div>
		<div>
			<p>
				자식 선택자 테스트
			</p>
		</div>
	</div>
</body>
</html>

하위 선택자와 자식 선택자 테스트 인데요. 

태그를 단순하게 두번 적으면 DIV P 경우 DIV안에 P태그는 모두 영향을 받아요. 

선택자 이미지

DIV>P 의 경우 DIV태그 다음 P태그만 영향을 받아요. 

위 소스의 경우 하위 선택자 테스트 에서 자식테스트 에 영향을 받아요 자식 선택의 스타일이 적용받았어요. 

하위선택자도 잘 적용되고 있는것을 확인할수 있어요. 

<html>
<head>
	<meta charset="utf-8">
	<title>css</title>
	<style>
	[align] {
		background-color: black;
		color: white;
	}
	div[align="right"] {
		background-color: green;
		color: white;
	}
	</style>	
</head>
<body>
	<div align="left">
		안녕하세요.
	</div>
		<div align="right">
		안녕하세요.
	</div>
</body>
</html>

블로그 이미지

은호아빠

여행, 맛집, 일상, 프로그래밍, 개발자, 윈도우, 웹, jsp, spring, db, mysql, oracle, c#

,

기장 정관 샤브샤브 샤브파티야 다녀왔어요.

집에 처제가 놀러왔어요. 마침 점심때인데 밥도 없고 반찬도 없어서 샤브샤브를 먹기로 했어요.

토요일이라 송정쪽은 너무 길이 막힐 것 같아서 정관에 있는 샤브파티야에 가기로 했어요. 

카카오 맵의 빠른 길 안내로 25분 정도 걸려 도착했네요 ^^ 

주차장 길이 협소하니 운전에 자신 없으신 분들은 지하주차장으로 내려가지 마시고 외부에 주차하시길 바라요.

저도 엄청 힘들었어요. QM6도 겨우겨우 들어갔다 나왔네요. 

계산대

입구에 계산대부터 보이고요. 안쪽으로 뷔페식으로 차려진 음식들이 보여요.

기본음식

초밥 국수 한식 디저트 등 여러 가지가 다양하게 준비되어 있어요. 

샤브샤브 재료

샤브샤브 재료도 모자라지 않게 많이 준비되어 있었어요. 

샤브샤브

소고기와 각종 야채를 넣어서 먹었는데요 한 3 접시 먹으니 배가 불렀어요. 

국수와 샤브샤브

국수도 한 그릇 했고요. 샤브샤브는 마늘간장소스에 담가서 먹었어요. 

정말 꿀맛이에요. 제가 좋아하는 맛 마늘간장소스예요. 

창밖을 보니 테라스도 꾸며 놓았어요. 

정원

어린아이들이 뛰어놀기 좋은 장소였어요. 어른들은 식사를 하고 아이들은 사진도 찍고 그네도 타고 조형물 감상도 하고 심심할 틈이 없는 장소인 거 같아요. 

샤브샤브가 먹고 싶을 때 한번 들러보세요. 가격은 성인 1인 2만 2천5백 원입니다.

블로그 이미지

은호아빠

여행, 맛집, 일상, 프로그래밍, 개발자, 윈도우, 웹, jsp, spring, db, mysql, oracle, c#

,

C# Timer를 이용한 Image 업데이트 picturebox image버퍼

안녕하세요. C# 프로젝트를 실행하여 실시간 화면이 갱신되는 프로그램을 만들어 보겠어요. 

간단히 텍스트를 그려주는데 picturebox의 image에 그림을 그려 업데이트를 해줄 예정이에요. 

 

도구상자 timer

도구 상자에서 Timer를 추가합니다. 

윈도우폼

picturebox를 추가하고 흰색으로 변경해 놓았어요. 

배경색

소스로 가서 아래 내용을 추가합니다. 

  public Form1()
        {
            InitializeComponent();
            this.StartPosition = FormStartPosition.Manual;
            Rectangle fullScrenn_bounds = Rectangle.Empty;
            foreach (var screen in Screen.AllScreens)
            {
                fullScrenn_bounds = Rectangle.Union(fullScrenn_bounds, screen.Bounds);
            }
            this.ClientSize = new Size(fullScrenn_bounds.Width, fullScrenn_bounds.Height);
            this.Location = new Point(fullScrenn_bounds.Left, fullScrenn_bounds.Top);

           pictureBox1.Size = new System.Drawing.Size(ClientSize.Width, ClientSize.Height);
           this.timer1.Start();
           this.timer1.Tick += new System.EventHandler(this.timer1_Tick);
           pictureBox1.Image = new Bitmap(ClientSize.Width, ClientSize.Height);
           switch_time = 0;
        }

그럼 전체 화면으로 실행되는 그림박스를 만날 수 있어요. 

String draw_text="가동준비중";        
long switch_time=1;

두변수는 전역으로 일단 선언해 놓을게요. 

 private void timer1_Tick(object sender, EventArgs e)
        {
            switch_time = switch_time - my_util.gaptime();
            
            if (switch_time<0)
            {
                draw_text = "가동준비중";
            }
            else 
            {

            }
            
            draw_screen();
        }

timer1_tick 함수를 하나 만들어 두세요. myutil_.gaptime이 필요한데 내용은 별 내용 없습니다. 밀리세컨드를 이용해서 이전 그리기와 현재 그리기의 시간차를 구해오는 함수인데요. 내용은 아래와 같아요. 

public long gaptime()
        {
            DateTime TimeNow = DateTime.Now;
            long currenttime = TimeNow.Ticks/ TimeSpan.TicksPerMillisecond;
            if (oldtime==0)
            {
                oldtime = currenttime;
                return 0;
            }
            gapTime = currenttime - oldtime;
            Console.WriteLine("gapTime>" + gapTime);
            Console.WriteLine("oldtime>" + oldtime);
            Console.WriteLine("currenttime>" + currenttime);
            oldtime = currenttime;
            return gapTime;
        }

그리고 아래 변수를 보세요.

 long gapTime;
 long oldtime=0;

이걸 클래스내 전역으로 선언해 놓았어요. 

그리고 그리기 함수인데요.

private void draw_screen()
        {
            BufferedGraphicsContext currentContext;
            BufferedGraphics myBuffer;
            currentContext = BufferedGraphicsManager.Current;
            if (pictureBox1.Image == null)
            {
                return;
            }
            myBuffer = currentContext.Allocate(Graphics.FromImage(pictureBox1.Image), pictureBox1.DisplayRectangle);
            Rectangle ee = pictureBox1.ClientRectangle;
            //배경색 정리
            System.Drawing.SolidBrush myBrush = new System.Drawing.SolidBrush(System.Drawing.Color.White);
            myBuffer.Graphics.FillRectangle(ee, myBrush);
            Font drawFont = new Font("Arial", 150);
            SolidBrush drawBrush = new SolidBrush(Color.Black);
            StringFormat drawFormat = new StringFormat();
            float x = 150.0F;
            float y = 50.0F;
            //텍스트 출력
           myBuffer.Graphics.DrawString(draw_text, drawFont, drawBrush, x, y, drawFormat);
            myBuffer.Render();
            myBuffer.Dispose();
            pictureBox1.Invalidate();
        }

텍스트가 입력이 없을 때 가동 준비 중이라는 기본 텍스트가 화면에 출력됩니다.

텍스트가 입력이 될 때 코드에 

switch_time = 10000L; 스위치 타임에 10초의 시간을 넣었어요.

그럼 입력된 텍스트를 draw_text에 넣어서 출력을 해주고 10초 뒤 다시 준비 중이라는 글씨를 화면에 출력하게 되고요.

버퍼는 더블 버퍼를 이용한 방법인데요 이방식을 하는 건 화면 떨림 현상을 없애기 위해서 이렇게 처리해요. 

픽처 박스 image에 바로 그리게 되면 수정이 될 때마다 invalidate이벤트가 발생되어 눈이 엄청 피곤한 갱신 화면을 볼 수 있어요. 

 

'C#' 카테고리의 다른 글

ChromeDriver Chrome 용 WebDriver  (0) 2020.06.01
c# mysql maria db connect 연동  (0) 2020.04.22
c# hello word c# 시작 MessageBox.Show  (1) 2020.03.09
C# String 문자열 자르기 Substring 사용법  (0) 2020.03.05
c# EXCEL 파일 읽기  (2) 2020.02.25
블로그 이미지

은호아빠

여행, 맛집, 일상, 프로그래밍, 개발자, 윈도우, 웹, jsp, spring, db, mysql, oracle, c#

,

부산 부산진구 부암동 외식1번가 점심특선  스페셜점심메뉴

친구와 함께 점심특선을 먹으로 외식1번가에 들렀어요. 

여기 점심메뉴가 괜찮다고 하더라고요.

입구 안내표지

주차를 하고 외식1번가를 찾는데 건물이 너무 커서 어디로 들어가야 할지 고민했는데 커다란 안내판이 붙어 있어 입구 찾기가 편했어요. 

외식1번가입구

건물의 중앙 쪽에 입구가 있어요. 들어서면 에스컬레이터가 계단 대신 있는데 타고 2층으로 가시면 돼요. 

안내표지

안내표지인데 외식1번가 가게의 크기가 너무 커서 놀랐어요. 곳곳에 안내판이 설치되어 있어요. 너무 커서 가게 안에서도 일행을 잊을 수 있겠어요. 

 

점심메뉴

점심메뉴예요. 자세히 보시면 가격뿐만 아니라 고기의 중량이 다른 게 함정이에요. 양념갈비가 제일 많이 주지만 뼈 무게가 포함되어 있어요. 저희는 제일 기본인 갈비살 양념구이를 시켰어요. 

테이블 세팅

수저를 제일 먼저 가져다주고 쌈 상추와 장아찌 물김치 양파 양념갈비 등을 가져다주었어요.

떡갈비도 2개 주었는데 양이 너무 많아서 마지막에 먹었는데 양념갈비보다 퍽퍽한게 전 별로 였어요. 

고기굽는영상

숯으로 구워 먹는 방식이었는데요 이날은 친구가 구워줘서 인지 제가 굽는 거보다 맛나게 먹었어요. 

고기를 맛나게 다 먹어갈때즘 냉면을 먹을지 밥을 먹을지 묻길래 저는 물냉면 친구는 비빔냉면을 주문했어요.

그런데 평양식 함흥식 이렇게 묻지 않고 부드러운 것 쫄깃쫄깃한 것 이런 식으로 물어보는 게 새로웠는데요. 

전 부드러운 것으로 달라고 했어요. 부드러운 건 메밀이 들어가고 쫄깃쫄깃 한 건 고구마 전분이 들어간다고 하네요. 

 

물냉면 비빔냉면

양념고기를 많이 먹은 후라 그런지 냉면이 많이 들어가지 않았어요. 

시원한 국물을 남기다니 말이에요. 다 먹고 나서 후식으로 아이스크림을 시켰어요. 

아이스크림

아이스크림이 초코 바닐라인 것 같은데 너무 달지 않아서 좋았어요. 

인공계곡

가게 사이사이로 계곡처럼 물이 흐르게 만들어 놓았는데요. 

계곡에 앉아서 먹는 운치를 느낄 수 있을 것 같아요. 

 

 

블로그 이미지

은호아빠

여행, 맛집, 일상, 프로그래밍, 개발자, 윈도우, 웹, jsp, spring, db, mysql, oracle, c#

,