1. win키 눌러 일본어 ime 설정 검색 후 클릭 혹은 엔터
2. "일반" 클릭
3. 호환성란의 이전 버전의 Microsoft IME 사용 "켬"으로 전환
| [MAC] Sequel Pro/Ace Keyboard Shortcuts (0) | 2021.10.21 |
|---|---|
| 윈도우10 유용한 단축키 (0) | 2021.02.17 |
| amara를 통해 유튜브영상에 자막 달기 (0) | 2021.01.16 |
| Oracle VM VirtualBox에서 클립보드 공유 (0) | 2021.01.06 |
| 크롬,엣지 브라우저에서 특정 사이트 검색엔진으로 추가하기 (0) | 2020.08.31 |
1. Oracle VM Virtual Box 포트포워딩 설정
1) 설정 - 네트워크 - 포트포워딩
2) 포트포워딩 규칙 설정
IP는 비워두면 호스트의 IP를 그대로 쓴다. (ipconfig하여 본인 컴퓨터 ip확인)
게스트 IP는 말그대로 가상 머신의 IP이며 포트는 SSH의 기본포트인 22
리눅스 가상머신에서 ssh 서비스 상태와 포트는 아래 명령어로 확인가능
service sshd status
ssh클라이언트가 설치되어있다면 2의 과정 생략
2. ssh 클라이언트 설치
1) 윈도우키 누르고 "앱 및 기능" 검색하여 엔터
2) 선택적 기능 클릭
3) 기능추가 클릭
4) 선택적 기능 추가 아래의 검색상자에 ssh 입력
5) ssh 클라이언트 선택하면 설치가 진행됩니다.
3. ssh 접속
cmd창 열어 아래 명령어 입력
ssh 계정명@[호스트ip]:[호스트 포트]
ssh root@192.168.7.16:2222호스트 최초 접속 시 RSA 인증관련해서 접속을 계속할건지 물어보는데 yes를 입력 하고
password 입력하면 접속이 된다.
| cafe24 사이트 호스팅 (0) | 2022.05.24 |
|---|---|
| [PHP] 기초 스터디 내용 정리 (0) | 2022.04.12 |
| 이클립스에서 HTML/JSP파일 생성시 인코딩 설정 (0) | 2021.01.15 |
| 이클립스 단축키 (0) | 2017.07.04 |
| 정보처리 - 업무 프로세스 (0) | 2017.06.20 |
amara는 기존의 유튜브 영상에 원하는 언어의 자막을 제3자가 추가할 수 있게 합니다.
* amara사이트내 혹은 임베디드 코드내에서만 동작합니다
유튜브 이외도 html5 지원서비스면 되긴할건데 제가 테스트해본 게 유튜브 밖에 없어요.
유튜브는 커뮤니티 자막이란게 있었지만 얼마전 서비스 종료한 걸로 알고 있습니다.
말로는 이해가 어려우실 거 같아 제가 작업한 자막영상을 아래에 올립니다. 해당 영상으로 제가 얻는 수익은 일체 없음을 알려드립니다. 저는 free라이센스로 사용하고 있어요.
원본영상에 amara를 사용해 직접 코멘트 및 전체 가사 번역한 한글자막을 달았습니다.
한국어 자막을 끄고 켜려면 CC를 눌러서 감상해주세요
성우 라이브 영상에 4시간 이상 들여서 번역 및 싱크 맞춰서 넣었네요....
아무튼 위에서 영상을 재생해보면 기존의 영상은 유지한채로 위에 자막을 씌우는 개념임을 알 수 있습니다.
굳이 영상을 재업로드한다는 식으로 타 채널의 수익창출을 방해하지 않을 수 있는 장점이 있죠.
간단한 사용법을 알려드립니다.
일단 amara.org에 가입 후 +ADD videos를 하면 아래와 같이 영상 URL과 비디오의 언어(말하기)를 선택합니다.
Add new subtitles에 번역(현지화한) 언어를 선택하고 추가를 누릅니다.
아래와 같이 자막 에디터가 나왔는데 전 기본적으로 subtitle edit로 작업하기에 자막한 영상을 바로 업로드합니다.
영상 우하단에 보이는 연장 아이콘을 눌러 Upload subtitles를 클릭
- 그 다음 자막파일을 선택해 올리고 우 상단에 exit를 클릭
자막이 올려졌으면 해당 영상은 블로그나 홈페이지에 임베디드 가능합니다. Embed를 눌러 코드를 확인합니다.
그러면 코드가 두 개 보이는데 위의 태크는 body태그가 닫히는 곳과 가까운 곳, 아래 태그는 body태그내 아무곳에나 넣으면 됩니다.
뭔 소린지 모르겠다구요? =_=
블로그 기준으론 그냥 아래와 같이 달면 끝입니다. 당연 예시이므로 영상의 url이라던가 그런건 본인이 작업한 자막에서 Embed를 통해 확인후 넣어주세요.
밑에 data-로 시작하는 옵션은 본인 자유인데
data-show-subtitles-default="true" 는 기본적으로 자막을 보이게 할꺼냐고
data-initial-language="ko" 는 기본 자막언어입니다.
예시코드) 티스토리 같은 경우 그냥 아래와 같은 형식으로 넣어주면 끝입니다. 위에 <script로 시작하는 태그는 아무데나 넣어줘도 되요.
<p>
<script type="text/javascript" src="https://amara.org/embedder-iframe"></script>
</p>
<p>원본영상에 amara를 사용해 직접 코멘트 및 전체 가사 번역한 한글자막을 달았습니다.</p>
<div class="amara-embed" data-url="http://www.youtube.com/watch?v=Zf8kX8SJVHg"
data-show-subtitles-default="true"
data-initial-language="ko"
data-team="null"> </div>
그럼 아래와 같이 자막이 씌워진 영상이 보입니다.
아쉬운 점이 있다면 태그가 제한적인건지 아예 기본적인 자막 태그가 안 먹는지 배경색 없애고 우하단 정렬같은 건 못하네요. 그래도 이렇게 현지화 가능한게 어딘가 싶습니다.
| 윈도우10 유용한 단축키 (0) | 2021.02.17 |
|---|---|
| 윈10 일어입력 시 ctrl / alt + caps lock으로 가나 전환안될 때 (0) | 2021.01.28 |
| Oracle VM VirtualBox에서 클립보드 공유 (0) | 2021.01.06 |
| 크롬,엣지 브라우저에서 특정 사이트 검색엔진으로 추가하기 (0) | 2020.08.31 |
| 윈도우10 파워쉘(PowerShell)을 이용한 파일일괄변경 (0) | 2020.08.27 |
1. Windows - Preferences
2. html files로 키워드 검색하여 Encoding 드랍다운박스에서 UTF-8 선택하여 Apply
(JSP는 jsp files로 검색)
3. 새 파일 생성하면 아래와 같이 기본 캐릭터셋이 UTF-8로 바뀐 걸 볼 수 있습니다.
(jsp 파일도 동일방법으로 설정가능)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
(...)| [PHP] 기초 스터디 내용 정리 (0) | 2022.04.12 |
|---|---|
| Oracle VM Virtual Box 포트포워딩하여 ssh접속 (0) | 2021.01.22 |
| 이클립스 단축키 (0) | 2017.07.04 |
| 정보처리 - 업무 프로세스 (0) | 2017.06.20 |
| 안드로이드 앱, 타이틀 바 없애기 (0) | 2017.06.08 |
1. User 생성
- create user 권한 소유자가 DB에 User 생성가능
SQL> conn sys/oracle as sysdba --- 관리자 계정 로그인
SQL> create user demo -- demo이름의 user계정생성
identified by demo; -- pw는 demo로 설정
SQL> conn demo/demo --- id/pw가 demo/demo인 계정으로 접속2. 권한 유형
- System권한 : DB조작권한 (소유자 DBA)
- Object 권한 : 오브젝트 조작권한 (소유자 Object 소유자)
* 테이블, 인덱스, 뷰, 시노님, 시퀀스를 객체 (또는 오브젝트) 라고 한다.
3. System 권한
- DB 조작권한으로 System 권한종류는 약 100여개
CREATE USER : 데이터 베이스 유저 생성 권한
CREATE SESSION : 데이터베이스 접속 권한
CREATE TABLE : 테이블 생성 권한
CREATE VIEW : view 생성 권한
CREATE SEQUENCE : sequence 생성 권한
SYSDBA : 데이터베이스 관리 최고 권한
(...등등)- SYSDBA가 모든 System권한 소유, SYSOPER는 관리권한 소유
DCL(Data Control Language)
데이터의 보안, 무결성, 회복, 병행 제어 등을 정의하는데 사용되는 언어
GRANT : 권한 부여를 위한 명령어
REVOKE : 권한 취소를 위한 명령어
사용자 등급 지정
|
1
|
GRANT 사용자등급 TO 사용자id리스트[IDENTIFIED BY 암호];
|
cs |
사용자 등급 해제
|
1
|
REVOKE 사용자등급 FROM 사용자id리스트;
|
cs |
테이블 및 속성에 대한 권한 부여
|
1
|
GRANT 권한종류 ON 개체 TO 사용자 [WITH GRANT OPTION];
|
cs |
* WITH GRANT OPTION : 부여받은 권한을 다른 사용자에게도 부여할 수 있는 권한을 부여
테이블 및 속성에 대한 권한 취소
|
1
|
REVOKE [GRANT OPTION FOR] 권한종류 ON 개체 FROM 사용자 [CASCADE];
|
cs |
* GRANT OPTION FOR : 다른 사용자에게 권한을 부여할 수 있는 권한을 취소
* CASCADE : 권한 취소 시, 권한을 부여받았던 사용자가 다른 사용자에게 부여한 권한도 연속적(CASCADE)으로 취소
* 자신에게 특정 권한이 없어지면 다른 사용자에게 그 권한을 부여할 수 없다.
REVOKE UPDATE ON 수강 FROM 김민희 CASCADE; 라고 명령을 내리면 '김민희' 사용자에게 UPDATE권한이 없어짐과 함께 다른 사용자에게 권한을 부여할 수 있는 권한, 권한을 부여받았던 사용자가 다른 사용자에게 부여한 권한도 연속적으로 취소된다.
* 다음에 주의
REVOKE GRANT OPTION FOR INSERT ON 강좌 FROM 김철수; 라고 하면 '김철수' 사용자의 INSERT 권한은 유지하면서 다른 사용자에게 권한을 부여할 수 있는 권한만 취소하는 것이다.
REVOKE GRANT OPTION FOR UPDATE ON 강좌 FROM 김철수 CASCADE;
'임꺽정' 유저에게 부여한 <강좌> 테이블의 권한 중 UPDATE 권한을 다름 사람에게 부여할 수 있는 권한과 이미 다른 사람에게 부여했던 권한도 함께 취소하며, 임꺽정 자신은 UPDATE 권한을 유지한다.
| [오라클 DB] DQL (0) | 2021.02.03 |
|---|---|
| MongoDB 기본 (0) | 2021.01.30 |
| [오라클 DB] DB접속 및 DCL (0) | 2021.01.05 |
| [오라클 DB] 설치 및 접속 (0) | 2017.07.08 |
| 데이터 베이스 기초 (0) | 2017.06.14 |
0. 데이터타입 기초
0-1) 비트 ( bit = binary degit )
- 이진수의 하나의 자릿수를 나타내며 0과 1을 의미
- 컴퓨터에서 0은 전류가 흐르지 않는 상태, 1은 그 반대이다.
또는 0은 거짓, 1은 참을 의미하기도 한다.
0-2) 진법 (Base N)
- 수를 셀 때, 자릿수가 올라가는 단위를 기준으로 하는 셈법의 총칭
- 일상에서 가장 보편적으로 사용하는 것은 10진법으로 (0~9의 범위를 가진다)
- 컴퓨터에서 사용하는 진법은 2진법으로 0과 1
- 8진법은 0~7, 16진법은 0~15까지의 수를 사용하는 진법이다.
단, 16진법은 9이후를 10으로 표기하지 않고 A로 표기한다. (A~F)
0-3) 진법 변환
- 10진법 -> 2진법 (소인수분해)
몫과 나머지를 쓰고 나머지를 마지막나머지 + 밑에서부터 차례대로 붙여가면 된다.
바꾼 값의 결과는 아래와 같으며 해당 수의 진법 표기는 괄호안에 적는다. (10)은 10진법 표기
13 (10) -> 01101 (2)
- 8진법 -> 10진법 (자릿수 변환)
0307 (8)
(3 x 82) + (0x81) + (7 x 80) = 199 (10) // 0승은 항상 1
0-4) 리터럴
소스코드에서 프로그래머에 의해 직접 입력된 값, 자바에서 실제 처리하는 데이터
1. 기본 데이터 타입
- 자바에서의 기본테이터 타입 (반대는 참조데이터 타입) 은 아래 8가지이다.
- 타입이름은 모두 소문자임에 유의
- 1Byte 는 8 bit이다.
즉 0000 0000(2) ~ 1111 1111(2) 의 값을 표현을 가진다.
1Byte 2Byte 4Byte 8Byte
(8bit) (16bit) (32bit) (64bit)
-----------------------------------------
정수형 byte short int long
실수형 float double
문자형 char --- 실제로 char(캐릭터) 타입은 정수형에 포함되나 이는 뒤에서 설명
논리형 boolean
char는 ushort, int, uint, long, uyong, float, double 또는 10진수로 암시적으로 변환될 수 있다. 그러나 다른 유형에서 char 유형으로의 암묵적 변환은 없다.
1) 정수형(Interger Type)
저장되는 값의 허용범위 (char타입은 음수값을 포함하지 않으므로 제외)
n = 메모리bit수 - 1 (ex : 8bit크기는 8 - 1 = 7)
-2^n ~ (2n-1)byte : -128 ~ 127 | 0포함, -2^7 ~ (2^7-1)
short : -32768 ~ 32,767
char : 0 ~ 65536 (유니코드) | 0 ~ (2^16-1)
int : 약 -21억 ~ 21억 | -2^31 ~ (2^31-1)
long : 약 -922경 ~ 922경
1-2) 정수 리터럴 표현
- 2진수 : 0b1011 (맨앞은 숫자 0)
- 8진수 : 013 (맨앞은 숫자 0)
- 10진수 : 365 (소수점없는 10진법 숫자)
- 16진수 : 0x3B0F (맨앞은 숫자 0)
- long타입 (기본적으로 자바 컴파일러는 정수 리터럴을 int타입으로 간주한다!)
long l = 12_345_678_999; // int타입으로 간주해서 타입이 맞지 않다는 에러 출력
long l = 12345678999L; // int타입 범위를 벗어나면 L을 붙여서 롱타입임을 알려줌, 에러 없음* 숫자밑에 _은 자릿수 구분을 위한 임의 표기로 에러사항이 아님
1-3) char타입
작은 따옴표로 감싼 형식을 쓰며 이것을 문자 리터럴이라고 한다.
문자 리터럴엔 유니코드값인 2byte크기 (0~65535)에 세계각국의 문자코드가 변환되어 저장된다.
유니코드 값은 크게 a, A, 0 값만 알고 있어도 유용하다.
char타입엔 아래와 같이 정수값을 저장해 쓸 수 있다.
char ch1 = 'A'; // unicode : 65
char ch2 = 65; // A와 같음
char ch3 = '0'; // unicode : 48
char ch4 = 48; // 문자 0과 같음
char ch5 = 'a'; // unicode : 97
char ch6 = '97';// a와 같음아래와 같이 16진수 표현 또는 유니코드 표현을 쓸 수도 있다.
char c1 = 0x0041; // 10진수값으로 65이며 unicode문자 A
char c2 = '\u0042'; // 문자 B또한 int타입 변수에도 저장할 수 있지만 이 때는 콘솔로 출력해보면 유니코드 값이 출력된다.
char ch1 = 'A'; // A출력
int i = 'A'; // 65출력2) 실수 타입
자바에서는 실수 연산은 기본적으로 double 타입으로 처리한다. (정수는 int)
따라서 float타입의 변수 선언 시 반드시 f를 붙여 float형으로 간주하도록 한다.
float f = 3.14f; // 대문자 F로도 표기 가능, f생략 시 컴파일 에러
실수 타입은 항상 정수보다 표현범위가 크다.
부동 소수점 방식으로 저장되어 더 큰 범위의 값을 저장할 수 있다.
float : (+/-) 1.4 x10−45 ~ (+/-) 3.4028235 x 1038
double : (+/-) 4.9 x10−324 ~ (+/-) 1.7976931348623157 x 10308
0.1 == 0.1f
실수저장방식인 부동소수점 방식이 0.1을 정확히 표현불가
0.1f는 0.1의 근사값 (.1.......) 따라서 0.1보다 큰값이 됨
2. 참조타입
Date today = new Date();데이터 클래스 타입의 참조형 변수 today선언
참조타입은 4byte를 가진다.
문자열을 저장가능한 String 타입또한 클래스 타입의 참조타입이다.
String str = "이것이 문자열입니다.";
| JAVA - getter, setter (0) | 2021.02.09 |
|---|---|
| JAVA - 파일 내 특정 문자열이 포함된 행을 제거 (0) | 2021.02.04 |
| 자바 - 식별자 (0) | 2021.01.06 |
| 자바 NIO 셀렉터 (0) | 2017.07.05 |
| Java Network 프로그래밍 기초 (0) | 2017.06.03 |
JAVA 8 (1.8) 버전이 오픈소스이므로 기본적으로 이 버전으로 구축한다.
- JDK(Java SE Development Kit 8 Downloads)를 OS환경에 따라 다운로드
기본적으로 자바와 JDK는 아래 경로에 설치된다.
C:\Program Files\Java
C:\Program Files\Java\jdk1.8.0_181\bin
커맨드 창을 열어 자바 버전과 컴파일러 버전을 확인해본다.
(윈도우 - 오른쪽 버튼 - 실행에서 cmd 입력)
C:\Users\rutel>java -version
C:\Users\rutel>javac -version
'javac'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다.
파일 위치 상관없이 모든 위치에서 자바 프로그램을 사용할수 있게 설정한다.
1) 탐색기 - 내PC - 오른쪽 버튼 - 속성 - 고급시스템설정 선택
2) 시스템 속성 - 고급 - 환경변수
3) 시스템 변수 - Path - 편집 - 새로만들기
C:\Program Files\Java\jdk1.8.0_181\bin
위와 같이 입력 후 확인
1) 탐색기 - 내PC - 오른쪽 버튼 - 속성 - 고급시스템설정
2) 시스템 속성 - 고급 - 환경변수
3) 시스템 변수 - 새로만들기
변수이름:CLASSPATH
변수값: .;C:\Program Files\Java\jdk1.8.0_181\lib\tools.jar
- 위와 같이 기입 후 확인
그 다음 커맨드 창에서 아래 명령어를 입력하면 정상적으로 자바 컴파일러 버전이 확인될 것이다.
C:\Users\rutel>javac -version
아파치 톰캣 다운로드 및 설치
https://tomcat.apache.org/
위 사이트에서 Download
Tomcat 8 - Core 를 OS환경에 따라 다운로드
Apache Tomcat® - Welcome!
The Apache Tomcat® software is an open source implementation of the Java Servlet, JavaServer Pages, Java Expression Language and Java WebSocket technologies. The Java Servlet, JavaServer Pages, Java Expression Language and Java WebSocket specifications ar
tomcat.apache.org
- 웹서비스 시작
C:\Program Files\Apache Software Foundation\Tomcat 8.0\bin
Tomcat8w - 오른쪽 버튼 - 관리자 권한으로 실행 -start/stop
내컴퓨터에 설치한 서버에 접속
아파치 톰캣 설치 시 기본 8080포트를 사용
웹서버에서 보여주는 페이지 위치
C:\Program Files\Apache Software Foundation\Tomcat 8.0\webapps\ROOT
- 통합개발환경(IDE) 이클립스 설치
다운로드 받은 파일을 압축 풀어넣기 한다.
- 작업공간 만들기
임의의 경로에 원하는 폴더 이름으로 만든다.
1) 이클립스 한글 환경설정 UTF-8
1-1) Window - Preferences 에서 아래 인코딩을 모두 UTF-8로 설정
General - Workspace -Text file encoding - Other UTF-8
General - Appearance - Colors and Fonts - Basic - Text font -Edit
Web - CSS Files - Encoding - ISO 10646/Unicode(UTF-8)
HTML Files - Encoding - ISO 10646/Unicode(UTF-8)
JSP Files - Encoding - ISO 10646/Unicode(UTF-8)
2) 아파치 톰캣 8 서버를 이클립스와 연동하기
2-1) 설치된 아파치 톰캣 서버를 중지한다.
2-2) 이클립스에서 File - New - Other - Server - Server -Next 선택
2-3) Apache - Tomcat v8.0 Server 선택
2-4) Tomcat installation directory: (경로지정)
C:\Program Files\Apache Software Foundation\Tomcat 8.0
- Next - finish하여 완료
3) 프로젝트 만들기
3-1) 오른쪽버튼 - New - Dynamic Web Project - Next -
JSPProject - Next - web.xml체크 finish
4) 서버와 프로젝트 연결
4-1) 하단 Servers 탭 선택
Tomcat v8.0 Server at localhost
4-2) 오른쪽 버튼 Add and Remove
4-3) 프로젝트 선택 Add - Finish
| [MAC] 프로젝트 별 노드버전 자동 관리 (0) | 2022.02.21 |
|---|---|
| npm i 안될때 해결법 (git repo관련오류) (0) | 2021.11.26 |
| VSCode 스크립트 실행 보안 오류 발생 시 해결법 (0) | 2021.10.07 |
| MYSQL 서버, 윈도우 설치 (0) | 2021.02.04 |
| 환경변수에 경로 추가하기 (윈10기준) (0) | 2021.02.04 |
https://rutel.tistory.com/309?category=605953
이클립스 웹(html+jsp) 개발환경 구축
JSP(Java Server Page) 설치 JAVA 개발을 할수 있는 자바개발툴 JDK https://www.oracle.com/java/technologies/ Top Downloads - Java SE - Java SE 8 https://www.oracle.com/java/technologies/javase-download..
rutel.tistory.com
<!DOCTYPE html>
<html>
<head>
<title>html 첫 시간</title>
</head>
<body>
<h1>html 첫 시간</h1>
<h2>HTML이란?</h2>
<p>
Hyper Text Markup Language의 약자.<br>
웹페이지를 만들어 주는(구조를 담당) 프로그램언어.<br>
명령어(tag)로 구성된다.
</p>
<p>
일반적으로는 tag는 각 괄호 안에 들어가고 시작 tag와 종료 tag 한 쌍으로 이루어지며<br>
원칙적으로 대소문자 구별은 없으나 소문자로 쓴다.<br>
소스상에서 공백처리는 줄바꿈 적용 불가하고<br>
문자 사이 띄우기는 한 개만 가능하다.
</p>
<p>
웹문서를 저장할 때 확장자는 .htm 또는 .html로 저장한다.<br>
한글을 포함하여 영문 이외의 특수문자 등을 제대로 나타내려면 인코딩은 UTF-8로 지정한다.
</p>
<hr>
<h2>웹문서를 구성하는 필수(기본) 태그들</h2>
<hr>
<pre>
<!DOCTYPE html> ----- 웹문서 버전을 브라우저에 알림
<html> ----- 웹문서 시작 선언
<head> ----- 웹문서 머리말 영역 시작 선언
사용자에 보이지않으나 여러 태그들 추가됨
<title> ... </title> ----- 웹문서 제목 지정 (브라우저 탭 부분)
</head> ----- 웹문서 머리말 영역 끝 선언
<body>
... ----- 사용자에게 보여질 컨텐츠 등을 지정함
</body>
</html> ----- 웹문서 끝 선언
</pre>
<hr>
hn(n=1~6)태그 - 제목글자 태그들
<hr>
<p>
글자는 두껍게(볼드체)로 나타나며
위아래에 한 줄 공백이 생긴다.
글자의 크기는 h1일 떄 가장 크고 점점 작아지다가 h6일 떄 가장 작다.
</p>
<h1>제목글자 태그 h1입니다.</h1>
<h2>제목글자 태그 h2입니다.</h2>
<h3>제목글자 태그 h3입니다.</h3>
<h4>제목글자 태그 h4입니다.</h4>
<h5>제목글자 태그 h5입니다.</h5>
<h6>제목글자 태그 h6입니다.</h6>
<!-- <h7>제목글자 태그 h7입니다.</h7> -->
<!-- <h8>제목글자 태그 h8입니다.</h8> -->
<!-- <h9>제목글자 태그 h9입니다.</h9> -->
<hr>
<h2>body(본문)을 구성하는 여러 태그들</h2>
<hr>
<p> <!-- 소스상의 공백은 브라우저에 영향을 못 미치나 작업자의 효율성을 위함임 -->
문단을 구성 <p><br>
줄 바꿈을 지정 <br><br>
수평선을 지정 <hr><br>
공백을 소스 그대로 살려줌 (고정폭 글꼴로 나타남) <pre>
</p>
<!-- 주석 태그입니다. -->
<h3>풀꽃</h3>
<pre> 나태주</pre>
<p>
자세히 보아야 예쁘다<br>
오래 보아야 사랑스럽다<br>
너도 그렇다
</p>
</body>
</html>
결과 미리보기 :
Hyper Text Markup Language의 약자.
웹페이지를 만들어 주는(구조를 담당) 프로그램언어.
명령어(tag)로 구성된다.
일반적으로는 tag는 각 괄호 안에 들어가고 시작 tag와 종료 tag 한 쌍으로 이루어지며
원칙적으로 대소문자 구별은 없으나 소문자로 쓴다.
소스상에서 공백처리는 줄바꿈 적용 불가하고
문자 사이 띄우기는 한 개만 가능하다.
웹문서를 저장할 때 확장자는 .htm 또는 .html로 저장한다.
한글을 포함하여 영문 이외의 특수문자 등을 제대로 나타내려면 인코딩은 UTF-8로 지정한다.
<!DOCTYPE html> ----- 웹문서 버전을 브라우저에 알림
<html> ----- 웹문서 시작 선언
<head> ----- 웹문서 머리말 영역 시작 선언
사용자에 보이지않으나 여러 태그들 추가됨
<title> ... </title> ----- 웹문서 제목 지정 (브라우저 탭 부분)
</head> ----- 웹문서 머리말 영역 끝 선언
<body>
... ----- 사용자에게 보여질 컨텐츠 등을 지정함
</body>
</html> ----- 웹문서 끝 선언
hn(n=1~6)태그 - 제목글자 태그들
글자는 두껍게(볼드체)로 나타나며 위아래에 한 줄 공백이 생긴다. 글자의 크기는 h1일 떄 가장 크고 점점 작아지다가 h6일 떄 가장 작다.
문단을 구성 <p>
줄 바꿈을 지정 <br>
수평선을 지정 <hr>
공백을 소스 그대로 살려줌 (고정폭 글꼴로 나타남) <pre>
나태주자세히 보아야 예쁘다
오래 보아야 사랑스럽다
너도 그렇다
<!DOCTYPE html>
<!--html5버전 (현재 웹표준)의 문서임을 선언 -->
<html>
<head>
<meta charset="UTF-8">
<title>html 두번째</title>
</head>
<body>
<hr>
<h1>글자의 형태와 관련된 태그들</h1>
<hr>
볼드체 <b>글자를 두껍게</b> -- <b>태그<br>
볼드체 <strong>(중요한 내용) 글자 두껍게</strong> -- <strong>태그<br>
이탤릭 <i>글자를 기울여서</i> -- <i>태그<br>
이탤릭 <em>(강조의 의미) 글자를 기울여서</em> -- <em>태그<br>
<small>작은 글자</small> -- <small>태그<br>
2<sup>2</sup><sup>태그<br>
H<sub>2</sub>O<sub>태그<br>
마크<mark>(형광펜)</mark> 효과<br>
<h3>동시 적용 시의 올바른 문법</h3>
<p>
1. <mark><b>마크펜 효과 + 볼드체</b></mark> 동시 <br>
2. <b><mark>마크펜 효과 + 볼드체</mark></b> 동시 <br>
<!-- 3. <b><mark>마크펜 효과 + 볼드체</b></mark> 동시 = x<br> -->
<!-- 4. <mark><b>마크펜 효과 + 볼드체</mark></b> 동시 = x<br> -->
<!-- 시작과 종료태그를 서로 감싸듯이 쓴다. 엇갈리게 쓰면 틀림 -->
</p>
<h3>특수문자를 나타내는 특수문자 태그들<sup>(&로 시작하고 ;로 끝남)</sup></h3>
1.예약어 관련 특수문자 태그들
<small>(html문서에서 특별한 약속이 되어있는 문자를 예약이라 함)</small> <br>
& = &amp; <br>
< = &lt; <br>
> = &gt; <br>
(공백) = &nbsp;
<hr>
© = &copy; <br>
™ = &trade; <br>
® = &reg; <br>
</hr>
</body>
</html>
결과 미리보기 :
볼드체 글자를 두껍게 -- <b>태그
볼드체 (중요한 내용) 글자 두껍게 -- <strong>태그
이탤릭 글자를 기울여서 -- <i>태그
이탤릭 (강조의 의미) 글자를 기울여서 -- <em>태그
작은 글자
-- <small>태그
22<sup>태그
H2O<sub>태그
마크
(형광펜)
효과
1.
마크펜 효과 + 볼드체
동시
2. 마크펜 효과 + 볼드체 동시
1.예약어 관련 특수문자 태그들
(html문서에서 특별한 약속이 되어있는 문자를 예약이라 함)
& = &
< = <
> = >
(공백) =
© = ©
™ = ™
® = ®
결과 미리보기 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>list - 목록 만들기</title>
</head>
<body>
<hr>
<h1>list - 목록 만들기</h1>
<hr>
<!-- 제목글자 2번째 크기 -->
<h2>목록의 종류</h2>
<p>
순서 있는 목록 <ol><br>
순서 없는 목록 <ul><br>
정의 목록 <dl><br>
</p>
<hr>
<h2>ol - 순서 있는 목록</h2>
<!-- orderd list -->
<ol>
<li>coffee</li>
<li>tea</li>
<li>milk</li>
<li>juice</li>
<li>cocoa</li>
</ol>
<ol>
<li>red</li>
<li>green</li>
<li>blue</li>
</ol>
<ol>
<li>html</li>
<li>css</li>
<li>JS</li>
</ol>
<!-- 순서 없는 목록 -->
<ul>
<li>coffee</li>
<li>tea</li>
<li>milk</li>
<li>juice</li>
<li>cocoa</li>
</ul>
<ul>
<li>red</li>
<li>green</li>
<li>blue</li>
</ul>
<ul>
<li>html</li>
<li>css</li>
<li>JS</li>
</ul>
<hr>
<h3>목록 앞의 모양을 지정하는 속성 - type</h3>
<h4>ol의 모양 지정 속성값들 ( type="<mark>1/a/A/i/I</mark>" )</h4>
<ol type="1">
<li>1 (기본값)</li>
<li>a</li>
<li>A</li>
<li>i</li>
<li>I</li>
</ol>
<ol type="a">
<li>1 (기본값)</li>
<li>a</li>
<li>A</li>
<li>i</li>
<li>I</li>
</ol>
<ol type="A">
<li>1 (기본값)</li>
<li>a</li>
<li>A</li>
<li>i</li>
<li>I</li>
</ol>
<ol type="i">
<li>1 (기본값)</li>
<li>a</li>
<li>A</li>
<li>i</li>
<li>I</li>
</ol>
<ol type="I">
<li>1 (기본값)</li>
<li>a</li>
<li>A</li>
<li>i</li>
<li>I</li>
</ol>
<h4>ul의 모양 지정 속성값들 ( type="<mark>disc/circle/square</mark>" )</h4>
<ul type="disc">
<li>disc</li>
<li>circle</li>
<li>square</li>
</ul>
<ul type="circle">
<li>disc</li>
<li>circle</li>
<li>square</li>
</ul>
<ul type="square">
<li>disc</li>
<li>circle</li>
<li>square</li>
</ul>
<hr>
<h4>start속성으로 시작 기호(숫자) 값 바꾸기</h4>
<ol type="I" start="11">
<li>html</li> <!-- 로마자 11부터 시작 -->
<li>css</li>
<li>JS</li>
</ol>
<hr>
<h2>하위 목록 지정하기</h2>
<hr>
<ul>
<li>html
<ol>
<li>tag</li>
<li>속성</li>
<li>속성값</li>
</ol>
</li>
<li>css
<ul>
<li>selector</li>
<li>속성</li>
<li>속성값</li>
</ul>
</li>
<li>JS</li>
</ul>
<h5>문제, 하위목록 만들기</h5>
<ol>
<li>coffee
<ul type="square">
<li> 아메리카노 </li>
<li> 카페라떼 </li>
<li> 카푸치노 </li>
</ul>
</li>
<li>tea
<ul>
<li> 녹차 </li>
<li> 홍차 </li>
</ul>
</li>
</ol>
<hr>
<h2>dl (Description List) - 정의 목록</h2>
<dl>
<dt>dl</dt>
<dd>정의 목록</dd>
</dl>
<dl>
<dt>ol</dt>
<dd>순서가 있는 목록</dd>
</dl>
<pre>
정의목록(dl)은 li를 쓰지 않고
<dt> - 정의 내릴 대상
<dd> - 정의 내용
를 쓴다.
</pre>
<dl>
<dt>ol</dt>
<dd>순서 있는 목록</dd>
<dt>ul</dt>
<dd>순서 없는 목록</dd>
</dl>
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language의 약자.</dd>
<dd>웹페이지를 만들어 주는 프로그램언어.</dd>
<dd>웹페이지 구조를 담당</dd>
</dl>
</body>
</html>결과 미리보기 :
순서 있는 목록 <ol>
순서 없는 목록 <ul>
정의 목록 <dl>
정의목록(dl)은 li를 쓰지 않고
<dt> - 정의 내릴 대상
<dd> - 정의 내용
를 쓴다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table - 표 만들기</title>
<style type="text/css">
talbe, th, td { border:1px solid #69f; }
</style>
</head>
<body>
<hr>
<h1>table - 표 만들기</h1>
<table>
<tr>
<th>태그</th>
<th>설명</th>
</tr>
<tr>
<td>table</td>
<td>표 전체를 구성하는 태그</td>
</tr>
<tr>
<td>tr</td>
<td>줄을 구성하는 태그</td>
</tr>
<tr>
<td>th</td>
<td>제목칸 구성하는 태그</td>
</tr>
<tr>
<td>td</td>
<td>(일반)칸 구성하는 태그</td>
</tr>
</table>
</body>
</html>표에 관한 스타일은 head태그내에서 css를 통해 지정한다.
결과 미리보기 :
| 태그 | 설명 |
|---|---|
| table | 표 전체를 구성하는 태그 |
| tr | 줄을 구성하는 태그 |
| th | 제목칸 구성하는 태그 |
| td | (일반)칸 구성하는 태그 |
| WebRTC 및 Node 등 스터디 (0) | 2022.02.25 |
|---|---|
| Spring Boot시작하기 (0) | 2021.08.10 |
| 반응형 웹 만들기 (0) | 2017.03.23 |
| HTML 5 미지원 브라우저 고려하기 (0) | 2017.03.21 |
| 윈도우 웹서버 설치 및 HTML 실습기초 (0) | 2017.03.09 |
0. 샘플 소스
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
function fun1() {
alert("안녕 자바스크립트");
return;
}
function fun2(money) {
alert("받은 동전 : " + money)
return;
}
function fun3(money) {
alert("무료음료수 전달")
return "커피";
}
function fun4(a, b) {
alert("받은 동전" + a + b);
alert("음료수 선택");
return "사이다";
}
</script>
<body>
<h1>WebContent/js1/test3.html</h1>
<input type="button" value="출력버튼" onclick="fun1()">
<input type="button" value="값을 받아서 뽑기출력버튼" onclick="fun2(500)">
<input type="button" value="무료음료수받기" onclick="alert('전달받은 음료수: ' + fun3() )">
<input type="button" value="음료수받기" onclick="alert('받은 음료수: ' + fun4(500, 100) )">
</body>
</html>위의 funtion 인 fun4에서 "받은 동전" + a + b와 같이 쓰면 문자열로 서로 연결된다.
이를 피하고 a와 b변수의 값을 더하고자 한다면 아래와 같이 수정한다.
function fun4(a, b) {
alert("받은 동전" + (a + b) );
alert("음료수 선택");
return "사이다";
}
1. 가변인자를 통한 함수 정의
(...)
<script type="text/javascript">
// 입력받은 값 평균 구하기
function fun4(...args) {
let res = 0;
for (let i = 0; i < args.length; i++) {
res += args[i];
}
avg = res / args.length;
return avg;
}
</script>
(...)
<input type="button" value="두수합리턴받아서 평균 구하기"
onclick="alert('리턴받은값 : ' + fun4(10, 20) )">
2. 내장함수
: 자바스크립트에서 기본적으로 제공하는 함수
ex) alert, confirm 등
1) alert
- alert는 리턴값이 없고 사용자에게 팝업창으로 알려주는 역할
var a = alert("메시지");
alert(a);- 리턴값이 없으므로 undefined 메시지가 뜸
2) confirm
- 사용자가 확인 / 취소를 선택할 수 있는 팝업을 제공
var r = confirm('확인/취소 선택하세요');
alert(r);- 확인 시 true, 취소 시 false를 리턴
3) prompt
- 사용자에게서 입력받은 값을 반환, 입력값은 문자로 인식
var v = prompt("입력하세요", "입력란");
alert(v);alert(v + 100); // 문자열로 더해져서 출력됨
alert(v * 100); // 곱하기는 숫자로 인식
4) parseInt
- 숫자 정수로 변환하는 함수
alert(parseInt(v) + 100); 5) isNaN
- 숫자 / 문자열인지 판별하는 함수로 문자이면 true, 숫자면 false반환
(문자열과 숫자가 함께 포함되면 문자로 인식)
var isString = isNaN(v);
if (isString) {
alert ('문자를 입력하셨습니다');
}
else {
alert ('숫자를 입력하셨습니다');
}
| [JavaScript] Proxy (0) | 2024.04.03 |
|---|---|
| [JavaScript] 기본 (0) | 2021.10.18 |
| 자바스크립트 - 의사 결정 (0) | 2017.03.28 |
| 자바 스크립트 기초 - 함수, 메서드, 객체 (0) | 2017.03.27 |
장치-클립보드 공유에서 양방향 또는 필요에 따라 선택
| 윈10 일어입력 시 ctrl / alt + caps lock으로 가나 전환안될 때 (0) | 2021.01.28 |
|---|---|
| amara를 통해 유튜브영상에 자막 달기 (0) | 2021.01.16 |
| 크롬,엣지 브라우저에서 특정 사이트 검색엔진으로 추가하기 (0) | 2020.08.31 |
| 윈도우10 파워쉘(PowerShell)을 이용한 파일일괄변경 (0) | 2020.08.27 |
| 파이널 판타지9 모그리모드와 한패 결합법 (3) | 2020.08.14 |