웹사이트나 티스토리를 보면 배경을 색으로 지정 해놓은 것이 아닌 

이미지를 배경으로 한곳을 종종 볼수 있습니다 . 이번에는

색이아닌 background 로 이미지를 넣는 방법을 배워보도록 하겠습니다.

 

원하는 이미지를 html이 저장되어 있는 폴더에 옮겨놓고 진행 하시면 됩니다.

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body style=" background-image :url(unnamed.jpg);
  background-size : 100%; " >


	<h1 style=" background-color: #3B1E1E;"> CSS 기초배우기 </h1>


</body>
</html>

저는 바디 태그에 백그라운드에 이미지를 첨부하겠습니다 .명령어는 다음 과같습니다

background-image : url (이미지파일이름) ;

그리고 이미지가 화면테 꽉차게 나올수 있다록 백그라운드 사이즈를 100%르 사용하였습니다.

 

 

결과 값은 이렇게 나왔습니다 구글에 검색 기본 배경화면입니다 필요하신분은

unnamed.jpg
1.04MB

이 사진을 사용하시면됩니다.

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

css (배경) 기초 2편  (0) 2021.04.17
CSS (글자색) 기초 1편  (0) 2021.04.17
CSS 기초  (0) 2021.04.17

저번 블로그에서는 글자 색을 변경 해보았습니다. 그러면 저희는 이제

배경 색을 바꾸는 법을 알아보겠습니다. CSS 에서는 배경색을 background 라고합니다.

태그 style 안에 background-color : " 색상" 이라고 작성 해주시면 됩니다.

저는 <body>태그와 <h1> 태그의 배경 색을 변경 해보겠습니다.

 

 

컬러를 지정해주는 방식은 3가지가 있습니다.

  1. 텍스트로 색을 지정해주는방식
  2. RGB값으로 지정해주는방식
  3. RGB의 HEX값으로 지정해주는 방식이 있습니다.

그럼 순서대로 설정해주는 코드를 보여드리겟습니다.

 

1. 텍스트로 색을 지정해주는 방식

<body style="background-color : green">


	<h1 style="background-color : blue"> CSS 기초배우기 </h1>


</body>

바디 태그와 h1 태그에 안에 style 속성을 사용하여 색을 텍스트로 적어 두었습니다 .

 

이렇게 결과 가 나오신걸 볼수 있습니다.

 

2. RGB값으로 지정해주는 방식

<body style=" background-color: rgb(175, 240, 184);">


	<h1 style=" background-color: rgb(211, 240, 175);"> CSS 기초배우기 </h1>


</body>

저는 RGB 값을 눈으로 확인 하고 싶어 구글에 RGB To Hex를 검색하여 일일이 색을 확인하고 RGB값을 넣었습니다.

그리고 코드의 결과 입니다.

3. RGB의 HEX값으로 지정해주는 방식

 2.번에 있었던 RGB To Hex 를 이용을 하셔서 Hex 값을 확인 한후 적용하는 방식이 있습니다 

코드를 보겠습니다.

 

<body style=" background-color: #FAE100;">


	<h1 style=" background-color: #3B1E1E;"> CSS 기초배우기 </h1>


</body>

 

이렇게 나온걸 확인 할수있습니다. 

그리고 한가 지 팁을 드리면 3번째 HEx 컬러에 있는 rgb 값은 카카오톡 로고 의 색입니다.

이 정확한 색을 어떻게 알수 있는지는

enjoymylife93.tistory.com/30

 

Microsoft PowerToy

얼마전 유투브에서 소개해준 마이크로소프트 PowerToy 프로그램 리뷰를 보았다 . 아직 정식 출시 한것이 아니라 컴퓨터 운영체제에는 안들어있는 프로그램이다. 그래서 github 홈페이지를 들어가서

enjoymylife93.tistory.com

이 프로그램을 이용하면 마우스 끝에 있는 rgb 값을 확인해주는 프로그램으로 확인하여 작성 하였습니다.

 

이상입니다. 감사합니다.

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

css (배경 1-2) 기초 2-1편  (0) 2021.04.18
CSS (글자색) 기초 1편  (0) 2021.04.17
CSS 기초  (0) 2021.04.17

CSS는 HTML을 기본지식으로 두고있으며 CSS를 공부하려면 HTML을 공부하고 진행하셔야 사용가능합니다.

이번 기초 1편에서는 글자의 색깔 을 바꾸는 것을 해보겠습니다.

일단 CSS 을 사용하려면 HTML태그에 Style을 사용 써주셔야합니다.

 

일단 제목의 색깔을 초록색으로 바꿔 보겠습니다 문법은 이렇습니다.

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

	<h1 style="color: green"> CSS 기초배우기 </h1>


</body>
</html>

 

style 안에 color : green 이라고 해주었습니다 이게 다입니다. 

결과 는 아래 사진에있습니다.

 

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

css (배경 1-2) 기초 2-1편  (0) 2021.04.18
css (배경) 기초 2편  (0) 2021.04.17
CSS 기초  (0) 2021.04.17

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

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

<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

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

+ Recent posts