/* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) { /*스타일입력*/}
/* 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) { /*스타일입력*/}
/* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
@media all and (min-width:480px) and (max-width:767px) { /*스타일입력*/}
/* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/
@media all and (max-width:479px) { /*스타일입력*/}
/* PC (해상도 1024px)*/
@media all and (min-width:1024px) { /*스타일입력*/}
/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) { /*스타일입력*/}
/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) { /*스타일입력*/}
* 미디어쿼리 적용법
@media only|not screen and (min-width: 152px) and (max-width: 1024px) { ... }
only : 뒤의 조건만 / not : 뒤의 조건을 제외한 조건 미디어쿼리를 지원하는 브라우저 대상으로 쿼리 안의 내용이 적용됩니다.
-- 미디어 타입의 종류
all : 모든 미디어타입
aural : 음성 합성장치
braille : 점자 표시 장치
handheld :
* 미디어쿼리 적용법
<link href="xxx.css" media="screen and (min-width: 152px) and (max-width: 1024px)" rel="stylesheet">
<style type="text/css" media="screen and (min-width: 152px) and (max-width: 1024px)"</style>
<style>
@import url(xxx.css) screen and (min-width: 152px) and (max-width: 1024px);
</style>
/* css 파일 안이나 style 태그 안에서 */
@media screen and (min-width: 152px) and (max-width: 1024px)
//스택 생성자 함수
function Stack() {
this.dataStore = []; //스택요소를 저장하는 배열
this.top = 0;
this.push = push;
this.pop = pop;
this.peek = peek;
this.clear = clear;
this.length = length;
}
//push
function push(element) {
this.dataStore[this.top++] = element; //현재 top위치에 새요소를 추가한 다음 top이 증가
}
//pop
function pop() {
return this.dataStore[--this.top]; //스택의 탑 위치에 있는 요소를 반환한 다음 top변수를 감소
}
//peek : 스택의 탑에 있는 요소 내용 반환
function peek() {
return this.dataStore[this.top-1];
}
//length
function length() {
return this.top;
}
//clear
function clear() {
this.top = 0; //top변수를 0으로 설정하면 스택 전체 요소가 삭제
}
//스택 클래스 구현 테스트
var s = new Stack();
s.push("main실행");
s.push("println실행");
s.push("timer실행");
print("length: " + s.length());
print(s.peek());
var popped = s.pop();
print("The popped element is: " + popped);
print(s.peek());
s.push("프로그램 종료");
print(s.peek());
s.clear();
print("length: " + s.length());
print(s.peek()); //undefined , 스택에 모든 요소를 삭제했으므로 탑위치에 데이터가 없는 상황
function print(v) {
document.write(v+"<br/>");
//console.log(v);
}
//[출처] [자료구조] 자바스크립트로 스택(Stack) 구현 |작성자 자바킹
//http://blog.naver.com/PostView.nhn?blogId=javaking75&logNo=220226369586&categoryNo=71&parentCategoryNo=0&viewDate=¤tPage=1&postListTopCurrentPage=1&from=postView
원래 이 기능을 수행하는 history 객체의 기능을 사용할 수도 있다. 내가 history를 사용하지 못한 이유는 웹이 로그인 제외.. 싱글 페이지이며 원 페이지 내에서 각 목차별 콘텐츠로 페이지를 이동하는 것처럼 해야하다보니 그와 비슷하게 동작하는 것을 개발해야 했다. 브라우저의 앞/뒤로가기를 누르면 로그인하는 첫 페이지로 이동해버린다.
구현해야 하는 기능은 조회한 목차별 콘텐츠의 이력이 저장되며, 뒤로가기 앞으로가기가 동작해야 했다. 그리고 로그인 시 조회했던 목록에 대한 정보를 다시 들고와야한다.
막연하게 브라우저에서 썼던 히스토리 기능, 특히 앞으로가기가 뒤로가기 기록에 대해 의존하는 걸 다시 확실히 알았다.
웹, 네이티브 앱에서 오디오, 비디오, 데이터의 실시간 통신을 가능하게 하는 오픈 소스 프로젝트. 즉 웹 브라우저에서 화상채팅, 음성채팅 등을 제작 가능한데, 스트리밍 데이터를 얻고 통신하기 위한 API가 구현되어 있다. (출처:구글코드랩)
몇 가지 JS API를 알아보면...
getUserMedia() : 오디오, 비디오를 캡쳐
MediaRecorder : 오디오, 비디오를 녹화
RTCPeerConnection : 사용자간 오디오, 비디오를 스트리밍
WebRTC는 RTCPeerConnection을 사용하여 브라우저간에 스트리밍 데이터를 전달하는데, 통신을 조정하고 신호로 알려진 프로세스 인 제어 메시지를 보내는 메커니즘이 필요하다. 이 시그널링 방법과 프로토콜은 WebRTC에서 지정하지 않고 보통 메시징에 Socket.IO를 사용한다.
RTCDataChannel : 사용자간 데이터를 스트리밍
사용처
파폭, 오페라, 등 브라우저와 데스크톱, 안드로이드 크롬, ios, 안드로이드 기본 앱에서 사용 가능
실습 예제 목차
웹캠으로 비디오를 가져오고, 스냅샷을 찍고, P2P를 공유하는 앱을 빌드하는 예제이다. WebRTC API 사용 방법을 배우며 Node.js를 사용하여 메시징 서버를 설정할 수 있다. 웹캠에서 비디오 가져오기, RTCPeerConnection으로 비디오 스트리밍, RTCDataChannel를 사용한 데이터 스트리밍, 메시지 교환을 위한 신호 서비스 설정, 피어 연결 및 신호 결합, 스냅샷을 찍어 데이터 채널을 통해 공유하기 등을 해 본다.
요구사항은 Chrome 47 이상, Chrome용 웹서버나 다른 웹 서버, 샘플 코드, 텍스트 편집기, 아래 선행 지식이다.
웹 서버로 파이어베이스(구글 Firebase)를 사용했다.
선행 지식 : HTML, CSS, JS, NodeJS, SSL, Soket, IO
1~3. 네트워크 없이 실행
1. 카메라에서 비디오 추출
2. RTCPeerConnection을 이용해서 상대에게비디오 제공 (네트워크 x)
3. RTCDataChannel을 이용해서 데이터 주고받기
4~6. 네트워크 이용, NodeJS 설치 후 웹으로 실행
4. 서버를 이용해서 메세지 주고받기 (signaling)
5. 네트워크 상에서 비디오 주고받기 : getUserMedia, signaling, RTCPeerConnection의 종합 예제
6. 데이터 공유(제공)
예제 관련 주의사항
※ 구글 예제는 크롬에서만 작동하여 다른 브라우저에서 작동을 원할 시 추가 작업이 필요하다.
Zoom Video Communications에서 개발한 화상 통화 소프트웨어 프로그램으로, 무료 버전은 40분 제한으로 최대 100명 참가 가능 서비스 제공 지원 운영체제는 윈도우, 맥OS, 리눅스, 안드로이드, IOS, 크롬OS, 제공 언어 11가지 비슷한 프로그램으로 마이크로소프트 팀즈, 팀뷰어 등이 있다.
첫 실행 / 회의참가 / 로그인 화면
회원가입 화면
이동 화면
여시겠습니까? 팝업창을 띄운 후 프로그램으로 이동한다.
줌 회의 실행 화면
줌 미팅즈 실행 화면
줌 미팅즈 실행 / 설정 화면
세부 분석
중앙 버튼 컬러 : #0E72ED ■, (hover 컬러 : #1A6CDA ■), #F26D21 ■
상단 바 배경 : #F2F2F5 ■ 상단 바 아이콘 : #0E71EB ■ 검색 배경 : #DEDEE3 ■
접속중 표시 : #3FD478■
설정 아이콘 : #747487 ■
좌측 배경색 : #2B2B47■ 접속중 표시 : #3FD478■
메인 컬러 : #0E71EB ■
시작 아이콘 컬러 : #0E71EB■(hover : #0D68D8 ■) 비활성화 아이콘 컬러 : #232333■
start : 문자 인덱스입니다. 문자열에서 첫 번째 문자의 인덱스는 0이며, 마지막 문자의 인덱스는 문자열 전체 길이에서 1을 뺀 값입니다. substr()는start에서 문자들을 추출을 시작하여length만큼 문자들을 수집합니다.start 값이 양수이고 문자열 전체 길이보다 크거가 같을 경우, substr()은 빈 문자열을 반환합니다.
만약 start가 음수이면, substr()은 문자열 끝에서 start 숫자만큼 뺀 곳에서 시작하게 됩니다. 만약 start가 음수이고 절대값이 문자열 전체보다 크다면, substr()은 문자열의 0 인덱스부터 시작하게 됩니다. (주의: start의 음수값은 Microsoft JScript에서는 위의 설명과 같이 동작하지 않습니다.)
추출하고자 하는 문자들의 시작위치입니다. 만약 음수가 주어진다면,문자열총길이 + start의 값으로 취급합니다. 예를 들면,start에 -3을 설정하면, 자동적으로문자열총길이 - 3으로 설정하게 됩니다.
length : 옵션값. 추출할 문자들의 총 숫자. 만약 length가 0 혹은 음수이면, substr()은 빈 문자열을 반환합니다. 만약 length가 생략되면, substr()은 문자열의 끝까지 추출하여 반환합니다.
아규먼트 사용 시 주의점 : null일 경우 처리를 해 준다. (args.Length<x)
using System;
using System.IO;
namespace ConsoleApp2
{
class Program
{
//args란 문자열배열을 받고 있음
static void Main(string[] args)
{
// 사용자가 두개 미만의 파라미터를 넣었을 때 에러 방지
if(args.Length<2)
{
Console.WriteLine("Usage: C>ConsoleApp2 srcfile destfile");
return;
}
// 파라미터
string srcfile = args[0]; //1.txt
string destfile = args[1]; //2.txt
// 소스파일이름
File.Copy(srcfile, destfile);
Console.WriteLine($"Copy {srcfile} to {destfile}");
}
}
}
불필요한 using은 입력 화면 우클릭 > Remove and Sort Usings(Ctrl + R, Ctrl + G)를 선택하여 지워준다.
빌드
exe파일 전까지 위치를 긁어서 찾아간다
cd 경로
경로 dir
ConsoleApp2.exe를 실행, ConsoleApp2.pdb 파일을 ConsoleApp2.pdb2로 복사해본다.
일일히 이렇게 할 수 없으니까 비쥬얼스튜디오 내에서 아규먼트를 지정하려면
비쥬얼 스튜디오 우측 탭 > 솔루션 아래 ConsoleApp2 우클릭 > '속성' 선택 > 디버그 > command line arguments : 에 1.txt 2.txt 라고 아규먼트를 준다.
(좌) 우클릭 할 곳 (우) 속성 클릭 후 나타난 창에서 변경해야 할 부분
cmd창에 copy 경로 및 파일명 으로 테스트 파일 복사 후 코드 실행
윈폼 프로그램
새 프로젝트 생성
비어있는 폼이 생성된다
ui는 좌측 탭의 툴박스(Toolbox)를 사용해 드래그앤드롭으로 구성할 수 있다.
텍스트박스와 버튼을 놓아봤다
search toolbox에서 검색도 가능
우측 하단에서 텍스트 값, 속성 값 등을 변경 가능
각 textarea의 속성을 txtUsername, txtPassword, 버튼의 속성을 btnOK로 바꿔준다
라벨을 하나 더 만들어서 제목을 만들어주고
F5 를 눌러서 실행
팝업창을 닫고 종료시키기
버튼을 눌렀을 때 뭔가가 되게 해보자
버튼을 더블클릭하면 코드가 나옴
아래와 같이 수정
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 MyWinForm
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void label1_Click(object sender, EventArgs e)
{
}
private void label3_Click(object sender, EventArgs e)
{
}
private void btnOK_Click(object sender, EventArgs e)
{
if (txtUsername.Text == "admin" && txtPassword.Text == "1234")
{
MessageBox.Show("성공");
}else
{
MessageBox.Show("실패", "에러"); //뒷부분은 결과 팝업의 타이틀
}
}
}
}
