예전 싸이월드나 홈페이지가면 그 홈페이지에서 음악이 나오는걸 경험 한적이있습니다.

저희는 그 음악이나 음성 오디오 파일을 넣을 수있는 태그를 알아보겠습니다.

<audio> </audio> 태그를 알아보겠습니다.

 

오디오 태그안에는 소스라는 태그가 하나 더들어가야 합니다.

소스태그는 오디오나 미디어 파일을 넣을 때 사용됩니다.

<source src="주소"> 소스 태그는 src로 그 파일에 주소를 가리 키고 있어야 사용가능합니다.

 

그럼 이제 html 파일을 저장 하는 파일에 .mp3 파일을 넣어 줍니다.

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

	<h1> HTML 기초배우기 </h1>
<audio controls>
	<source src="Beat Your Competition - Vibe Tracks.mp3" type="audio/mp3">
</audio>

</body>
</html>

 

   controls  는 비디오 재생 타입을 말해 줍니다.

<audio controls autoplay>
	<source src="Beat Your Competition - Vibe Tracks.mp3" type="audio/mp3">
</audio>

 이렇게 controls autoplay를 작성을 하면 페이지가 열리면 자동으로 재생이 됩니다.

 

<audio controls loop>
	<source src="Beat Your Competition - Vibe Tracks.mp3" type="audio/mp3">
</audio>

loop를 넣어주면 음악이 끝나면 다시 재생을 시작합니다.

그리고 type은 음악 재생파일의 타입을 작성하여야 합니다 . 

오디오 파일이 mp3면 mp3를 기재 하고 wav 파일이면 wav로 바꿔 작성해주어야합니다.

 

결과 화면은 이렇게 나옵니다.

Beat Your Competition - Vibe Tracks.mp3
6.63MB

이렇게 오디오 파일을 재생할수있게 디자인이 나왔습니다.

 

오디오파일은 저작권이 없으므로 이블로그에서 가져다 쓰셔도 됩니다.

감사합니다.

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

HTML (입력) 기초 6편  (0) 2021.04.14
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

손쉬운 소프트웨어 일정 관리법 1

반드시 일정을 짜야합니다. 어떤 프로그래머든 간에 일정을 짜는 건 원하지 않는 사항입니다. 극소수만 일정을짜지만 

그것도 상사의 지시에 일정을 짜는척할 뿐입니다 아무도 이일정을 믿지 않습니다. 하지만 일정을

짜지 않고 한 예를 들어 보겠습니다.어떤 한 게임회사는 준비 되면 출시 하겠다고 자랑을 하고 개발 에 착수를 하였습니다.

개발 일정없이 말입니다.. 하지만 그게임이 나왔을때는 컴퓨터 사양이 높아져 그게임음 최소사양 이되버렸습니다. 그리하여 제품을 다시 억지로 끼워 맞추느라 16개월이나 더 지연 되었다고 합니다 

일정을 짜야겟다는 생각을 하지않습니까?  그러면 정확히 지켜질 일정을 손쉽게 짜는 방법을 알려주겠습니다

 

 

웹브라우저  자동 로그인그전편 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

부의 추월차선은 베스트셀러에 유투브에서도 책리뷰에 자주 등장하는책이다.

딸과 도서관에 다녀오던 날 생각이 나 빌려보게 되었다.

 

엠제이 드마코의 어릴적 살던 배경부터 시작하여
어떻게 해서 자신이 현재 경제적 자유를 누렸는지에 대해서 설명을한다.

제목에서 이야기 하는 추월차선이란 말은 부자가 서있는 길을 뜻한다.

 

그렇다 이책에는 3가지의 길이있다.

직업을 가지고있는 서행차선,

직업을 가진 사람을 고용하는 추월차선,
그리고 추월차선인것같지만 결국은 자기가 일을하며
자기의 직업이 되어있는 서행차선에 있는 자영업자

 

엠제이의 드마코가 하고 싶은 말은 부자가 되기위해서는 돈을 아끼고 저축하여서 은퇴후 삶을즐기게아닌

젊어서도 은퇴를 할수 있다는것이다. 그것은 우리가 살고있는 세상이만든 선입견으로 가득 차있는 생각을
깨면 부자가 될수 있다라고 한다.

그리고 이 책의 관통하는 내용이 많다 . 아마 엠제이 드마코는 이 내용을 이책에서 말하고 싶었던게 아닐까
생각이든다.

서행차선에서 못벗어나게하는 서행차선에있는 사람들의 당연한생각들

예를들면 열심히 일하고 돈을 아껴 적금을 들고 60세 나이에 은퇴를 하여 그동안 번돈으로

생활하는 방식 나도 이책이나 우리회사의 대표님을 만나기전까지는 그렇게 생각하였다.

하지만 이책에서는 굳이 60세까지 기다려야해? 라는 질문을 던진것이 있다.

그리고 돈이 나오는 열매 즉 내가 일을 굳이하지않아도 되는 저절로 돈이 벌리는 시스템을 구축하는것.

이것이 이책내용전체를 관통한다.

그리고 서행차선에 있는 사람들의 관점과 추월차선에 있는 사람들의 관점을 말하여준다.

' > 자기개발서(부자편)' 카테고리의 다른 글

타이탄의 도구들  (0) 2021.04.24

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

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

<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

+ Recent posts