AWS EC2를 이용해

회원가입을 구현해 보았다!

DB는 FireBase를 이용하여 실시간으로 데이터를 전송한다.

서버 : aws ec2

db : firebase

사용 툴 : vs code

'IT > Amazon Web Services' 카테고리의 다른 글

[Firebase 연동] 실시간 데이터 베이스 입력  (0) 2019.09.10

모달을 띄워서 티스토리에서 

심리테스트를 만들어 보고자 했는데

 

웹에서는 되는데 모바일 환경에서는 다 깨지는 문제가있다.

웹 버전
예상 모바일 버전
실제로 모바일에서 보이는 화면

 

엄 왜그러지?

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

    <style>
        /* The Modal (background) */
        .modal {
            display: none;
            /* Hidden by default */
            position: fixed;
            /* Stay in place */
            z-index: 1;
            /* Sit on top */
            left: 0;
            top: 0;
            width: 100%;
            /* Full width */
            height: 100%;
            /* Full height */
            overflow: auto;
            /* Enable scroll if needed */
            background-color: rgb(0, 0, 0);
            /* Fallback color */
            background-color: rgba(0, 0, 0, 0.4);
            /* Black w/ opacity */
        }

        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 50%;
            /* Could be more or less, depending on screen size */
        }

        /* The Close Button */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
    <!--추가 코드-->
    <script type="text/javascript">
        $(document).ready(function () {
            // DOM 생성 완료 시 화면 숨김 (파라미터로 전달되는 id는 제외)
            hideExclude("changeM");
            // radio change 이벤트
            $("input[name=radioName]").change(function () {
                var radioValue = $(this).val();
                if (radioValue == "M") {
                    hideExclude("changeM");
                } else if (radioValue == "F") {
                    hideExclude("changeF");
                }
            });
            // 서버에서 전달 받은 값으로 radio 버튼 변경
            $("#changeUpdateRadio").click(function () {
                var resultValue = $("#radioId").val();
                $("input[name=radioName][value=" + resultValue + "]").attr("checked", true);
            });
            // 체크 되어 있는지 확인
            var checkCnt = $("input[name=radioName]:checked").size();
            if (checkCnt == 0) {
                // default radio 체크 (첫 번째)
                $("input[name=radioName]").eq(0).attr("checked", true);
            }
        });
        // text area 숨김
        function hideExclude(excludeId) {
            $("#changeTextArea").children().each(function () {
                $(this).hide();
            });
            // 파라미터로 넘겨 받은 id 요소는 show
            $("#" + excludeId).show();
        }
    </script>
    <!-- 추가 코드 끝-->
</head>

<body>

    <!-- Trigger/Open The Modal -->
    <button id="myBtn">심리테스트 시작</button>

    <!-- The Modal -->
    <div id="myModal" class="modal">

        <!-- Modal content -->
        <div class="modal-content">
            <span class="close">&times;</span>
            <!-- 추가 -->
            <div id="radioArea">
                <input type="radio" name="radioName" value="M" />남자
                <input type="radio" name="radioName" value="F" />여자
            </div>

            <input type="hidden" id="radioId" value="F">

            <br /><br />

            <div id="changeTextArea">
                <div id="changeM">
                    <span>당신은</span>
                    <p>남자라고 생각하시는군요?</p>
                </div>
                <div id="changeF">
                    <span>당신은</span>
                    <p>여자라고 생각하시는군요?</p>
                </div>
            </div>
            <!-- 추가 코드 끝 -->

        </div>

    </div>
    <script>
        // Get the modal
        var modal = document.getElementById('myModal');

        // Get the button that opens the modal
        var btn = document.getElementById("myBtn");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks on the button, open the modal 
        btn.onclick = function () {
            modal.style.display = "block";
        }

        // When the user clicks on <span> (x), close the modal
        span.onclick = function () {
            modal.style.display = "none";
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }

        $(document).ready(function () {

            // 라디오버튼 클릭시 이벤트 발생
            $("input:radio[name=radio]").click(function () {

                if ($("input[name=radio]:checked").val() == "남자") {
                    $("div").attr("disabled", false);
                    // radio 버튼의 value 값이 1이라면 활성화

                } else if ($("input[name=radio]:checked").val() == "여자") {
                    $("input:text[name=text]").attr("disabled", true);
                    // radio 버튼의 value 값이 0이라면 비활성화
                }
            });
        });
    </script>
</body>

</html>

'IT' 카테고리의 다른 글

티스토리 게시글 js 및 css 관련  (0) 2019.08.31
[2019] 개발자 로드맵-한국어 번역  (0) 2019.08.30
[컨퍼런스] KT s/w developer  (0) 2019.08.28
[IDE] 툴 부터 바꿔보자 !  (0) 2019.08.28
[오라클] 일별/월별 게시판 게시글수  (0) 2019.08.19
스프링 맵핑!~  (0) 2019.07.24

 

'IT' 카테고리의 다른 글

티스토리 게시글 js 및 css 관련  (0) 2019.08.31
[2019] 개발자 로드맵-한국어 번역  (0) 2019.08.30
[컨퍼런스] KT s/w developer  (0) 2019.08.28
[IDE] 툴 부터 바꿔보자 !  (0) 2019.08.28
[오라클] 일별/월별 게시판 게시글수  (0) 2019.08.19
스프링 맵핑!~  (0) 2019.07.24

이 장소를 Daum지도에서 확인해보세요.
서울특별시 서초구 양재2동 | 더케이호텔 서울
도움말 Daum 지도

'IT' 카테고리의 다른 글

티스토리 게시글 js 및 css 관련  (0) 2019.08.31
[2019] 개발자 로드맵-한국어 번역  (0) 2019.08.30
[컨퍼런스] KT s/w developer  (0) 2019.08.28
[IDE] 툴 부터 바꿔보자 !  (0) 2019.08.28
[오라클] 일별/월별 게시판 게시글수  (0) 2019.08.19
스프링 맵핑!~  (0) 2019.07.24

KT S/W Developer Conference 2019 에서 IBM 공진기 님이 제안해주신

Blockers 부수기! 첫단계인 툴부터 바꾸기에 동참하기로 마음먹었당

 

너무 늦게 도착해서 맨뒤에 앉느라

화질은 별로였지만 ㅎㅎ. ...

아톰이나 비쥬얼코드는 사용해 본적 있지만 

이번기회에 파이참과 인텔리제이를 접해보기로 했다

심심해서 파이썬을 접해보기로 마음먹었당

 

학교계정으로 학생 인증받아서

 

1년 무료 !@

갱신해서 사용가능하다는데 아직 모르겠다

 

+ 추가로 인텔리제이도 만져보기로한다!

 

같은 JB라 무료 체험(?) 이 가능하다

 

이클립스 쓰다 인텔리제이로 넘어가면

 

신세계라는데 넘기대된당

 

'IT' 카테고리의 다른 글

[2019] 개발자 로드맵-한국어 번역  (0) 2019.08.30
[컨퍼런스] KT s/w developer  (0) 2019.08.28
[IDE] 툴 부터 바꿔보자 !  (0) 2019.08.28
[오라클] 일별/월별 게시판 게시글수  (0) 2019.08.19
스프링 맵핑!~  (0) 2019.07.24
SQL 정리 - Group by / having  (0) 2019.04.16

/* 일별 게시판 게시글수 */

select 
    TO_CHAR(BF_REG_DATE, 'YYYYMMDD') as 날짜,
    count(*) as 게시글수
from 
    board_free
where
    BF_REG_DATE >='20180101' and BF_REG_DATE < to_char(sysdate,'YYYYMMDD')
GROUP BY
    to_char(bf_reg_date, 'YYYYMMDD');

/* 월별 게시글 수 */

select 
    TO_CHAR(BF_REG_DATE, 'YYYYMM') as 날짜,
    count(*) as 자유게시글수    
from 
    board_free 
where
    BF_REG_DATE >='20180101' and BF_REG_DATE < to_char(sysdate,'YYYYMMDD')
GROUP BY
    to_char(bf_reg_date, 'YYYYMM');

'IT' 카테고리의 다른 글

[컨퍼런스] KT s/w developer  (0) 2019.08.28
[IDE] 툴 부터 바꿔보자 !  (0) 2019.08.28
[오라클] 일별/월별 게시판 게시글수  (0) 2019.08.19
스프링 맵핑!~  (0) 2019.07.24
SQL 정리 - Group by / having  (0) 2019.04.16
TCP/IP] OSI 7계층  (0) 2019.03.19

맥 os+ window 

 

이것저것 협업시 인코딩이 깨지는 일이 많아서 

 

 

기록! 

 

잊지말자 utf-8 !

 

 

project 우클릭 > properties (Alt + Enter)

 

 

상단 Window > Preferences > Workspace > General > Text file encoding

 

 

 

상단 Window > Preferences > Workspace > Web > CSS Files

 

 

상단 Window > Preferences > Workspace > Web > HTML Files

 

 

상단 Window > Preferences > Workspace > Web > JSP Files

 

 

 

상단 Window > Preferences > Workspace > XML> XML Files

'IT > Spring' 카테고리의 다른 글

[STS] 스프링 인코딩 설정  (0) 2019.08.03

출처 : https://naradesign.github.io/article/media-query.html

 

CSS3 미디어쿼리 @media 규칙 이해.

출력 장치의 여러 특징 가운데 일부를 참조하여 CSS 코드를 분기 처리함으로써 하나의 HTML 소스가 여러가지 뷰를 갖도록 구현할 수 있는 명세이다. 일반적으로 뷰포트 해상도에 따라 CSS 코드를 분기한다. CSS 코드 내부에서 분기하는 방법 CSS 코드 내부에서 사용하는 미디어 쿼리의 기본적인 문법 예는 다음과 같다. 일반적으로 권장하고 널리 쓰이는 방식이다. @media only all and (조건문) {실행문} @media: 미디어 쿼리가 시작됨을

naradesign.github.io

 

 

@charset "utf-8";

/* All Device */
모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨.

/* Mobile Device */
768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.

/* Tablet &amp; Desktop Device */
@media all and (min-width:768px) {
    사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다.
}

/* Tablet Device */
@media all and (min-width:768px) and (max-width:1024px) {
    사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.
}

/* Desktop Device */
@media all and (min-width:1025px) {
    사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다.
}

 

+ Recent posts