웹브라우저  자동 로그인그전편 WebBrowser 만들기를 해보신후 진행 하시는게 이해가 쉽습니다.

 

C# 으로 만든 WebBrower로 웹사이트 자동 로그인 을 해보겠습니다.

이부분에서는 HTML의 기초CSS의 기초가 필요로 합니다.  

 

일단 로그인할수있는 사이트를 Navigate함수에 먼저 등록을해놓습니다. 

저는 다음사이트를 들어가 서 로그인을해보도록하겠습니다.

폼로드를 할때 기본으로 다음홈페이지를 기본으로 세팅해놓겠습니다.

그러면 다음사이트로 시작하자마자 이동할수 있습니다

이제 크롬이나 일반 웹브라우저를 키고 다음 사이트를 가서 F12키를 눌러줍니다.

저는 카카오계정으로 로그인을 할텐데요

그럴려면 저 로그인 버튼을 눌르고 아이디 와 비밀번호 입력창이있는 주소를 복사하겠습니다.

그리고 다시 Navigate에 로그인창 주소를 입력하여줍니다.

 

webBrowser1.Navigate("https://www.daum.net/");

 

 

사실 처음 폼로드를 세팅할때 로그인창으로 바로가게 세팅을 해주어도 되지만 이해를 돕기위해 과정을 올려두었습니다.

 

그러면 이렇게 로그인 창이 뜨실텐데요 우리는 여기서 f12를눌러 개발자도구를 열어겠습니다.

 

 

저상단에있는 버튼을 눌러주고 카카오계정 아이디 입력하는 텍스트박스 눌러줍니다.

그러면 이런 오른쪽 창이 이파란색 배경으로 칠해져있는 구역이 바로 저 아이디를 나타내는 태그입니다.

 

저희는 저기안에 있는 태그나 클래스이름이나 몇가지 특징으로 저기에 접근할수있게 할텐데요.

라벨태그 아래에 있는 input 태그를 확인해줍니다 텍스트는 input 태그안에 넣어야 아이디가 입력이 됩니다.

input 태그안 id 값을 찾아서 텍스트를 넣겠습니다.

	webBrowser1.Document.GetElementById("id_email_2").SetAttribute("value", "사용자아이디");
    webBrowser1.Document.GetElementById("id_password_3").SetAttribute("value", "비밀번호");

webBrowser 에 도큐먼트안에이 Id 값을 찾아서 속성을 집어 넣어주는건데 요 비밀번호를 찾는건 아이디 찾는것과

같아 생략해겠습니다.

여기 까지 진행하시고 컴파일 해보시면

이렇게 입력되신걸 보실수있습니다 

사이트가 열리기 까지 기달려야하기때문에 딜레이를 조금 주었습니다.

그리고 클릭버튼도 똑같이 f12를 눌러 그전과 똑같이 해보겠습니다.

이번에 로그인버튼은 Button 태그를 눌러 주어야합니다.

웹브라우저에 있는 모든 버튼 태그를 찾아서 html 요소 를 배열로 넣어줄수 있는 HtmlElemenCollection 에 넣어줍니다

그리고 HtmlElement 객체에 하나하나 넣어서 로그인 버튼안에 있는 innerText 중 로그인 텍스트가 있는 

버튼을 찾아 클릭을 하여줍니다.

  HtmlElementCollection loginButton = WebBrowser.Document.GetElementsByTagName("button");
            foreach (HtmlElement seachLogin in loginButton)
            {
                if (seachLogin.InnerText == "로그인")
                {
                    seachLogin.InvokeMember("click");
                }
            }

이렇게 끝내고 컴파일을 하면 로그인 된 화면을 볼수있습니다.

 

C#으로 만든 WebBrowser는 IE 기반이므로 스크립트 오류가 날수 있습니다. 

스크립트 오류가 발생할 경우 

 

시작 > internet Explorer 검색을 한뒤 > 인터넷 옵션 > 고급 > 스크립트 디버깅사용안함 두항목을 해체 해주시면 됩니다.

 

 

제깃 허브에 소스코드를 올려놓았습니다.

github.com/jeongilhwa/IEWebBrowser/tree/master/IEWebBrowser

'개발 > c#' 카테고리의 다른 글

C# Chromium 크롬 웹 브라우저 만들기  (0) 2021.09.30
c# 윈폼 로또 생성기  (1) 2021.05.11
Boxing UnBoxing  (0) 2021.04.14
c# WebBrowser 만들기  (0) 2021.04.12
c# 으로 메모장 만들기  (0) 2021.04.11

손쉬운 명세서 작업 

명세서 작업이 귀찮은지.

 

대부분 개발자들이 기술 명세서 작업을 해야하지만 명세서 작업을 하지않는다.

개발자는 명세서작업보다는 오로지 개발을 더중요시하기 때문이다.

이런 개발자 일수록 생산성이 낮아진다 . 

 

프로그램 설계 명세서 를 작성한 프로그래머와 

안한 프로그래머는 당장에 눈에 는 작성안한 프로그래머가 더욱 빨리 코드를 작성하고 빨리 프로그램을 만드는 것처럼 보이지만 나중에 돌이켜서 보면 나중에 설계 명세서 를 작성한 쪽이 오히려 정확한 기능을 

만들수 있습니다. 설계명세서를 작성안한 프로그래머는 나중에 잘못만들어진 기능을 고치려할때는 명세서를 작성안한 프로그래머 보다 많은 시간을 쏟아 코드를 고쳐야 할수있습니다.

 

그리고 또하나 의사소통의 시간의 절약이다 명세서를 작업 할때는 팀원에게 어떻게 동작하는지말 알려주고 명세서를 건대면 시간이 절약이 된다

품질 보증 팀원도 명세서를 읽으며 프로그램이 어떻게 동작할지 예상하며 무엇을 테스트 해야 하는지 알수 있습니다.

 

 

Boxing 과 UnBoxing

Boxing 과 unBoxing은 형변환 타입입니다.

int => double , double => int 로 변환 하는것이아닌
object => int , int=> object 로 변환하는것입니다.
메모리 영역을 생각을 하고 바라 보아야합니다. 저희가 아는 데이터타입 스택영역입니다.
그래서 int-> double 은 스택영역에서의 형변환입니다.

하지만 object => int 는 힙영역에서 스택영역 즉 값 형식을 참조 형식으로 변환하는 것을 말하며 스택에 있는 데이터가 힙으로 복사
int => object 스택영역에서 힙영역으로 형변환 참조 형식을 값 형식으로 변환하는 것을 말하며 힙에 있는 데이터가 스택으로 복사가 이루어집니다.

 

이제 여기서 Boxing 은  스택영역에서 힙영역으로 형변환이 이루어지는 것입니다.

여기선 암시적 형변환 이 가능합니다.

물론 명시적 형변환 도 가능합니다.

using System;

namespace BoxingUnBoxing
{
    class Program
    {
        static void Main(string[] args)
        {
            int a = 123;
            object o = a;

            Console.WriteLine(o);
            Console.Read();

        }
    }
}

 

UnBoxing은 힙영역에서 스택영역으로 형변환이 이루어지는 것입니다.

using System;

namespace BoxingUnBoxing
{
    class Program
    {
        static void Main(string[] args)
        {
            object o = 123;

            int a = (int)o;
            
            Console.WriteLine(o);
            Console.Read();

        }
    }
}

 

 

 

 

MSDN 에 의하면 값 형식을 박싱할 때에는 완전히 새로운

개체가 만들어져야 하며, 이러한 작업에는 할당 작업보다

최대 20배의 시간이 걸린다고 한다. 언박싱 또한 캐스팅

과정이 할당 작업보다 4배의 시간이 걸릴 수 있다고 나와있다.
출처: https://grayt.tistory.com/87 [IT's me]

 

이점을 생각하고 사용하면 사용하면 더 조은 성능을 낼수있는 프로그램을 만들수있습니다.

'개발 > c#' 카테고리의 다른 글

c# 윈폼 로또 생성기  (1) 2021.05.11
C# WebBrowser 자동 로그인  (4) 2021.04.15
c# WebBrowser 만들기  (0) 2021.04.12
c# 으로 메모장 만들기  (0) 2021.04.11
Buble Sort (버블소트) 정렬알고리즘  (0) 2021.04.01

웹사이트들 돌아 다니다 보면 로그인 창이나 입력 창을 볼수있습니다.

오늘은 입력할수있는 태그를 알아보겠습니다.

<input> 태그입니다 이태그는 다른 태그와는 다르게 </input>이라는 끝나는 태그가 없습니다.

그리고 오늘은 input 태그의 Type 들중 Text에 대해 설명을 해보겠습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>

	<h1 style="margin:30px;"> HTML 기초배우기 </h1>
	로그인<input type="Text">

</body>
</html>

 

로그인 을 타이핑 하신후에 input 태그 속성값이 있는 type 를 Text로 지정해줌니다.

 

결과값은 아래 와같이 나옵니다.

<input>태그를 이용하여 아이디와 비밀번호를 만들어 보면 결과는 이렇게 나오는데요

 

이렇게 만들기 싫고 로그인 밑에다가 비밀번호를 넣고 싶으면 여러 가지 방법이있습니다.

로그인 태그 뒤에 <br> 태그를 넣는 방법이있습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>

	<h1> HTML 기초배우기 </h1>
	로그인<input type="Text"><br>
	비밀번호<input type="Text">

</body>
</html>

 

그리고 <p></p> 태그를 이용해 각각 단락을 설정해 주는 방법도있습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>

	<h1> HTML 기초배우기 </h1>
<p>	로그인<input type="Text"> </p>
<p> 비밀번호<input type="Text"></p>

</body>
</html>

 

 

그리고 조금더 개발자 스럽게 <div></div> 태그를 이용하는 방법이있습니다.

저는 <div></div> 태그를 쓰는걸 추천드립니다. 이유는 조금더 위치를 조정하기 편하고 

디자인면에서와 다른 태그들을 같이 감싸주어도 용이 하다고 생각합니다 

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>

	<h1> HTML 기초배우기 </h1>
<p>	로그인<input type="Text"> </p>
<p> 비밀번호<input type="Text"></p>

</body>
</html>

 

모든 태그들을 써보시고 각자의 장단점에 맞게 사용하시면 됩니다.

'개발 > HTML' 카테고리의 다른 글

HTML (오디오) 7편  (0) 2021.04.16
HTML (박스 모델) 기초 5-2편  (0) 2021.04.12
HTML (박스 모델) 기초 5-1편  (0) 2021.04.11
HTML (리스트 ) 기초 3편  (0) 2021.04.10
HTML (밑줄, 기울기, 줄바꿈, 굵기)기초 2편  (0) 2021.04.09

c# 으로 웹브라우저를 만드는 방법은 간단합니다.

윈도우 폼을 생성한뒤

tablelayoutpannel을 추가 하고 속성값의 Dock 을 fill로 설정해 줍니다.

tableLayoutpannel의 열을 하나 제거해주고 상단의 패널을 28로 고정 시켜줍니다.

 

tableLayoutPannel 첫번째 행에 패널을 다시 추가해주고 Dock 을 fill로 설정합니다.

그리고 margin값을 0으로 하여 여백을 제거합니다.

그리고 tableLayoutPannel 두번째 행에는 도구상자에 webbrowser를 추가 하고 Dock 을 fill로 채워줍니다.

버튼 3개와 텍스박스를 추가 하여줍니다 

그리고 각각 더블클릭하여 함수를 만들어 놓습니다.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace IEWebBrowser
{
    public partial class Form1 : Form
    {
        
        public Form1()
        {
            InitializeComponent();
        }

        private void BackButton_Click(object sender, EventArgs e)
        {
            webBrowser1.GoBack();
        }

        private void button2_Click(object sender, EventArgs e)
        {
            webBrowser1.GoForward();
        }

        private void WebAddressTextBox_TextChanged(object sender, EventArgs e)
        {

        }

        private void AddressMoveButton_Click(object sender, EventArgs e)
        {
            webBrowser1.Navigate(WebAddressTextBox.Text);
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            
            webBrowser1.Navigate("www.google.com");
        }
    }
}

 

'개발 > c#' 카테고리의 다른 글

C# WebBrowser 자동 로그인  (4) 2021.04.15
Boxing UnBoxing  (0) 2021.04.14
c# 으로 메모장 만들기  (0) 2021.04.11
Buble Sort (버블소트) 정렬알고리즘  (0) 2021.04.01
10 까지의 합구하기  (0) 2021.03.31

4장. 개발자가 꼭 알아둬야 할 유니코드와 문자 집합에 대한 고찰 2편

인코딩

인코딩에 대해 가장 중요한 사실 한가지는 일반 텍스트란 개념은 존재하지 않다라는 것입니다.

우리가 보는 html 문서의 head태그 에서도 문자열인코딩의 규칙을 기재해줘야 하는 것이 있다.

 

'개발 > 개발지식' 카테고리의 다른 글

변수(Variable)란  (0) 2021.04.21
절차지향과 객체지향 (본문수정중)  (0) 2021.04.21
W3C  (0) 2021.04.17

1편에 이어서 2편 은 박스모델 span 으로 알아보겠습니다.

<span> </span> 은 div와달리 박스모델이지만 주 은 박스모델 span 으로 알아보겠습니다.

span과 div 의 차이점은 줄바꿈의 여부입니다 .

div는 자동으로 줄바꿈이 되는 박스모델이고 span은 자동 줄바꿈이 안되어있는 박스 모델입니다.

이런 디자인을 만들수 있습니다.

저희는 이제 간단한 예제로 span이 어떻게 되어있는지 알아 보겠습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>

	<h1 style="margin:30px;"> HTML 기초배우기 </h1>

<span style="margin:10px;margin-top: 150px ;padding: 30px; padding-bottom: 150px;border:1px solid black;">첫번째 영역</span>
<span style="margin:10px;margin-top: 150px ;padding: 30px; padding-bottom: 150px;border:1px solid blue;">세번째 영역</span>
<span style="margin:10px;margin-top: 150px ;padding: 30px; padding-bottom: 150px;border:1px solid red;">두번째 영역</span>
<span style="margin:10px;margin-top: 150px ;padding: 30px; padding-bottom: 150px;border:1px solid green;">네번째 영역</span>
</body>
</html>

1편에서 보았던 마진과 패딩값을 설정 하여 span의 박스모델을 보겠습니다 . 

결과 값은 

이렇게 나온걸 볼수 있습니다. 이렇게 span과 div를 적절히 사용해서 디자인을 하면 저희가 원하는

디자인을 얻을수있습니다.

'개발 > HTML' 카테고리의 다른 글

HTML (오디오) 7편  (0) 2021.04.16
HTML (입력) 기초 6편  (0) 2021.04.14
HTML (박스 모델) 기초 5-1편  (0) 2021.04.11
HTML (리스트 ) 기초 3편  (0) 2021.04.10
HTML (밑줄, 기울기, 줄바꿈, 굵기)기초 2편  (0) 2021.04.09

저희는 이제 박스 모델에서 알아 보겠습니다. 

HTML에서의 박스 모델이란 content를 둘러싸고 있는 테두리를 말합니다.

여기서 content란 opening tag와 closing tag 사이에 존재하는 문장들을 의미합니다.

즉 <h1>content </h1> 태그안에 있는 내용을 말하는것입니다.

그러면 content를 둘러싸고 있는  박스 모델에서 대해서 알아보겠습니다.

 

박스 모델에는 content, padding, border, margin 이있습니다.

자세한 내용은 en.wikipedia.org/wiki/CSS_box_model확인하시면 됩니다.

이제 박스 모델 <div> </div>를 알아 보겠습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>

	<h1> HTML 기초배우기 </h1>

<div>첫번째 영역</div>
<div>두번째 영역</div>
<div>세번째 영역</div>
<div>네번째 영역</div>
 

</body>
</html>

 

이렇게 작성 하고 출력결과를 보겠습니다.

이렇게 나온걸 보면 저희는 이게 박스모델인지 구별할 수 없습니다 그래서 div 태그 속성을 들어가 테두리에 선을 그어 확인 해보겠습니다.

이렇게 라인이 생겼습니다 그러면 저희는 이 박스모델의 테두리를 제어해 저 박스의 크기도 설정 할수있습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>

	<h1> HTML 기초배우기 </h1>

<div style="width:50px; height:50px; border:1px solid black;">첫번째 영역</div>
<div style="width:250px; height:250px; border:1px solid red;">두번째 영역</div>
<div style="width:350px; height:50px; border:1px solid blue;">세번째 영역</div>
<div style="width:250px; height:90px; border:1px solid green;">네번째 영역</div>


</body>
</html>

 

이렇게 사이즈를 적용해보겠습니다.

이렇게 나오는 걸 확인 하실수 있습니다.

'개발 > HTML' 카테고리의 다른 글

HTML (입력) 기초 6편  (0) 2021.04.14
HTML (박스 모델) 기초 5-2편  (0) 2021.04.12
HTML (리스트 ) 기초 3편  (0) 2021.04.10
HTML (밑줄, 기울기, 줄바꿈, 굵기)기초 2편  (0) 2021.04.09
HTML( 제목, 단락) 기초 1편  (0) 2021.04.08

+ Recent posts