Copy Coding

이번 프로젝트는 화면을 JSP로 구현하는 사이트에서 일을 하게 되었습니다. form:form tag도 있지만 예전 방식을 사용하는 곳이라 값을 가져오는 방법에 대해서 정리를 해보았습니다. tag들이 여러 개지만 가장 많이 사용하는 것을 기존으로 정리해봅니다.

value 또는 text를 가져오는 방법과 id, class, name으로 가져오는 방법을 정리했습니다.

설명은 필요 없을 듯 하여 그냥 소스와 결과만 기록 합니다.

예제로 사용한 form 태그의 모습입니다.

1. input tag

- input 사용 방법

- input value 가져오기

//id 로 값 가져오기

var inputId = $('#input_id').val();

//class 로 값 가져오기

var inputClass = $('.input_class').val();

//name으로 값 가져오기

var inputName = $('input[name=input_name]').val();

- input 결과

input val : ss12/ss12/ss12

2. textarea

- textarea 사용 방법

- textarea value 가져오기

//id 로 값 가져오기

var textareaId = $('#textarea_id').val();

//class 로 값 가져오기

var textareaClass = $('.textarea_class').val();

//name으로 값 가져오기

var textareaName = $('textarea[name=textarea_name]').val();

- textarea 결과

textarea val : text0

area0/text0

area0

3. select

- select 사용 방법

<option value="s1">select1</option>

<option value="s2">select2</option>

<option value="s3">select3</option>

</select>

- select value 가져오기

//id 로 값 가져오기

var selectId = $('#sel_id').val();

//class 로 값 가져오기

var selectClass = $('.sel_class').val();

//name으로 값 가져오기

var selectName = $("select[name='sel_name']").val();

- select text 가져오기

//id 로 값 가져오기

var selIdTxt = $("#sel_id option:selected").text();

//class 로 값 가져오기

var selTxt = $(".sel_class option:selected").text();

//name으로 값 가져오기

var selNameTxt = $("select[name='sel_name'] option:selected").text();

Select value : s2/s2/s2

Select text : select2/select2/select2

4. radio

- radio 사용 방법

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio1"> radiooo

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio2"> radiiii

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio3"> raddddd

- radio value 가져오기

//id 로 값 가져오기

var radioId = $("#ra_id:checked").val();

//class 로 값 가져오기

var radioClass = $('.ra_class:checked').val();

//name으로 값 가져오기

var radioName = $("input[name='ra_name']:checked").val()

- radio 결과

Radio value : radio2/radio2/radio2

5. checkbox

- checkbox 사용 방법

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk01">Check01

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk02">Check02

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk03">Check03

- checkbox value 가져오기

두가지 방법

var value_Store = [];

$.each($("input[name='chk_name']:checked"), function() {

value_Store.push($(this).val());

});

console.log("Checkbox value : " + value_Store.join(", "));

value_list = []

$("input[name='chk_name']:checked").each(function(){

var checked_value = $(this).val();

value_list.push(checked_value)

});

- checkbox 결과

Checkbox value : chk01, chk03

Checkbox value : chk01,chk03

web 화면과 console 결과화면 입니다.

전체 소스

<head>

<title>form value</title>

</head>

<body>

<table>

<tr>

<td>Input </td>

</tr>

<tr>

<td>Textarea </td>

</tr>

<tr>

<td>Select</td>

<td>

<option value="s1">select1</option>

<option value="s2">select2</option>

<option value="s3">select3</option>

</select>

</td>

</tr>

<tr>

<td>Radio</td>

<td>

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio1"> radiooo

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio2"> radiiii

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio3"> raddddd

</td>

</tr>

<tr>

<td>Checkbox</td>

<td>

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk01">Check01

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk02">Check02

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk03">Check03

</td>

</tr>

<tr>

</tr>

<tr>

<td><button onclick="btnClick();"> button </button></td>

</tr>

function btnClick() {

//id 로 값 가져오기

var inputId = $('#input_id').val();

//class 로 값 가져오기

var inputClass = $('.input_class').val();

//name으로 값 가져오기

var inputName = $('input[name=input_name]').val();

console.log("input val : " + inputId +"/"+ inputClass +"/"+ inputName);

//id 로 값 가져오기

var textareaId = $('#textarea_id').val();

//class 로 값 가져오기

var textareaClass = $('.textarea_class').val();

//name으로 값 가져오기

var textareaName = $('textarea[name=textarea_name]').val();

console.log("textarea val : " + textareaId +"/"+ textareaClass +"/"+ textareaName);

//id 로 값 가져오기

var selectId = $('#sel_id').val();

//class 로 값 가져오기

var selectClass = $('.sel_class').val();

//name으로 값 가져오기

var selectName = $("select[name='sel_name']").val();

console.log("Select value : " + selectId +"/"+ selectClass +"/"+ selectName);

//text값 가져오기

//id 로 값 가져오기

var selIdTxt = $("#sel_id option:selected").text();

//class 로 값 가져오기

var selTxt = $(".sel_class option:selected").text();

//name으로 값 가져오기

var selNameTxt = $("select[name='sel_name'] option:selected").text();

console.log("Select text : " + selTxt +"/"+ selIdTxt +"/"+ selNameTxt);

//id 로 값 가져오기

var radioId = $("#ra_id:checked").val();

//class 로 값 가져오기

var radioClass = $('.ra_class:checked').val();

//name으로 값 가져오기

var radioName = $("input[name='ra_name']:checked").val()

console.log("Radio value : " + radioId +"/"+ radioClass +"/"+ radioName);

// checkbox

var value_Store = [];

$.each($("input[name='chk_name']:checked"), function() {

value_Store.push($(this).val());

});

console.log("Checkbox value : " + value_Store.join(", "));

value_list = []

$("input[name='chk_name']:checked").each(function(){

var checked_value = $(this).val();

value_list.push(checked_value)

});

console.log("Checkbox value : " + value_list);

}

</script>

</body>

</html>

- copy coding -

저작자표시 비영리 변경금지 (새창열림)

'Java' 카테고리의 다른 글

Java JDBC Batch 프로그램 sample (0)	2024.03.04
HTML form tag 값 설정하기 정리 (0)	2024.01.28
[Java] stream과 filter 이용 List, Map 에서 필요 데이터 추출 (0)	2022.10.01
java 폴더와 파일 목록 출력 (2)	2022.08.29
삼항 연산자, 조건 연산자, 물음표(?) 조건문 정리 (0)	2022.04.27

OpenGL ES의 glClearColor()를 이용하여 배경색을 칠하는 간단한 테스트입니다.

glClearColor 함수 정의는 아래와 같습니다.

void glClearColor(           GLfloat red,
          GLfloat green,
          GLfloat blue,
          GLfloat alpha);

초기값은 모두 0이며 값을 넣어주면 Color Buffers를 입력한 값으로 채워서 색상을 표시합니다. 값의 범위는 0~1 사이 값을 입력합니다.

혼자 사용하지 않고 glClear() 함수와 함께 사용해야 반영됩니다.

void glClear(GLbitfield mask);

glClear()의 mask 값은 아래에 있는 값을 사용합니다.

GL_COLOR_BUFFER_BIT	입력된 color buffer 표시
GL_DEPTH_BUFFER_BIT	입력된 depth buffer 표시
GL_STENCIL_BUFFER_BIT	입력된 stencil buffer 표시

사용되는 목적에 따라 골라서 사용하면 됩니다.

예제를 만들기 위해 사용되는 파일은 설정파일 1개와 java 파일 3개입니다.

AndroidManifest.xml

MainActivity.java

MyGLRenderer.java

MyGlSurfaceView.java

다른 파일들은 수정하지 않기 때문에 4개의 파일만 설명합니다.

최종 결과물은 아래와 같은 화면이 나옵니다.

AndroidManifest.xml 파일에 사용하는 OpenGL ES 버전을 기록합니다.

<uses-feature android:glEsVersion="0x00020000" android:required="true" />

0x00020000 을 입력하여 OpenGL ES 2.0 버전을 사용할 수 있도록 합니다.

MyGLRenderer.java 파일을 생성하고 GLSurfaceView.Renderer를 상속받습니다.

실제 이미지를 그리는 파일로 3개의 기본 함수를 추가합니다.

@Override

    public void onSurfaceCreated(GL10 gl, EGLConfig config) {

        GLES20.glClearColor(1.0f, 0.0f, 0.0f, .2f); //red

    }



    @Override

    public void onSurfaceChanged(GL10 gl, int width, int height) {

        GLES20.glViewport(0, 0, width, height);

    }



    @Override

    public void onDrawFrame(GL10 gl) {

        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);



    }

onSurfaceCreated() : 최초 생성시 설정 값을 정하는 함수로 빨간색을 버터에 넣습니다.

onSurfaceChanged() : 변경사항이 발생할 때마다 호출되며 변경작업을 진행하는 함수입니다.

onDrawFrame() : 변경된 부분을 새로 그리는 함수입니다.

최초 빨강색을 화면가득 채워서 보여주는 작업이 계속 진행 됩니다.

이제 화면을 그릴 GLSurfaceView를 상속받은 MyGlSurfaceView.java 파일을 생성합니다.

그리고 Context를 받는 생성자를 하나 만들어 줍니다.

private MyGLRenderer myGLRenderer;
public MyGlSurfaceView(Context context) {
    super(context);

    setEGLContextClientVersion(2);
    myGLRenderer = new MyGLRenderer();
    setRenderer(myGLRenderer);
    setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
}

setEGLContextClientVersion(2) : OpenGL ES 2.0 context를 생성합니다.

setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY):surface가 생성되었을 때 렌더링을 합니다.

MainActivityh.java에서 모바일 화면에 보여주는 작업만 하면 됩니다.

GLSurfaceView glSurfaceView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

//        setContentView(R.layout.activity_main);



        glSurfaceView = new MyGlSurfaceView(this);

        setContentView(glSurfaceView);

    }

기존 layout을 사용하지 않고 새로 생성한 MyGlSurfaceView를 화면에 보여주면 완료됩니다.

- copy coding -

저작자표시 비영리 변경금지 (새창열림)

'OpenGL' 카테고리의 다른 글

Android OpenGL ES 3.0 Cube 직육면체 그리기(java 버전) (0)	2023.12.05
Android OpenGL ES 3.0 Square 사각형 그리기(java 버전) (0)	2023.11.28
Android OpenGL ES 3.0 Triangle 삼각형 그리기(java 버전) (0)	2023.11.25

카카오톡을 이용하다 보면 컴퓨터 화면 우측에 갑자기 팝업 광고가 뜨는 경우가 있습니다.

카톡을 하려고 프로그램을 클릭하다 잘못 클릭하여 광고를 클릭하는 경우도 있습니다.

위와 같이 카톡 프로그램 하단에 보이는 광고와 화면 우측에 뜨는 팝업 광고 차단 방법입니다.

개발자들은 기본적으로 알고 있는 방법이라 새로울 건 없지만 소개를 해봅니다.

윈도우 검색창에서 [메모장]으로 검색을 합니다.

검색을 안해도 나오는 경우도 있지만 자주 사용하지 않았다면 검색을 해야 합니다.

검색된 메모장을 [관리자 권한으로 실행]을 해야 합니다.

메모장에 마우스를 대고 오른쪽 버튼을 클릭 하면 팝업 메뉴가 나오는데 맨 상단에 있는 [관리자 권한으로 실행]을 클릭합니다.

메모장이 실행되면 파일을 하나 불러와야 합니다.

메뉴에서 파일 > 열기 를 선택 합니다.

그리고 C:\Windows\System32\drivers\etc 위치로 폴더를 이동합니다.

C:\Windows\System32\drivers\etc 폴더에 가면 hosts 라는 파일이 있습니다. 이 파일을 [열기] 버튼을 이용하여 열어봅니다.

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:

# localhost name resolution is handled within DNS itself.
# 127.0.0.1 localhost
# ::1 localhost
127.0.0.1 display.ad.daum.net

그리고 맨 화단에 한 줄을 다음과 같이 추가합니다.

127.0.0.1 display.ad.daum.net

추가가 되었으면 파일 > 저장 메뉴를 이용하여 저장을 합니다.

메모장을 관리자권한으로 열지 않았다면 저장을 할 수 없습니다.

저장을 하고 나면 보안 프로그램이 설치되어 있는 경우 안내 팝업 창이 나타납니다.

저는 안랩 V3가 설치되어 있는 경우이고 다른 보안프로그램은 다른 모양의 안내 팝업이 나타나거나 안나타날 수도 있습니다.

[아니오] 버튼을 클릭하여 변경된 내용을 반영합니다. 그리고 카카오톡을 보면 아래와 같이 광고가 사라져있습니다.

이렇게 하면 광고를 받아오는 주소를 내 컴퓨터로 설정 하여 광고를 받아오지 못하게 하는 방법입니다.

모바일에서는 일정시간 동안 광고가 안보이도록 하는 기능이 있지만 차단하는 기능은 없습니다.

카카오톡 사이트에 방문해서 찾아보면 광고를 차단하는 기능은 없다고 나와있습니다.

보기 싫은 광고를 안보이도록 하는 건 가능 하지만 광고가 안보이게는 할 수 없습니다.

다행히 PC 버전에서는 위와 같은 방법으로 광고를 차단할 수 있습니다.

- copy coding -

저작자표시 비영리 변경금지 (새창열림)

'Etc' 카테고리의 다른 글

[꿈해몽 모음] 용, 이무기 관련 꿈 해몽 (0)	2023.04.12
[C++] undefined reference to `XXXClass::XXXClass()' (0)	2022.06.26
[꿈해몽 모음] 개구리 두꺼비 꿈 해몽 (0)	2022.06.18
[꿈해몽 모음] 고래, 상어, 연어, 문어 등 꿈 해몽 (0)	2022.02.21
Docker에 CentOS 7 설치 (Windows 10) (0)	2022.01.17

Nginx를 설치하기 위해 검색을 하면 두개의 사이트가 보입니다.

하나는 https://www.nginx.com/ 이고 다른 하나는 https://nginx.org/ 인데 첫번째 주소는 제품군에 대한 소개 사이트이고 프로그램 다운로드를 위해서는 두번째인 https://nginx.org/ 사이트에 접속해야 합니다.

사이트는 텍스트로만 이루어져 있고 우측 메뉴에서 [download]를 클릭합니다.

아니면 처음부터 https://nginx.org/en/download.html 이 주소를 입력하여 사이트로 이동해도 됩니다.

이 주소는 오늘 설명할 윈도우에 설치하는 파일을 다운로드 할 수 있는 곳이고 리눅스 설치 버전을 다운 받으려면 https://nginx.org/en/linux_packages.html 이곳으로 가면 됩니다.

다운로드 페이지 상단에는 2개의 최신 버전이 제공됩니다.

Mainline version은 현재 작업중인 진짜 최신 버전이고 Stable version은 안정성이 확인된 차상위 버전입니다.

오늘 주제가 “nginx 어디까지 왔나”가 아니므로 Stable version을 다운로드 받습니다.

다운로드 할때도 2개가 있어서 어느 것을 다운받아야 할지 고민하게 되는군요.

nginx-1.24.0 이건 소스 코드이고 tar로 압축되어 있습니다.

nginx/Windows-1.24.0 이게 윈도우에서 바로 사용할 수 있는 응용 프로그램입니다. 이걸 받으면 됩니다.

심심한데 두개를 다 받아서 압축을 풀어서 비교해보면

서로 파일 내용이 다른걸 확인할 수 있습니다.

이것으로 설치가 완료됩니다. 그냥 적당한 폴더를 찾거나 생성해서 압축을 풀어주면 됩니다.

Nginx 파일을 실행하기 위해 마우스로 더블클릭 해봅니다.

아무것도 보이지 않으면 정상적으로 실행된 것입니다.

[작업관리자]를 띄웠다면 앱 영역이 아닌 백그라운드 프로세스에서 찾아야 합니다.

소리소문 없이 실행을 하고 있습니다.

진짜 잘 실행을 하고 있는지 확인을 하기 위해 웹브라우져를 하나 열고 127.0.0.1을 입력해 봅니다.

위와 같은 화면을 볼 수 있다면 정상적으로 작동하고 있는 것입니다.

어떻게 설정이 되어있어서 화면을 볼 수 있는지 환경설정을 알아보겠습니다.

conf 폴더 아래의 nginx.conf 파일을 열어 봅니다.

server {
        listen       80;
        server_name localhost;

        #charset koi8-r;

        #access_log logs/host.access.log main;

        location / {
            root   html;
            index index.html index.htm;
        }

대부분 주석 처리가 되어있는데 server라는 항목을 보면

listen 80은 port 번호입니다. web 기본 포트로 설정이 되어있군요.

server_name localhost는 url로 127.0.0.1이 되겠죠.

조금 아래에 location이 보입니다.

/ : URL을 127.0.0.1(localhost)로 들어오면

root html; html 이라는 폴더가 메인이라는 것이고

index index.html index.htm; 이건 첫 페이지는 index.html 또는 index.htm 이라는것입니다.

http://127.0.0.1 또는 http://localhost로 접속하면 html 폴더에 있는 index.html 파일을 보여주라고 되어 있습니다.

한번 그 위치가 어디인지 찾아봅니다.

대충 알것 같습니다. nginx.exe 파일을 기준으로 html 폴더와 그 내부에 index.html 파일이 보이는군요.

좀더 테스트를 위해 일단 nginx를 종료해봅니다.

필수적인 명령어는 다음과 같습니다.

X:\>nginx : nginx 시작
X:\>nginx -s quit : nginx 종료
X:\>nginx - stop : nginx 강제 종료
X:\>nginx - reload : nginx 설정파일 다시 불러오기로 종료 후 재시작

nginx -s quit 명령을 이용하여 종료합니다.

그리고 nginx.conf 파일을 수정합니다.

server {
        listen       80;
        server_name localhost;

        #charset koi8-r;

        #access_log logs/host.access.log main;

location / {
            root   html;
            index index.html index.htm;
        }

location /login/ {
            root   D:\workspace\main;
        }

수정된 nginx.conf에 맞추어 폴더와 파일을 생성합니다.

[D:\workspace\main + /login/ + file 명] 이렇게 폴더 구조와 파일을 만들면 되겠네요.

http://127.0.0.1/login/login.html

login.html 파일 내용도 추가합니다.

이제 nginx를 다시 실행해 봅니다.

C:\Users\USER\Downloads\nginx-1.24.0>nginx

오류 없이 실행이 되었습니다.

웹브라우져에서 확인해 봅니다. http://127.0.0.1/login/login.html 을 입력합니다.

잘 나오는군요.

- copy coding -

저작자표시 비영리 변경금지 (새창열림)

'Setting' 카테고리의 다른 글

Intel HAXM is required to run this AVD. HAXM is not installed (0)	2024.10.01
Visual Studio Code 한글 깨짐 물음표로 나올때 (0)	2024.03.10
crontab 사용방법 정리 (0)	2022.08.22
[Spring Boot] 외부 WAS용 War 배포 (JEUS 8) (2)	2021.11.20
Tmax JEUS 8 설치 및 샘플 서버 실행 (0)	2021.11.12

Copy Coding

전체 글

HTML form tag에서 value text 가져오기 정리

1. input tag

2. textarea

3. select

4. radio

5. checkbox

'Java' 카테고리의 다른 글

Android OpenGL glClearColor 함수로 배경 칠하기

'OpenGL' 카테고리의 다른 글

카카오톡 PC에서 광고 차단 하기

'Etc' 카테고리의 다른 글

Nginx 1.24.0 windows에 설치 및 간단한 설정

'Setting' 카테고리의 다른 글

+ Recent posts

티스토리툴바