textarea에 글 내용 길이 구하기 & 빈 값인지 체크하기

개발/자바스크립트 2017. 8. 22. 12:16

        if(document.getElementById("sample_txt").value.length == 0) {

           document.getElementById("add_file").style.display = "none";

        }


일단, if 조건문에 들어간 


document.getElementById("sample_txt").value.length


이 바로 sample_txt라는 ID를 갖은 Textarea의 길이를 구하는 문법이다.

자바스크립트에서는 document.getElementById으로 아이디를 구할 수 있다.


참고로, if문 안에서 실행되는  내용은


add_file이라는 ID를 갖은 엘리먼트를 사라지게(display=none) 만드는 코드이다.

정리하면,

sample_txt의 내용이 비었다면 add_file가 사라지도록 만드는 코드이다.

이것을 


window.onload = function()

      {

        loadContent();

      }


이러한 함수를 만들어 window.onload에 넣고 실행을 한다면, 

해당 페이지가 실행되자마자 loadContent()함수가 실행되게 된다. 



'개발 > 자바스크립트' 카테고리의 다른 글

[자바스크립트] for .. in 루프  (0) 2017.09.14
[자바스크립트] 데이터 타입 변환하기~  (0) 2017.09.14
[자바스크립트] ES6에서 변수와 리터럴 상수 등 사용 방법과 개념  (0) 2017.09.13
자바스크립트 변수를 form 태그의 value로 어떻게 보내나요??  (1) 2017.07.24
[Javascript] for in 반복문  (0) 2016.09.16
Posted by sungho88
,

Textarea 글 입력 시 비정상적인 커서 문제

개발/HTML 2017. 8. 22. 01:04


<textarea id="txt" rows="0" cols="0">

<?php echo "글을 입력하세요."?>

</textarea>


이렇게 작성을 하면, 깔끔해보이고 좋다. 

하지만, 인터넷 익스플로러에서는 오류가 발생한다.

바로 글 입력 후 키보드에서 손을 떼면 다음 줄로 이동, 다시 누르면 그 다음줄에 글이 입력된다.

즉, 두줄에 한 번만 입력된다. 아래 그림과 같은 형태로 글이 작성된다.(엔터를 누르지 않았음에도..)



ㅁㄴㅇㄹ


ㅁㄴㅇㄹ


ㅁㄴㅇㄹ


ㅁㄴㅇㄹ


ㅁㄴㅇㄹ


ㅁㄴㅇㄹ



<textarea id="txt" rows="0" cols="0"><?php echo "글을 입력하세요."?></textarea>


이렇게 붙여쓰면 오류가 사라지게 된다.


개행뿐만 아니라 커서의 위치가 Textarea 중간에 가있는 현상 역시 위와 같은 문제이다.


따라서, 붙여서 쓰면 문제가 해결된다.




https://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_html&wr_id=13451

https://okky.kr/article/292680


이 두 사이트에서 답을 찾았다.

검색어는 Textarea 빈값

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

[HTML] 비주얼 스튜디오 코드에서 HTML 브라우저로 실행하기  (0) 2018.05.01
HTML5에서 텍스트 관련 태그 설명 모음  (0) 2017.09.07
[HTML] q 태그의 사용법과 엘리먼트의 종류  (0) 2017.08.04
[HTML] a 태그 사용법과 href의 상대 경로 지정하기  (0) 2017.08.04
HTML의 기본적인 개념 정리  (0) 2017.08.04
Posted by sungho88
,

[HTML] q 태그의 사용법과 엘리먼트의 종류

개발/HTML 2017. 8. 4. 01:46

HTML 문장 안에 인용구가 있을 경우 q 엘리먼트는 사용한다.

쌍따옴표("")로 감싸여져서 보여지지만, 브라우저마다 다르다. (기울임체 또는 들여쓰기 등등...)

어쨋거나 이 태그를 사용하는 것은 좀더 의미를 두기 위해서이다.



<blockquote> 태그 역시 동일하게 인용구를 보여주는 기능을 수행하는데, 차이점은 다음과 같다.


<q> : 짧고 핵심적인 인용구를 작성하는데 적합(즉, 짧은 인용구)

<blockquote> : 완전한 문단을 인용하는데 적합(즉, 긴 인용구)  들여쓰기가 되어 가독성이 높아짐.

<em> : 문구 인용, 단어를 강조하고자 한다면 em 엘리먼트를 사용.


1. 블록 엘리먼트(Block Element)

2. 인라인 엘리먼트(Inline Element)

3. 빈 엘리먼트(Empty Element) : br, img 등등...


블록 엘리먼트

- 독립적이다.

- 시작과 끝이 분명하게 정해져있고, 그 안에 콘텐츠를 갖고 있다.


인라인 엘리먼트는 텍스트의 흐름 내부에 정해진다.

빈 엘리먼트는 <br>이 대표적이다 : 라인 브레이크의 의미만 갖을 뿐 아무런 기능. 의미가 없는 태그

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

HTML5에서 텍스트 관련 태그 설명 모음  (0) 2017.09.07
Textarea 글 입력 시 비정상적인 커서 문제  (0) 2017.08.22
[HTML] a 태그 사용법과 href의 상대 경로 지정하기  (0) 2017.08.04
HTML의 기본적인 개념 정리  (0) 2017.08.04
Chorme에서 Textarea 크기 조절 막아버리기~  (0) 2017.03.06
Posted by sungho88
,

[HTML] a 태그 사용법과 href의 상대 경로 지정하기

개발/HTML 2017. 8. 4. 01:03

<a href="./content.html" style="font-weight:bold;">A태그입니다</a>


a 엘리먼트 : 다른 페이지와 연결되는 링크를 생성하기 위해 사용.
<a>와</a>안에 작성된 "A태그입니다"는 라벨 역할을 수행하여 여기에 링크가 걸리게 됨.

즉 , A태그입니다를 클릭했을 떄, content.html로 이동함. 
href 속성은 브라우저에게 링크의 목적지를 알려줌. (속성은 엘리먼트를 커스터마이즈하기 위해 사용)
href : hypertext reference의 약자
경로가 변경되었다면, 이미지 등이 깨져서 나오게 된다. 파일의 경우 404 에러가 발생한다(파일 못 찾음
이 경우에는 정확한 경로를 작성해줘야한다.
해당 HTML 파일과 동일한 폴더에 있다면 위와 같이 작성하면 되지만, 어떤 폴더에 하위로 들어갔다면 그 경로를 정확히 기입해주어야 파일을 찾을 수 있다.

aa 폴더 안에 index.html파일이 존재한다. sub01.html이 aa폴더에 존재한다면 

href="./sub01.html" 로 쓰면되지만,


aa 폴더 안에 bb 폴더 안에 존재하는 sub02.html의 경우에는 


href="/bb/sub02.html" 으로 지정해주어야 한다.


반대로 상위(부모) 폴더로의 이동은 즉, sub02.html에서 index.html로 이동하기 위해서는 


href="../index.html" 으로 작성하면 된다.


참고로 .. 은 상위(부모) 폴더로의 이동을 의미하며, / 는 경로의 각 부분을 구분한다.


이것이 바로 상대 경로(Relative Path)이다.


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

Textarea 글 입력 시 비정상적인 커서 문제  (0) 2017.08.22
[HTML] q 태그의 사용법과 엘리먼트의 종류  (0) 2017.08.04
HTML의 기본적인 개념 정리  (0) 2017.08.04
Chorme에서 Textarea 크기 조절 막아버리기~  (0) 2017.03.06
HTML 태그에서 띄어쓰기는 어떻게 할까?  (0) 2017.01.31
Posted by sungho88
,

HTML의 기본적인 개념 정리

개발/HTML 2017. 8. 4. 00:38

HTML : HyperText Markup Language 


[웹 서버]

- 웹 브라우저의 요청(Request)을 기다리는 하나의 컴퓨터라고 할 수 있다.

- 웹 서버는 브라우저의 요청에 따라 웹 브라우저에게 응답(Response)을 하는 역할을 한다.

- 24시간 쉬지않고 작동해야만 한다.

- 웹 서버는 HTML 파일이나 각종 리소스들을 저장하고 있다.


[웹 브라우저]

- 브라우저에서 어떤 사이트를 열때는, 웹 서버에 해당 HTML 페이지를 요청해야한다.

- HTML은 브라우저에게 웹 페이지의 구조와 내용에 대해 알려준다.


요즘 에디터들은 자동 완성 기능이 훌륭하다.

아톰(Atom) 같은 경우, 확장자를 .html로 하면 HTML로 인식하여 여러 단축키를 사용할 수 있다.

html파일에 html이라 입력을 하게 되면 


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

  </head>

  <body>


  </body>

</html>

이렇게 자동으로 html 태그 구조가 생성된다.

<> 안에 오는 단어 또는 문자를 태그(Tag)라 부른다.
태그 : 브라우저에게 작성한 텍스트의 구조와 의미에 대해 알려준다.

- HTML 문서에 적힌 탭, 리턴, 개행 등 대부분의 공백을 무시한다.

매칭 태그: 시작태그와 종료태그가 존재하는 태그
Ex)
<html> </html> : 이 파일이 html 파일이라고 명시하는 태그
<head> </head> : 타이틀 등 웹 페이지에 관련된 정보를 포함 
<body> </body> : 웹 페이지의 모든 내용과 구조를 포함. 사용자의 눈에 보이는 웹 페이지의 내용.

<title> 안녕하세요. 반갑습니다. </title>


위 문장 처음부터 끝까지 전체를 엘리먼트(Element)라 부르며, 이 경우 title 엘리먼트로 부름.


<style> 엘리먼트는 HTML 태그 내에 head태그 안에 위치해야 함.

<style type="text/css">

또한 type이라는 속성을 갖음. 이것은 스타일의 종류를 브라우저에게 알리는 역할.

즉, CSS를 사용할 것이므로 위와 같이 작성

속성(Attribute) : 엘리먼트에 대한 추가적인 정보를 제공해주는 것.


CSS란?

HTML이 홈페이지의 구조만을 표현하는데 사용되지만, (홈페이지 구조 설계 = 개발)

CSS는 홈페이지의 스타일을 입히는데 사용됨. (홈페이지 꾸미기 = 디자인에 가까움)


정리


1. HTML과 CSS는 웹 페이지를 만들기 위해 사용하는 언어

2. 웹 서버는 HTML과 CSS로 만들어진 웹 페이지들을 저장하고 서비스를 제공하기 위한 용도.

3. 브라우저는 웹 페이지를 요청하여 HTML과 CSS를 기반으로 콘텐츠를 표현함.

4. HTML은 웹 페이지를 구조화하는데 사용

5. CSS는 Cascading Style Sheet의 약자. HTML의 디자인 스타일을 제어하는데 사용.

6. 엘리먼트는 시작태그, 콘텐츠, 종료태그 세 가지로 구성됨.(예외도 존재 : <img >)


///////////////////////////////////////////////////////////////////////////////////////////////////////////////////


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

[HTML] q 태그의 사용법과 엘리먼트의 종류  (0) 2017.08.04
[HTML] a 태그 사용법과 href의 상대 경로 지정하기  (0) 2017.08.04
Chorme에서 Textarea 크기 조절 막아버리기~  (0) 2017.03.06
HTML 태그에서 띄어쓰기는 어떻게 할까?  (0) 2017.01.31
HTML 내용물 가운데 정렬하기  (0) 2017.01.23
Posted by sungho88
,

자바스크립트 변수를 form 태그의 value로 어떻게 보내나요??

개발/자바스크립트 2017. 7. 24. 19:52

자바스크립트와 PHP 그리고 HTML을 혼용하다보니 헷갈린다.

자바스크립트로 구한 변수 값을 form 태그를 통해 다른 파일로 보내서 그곳에서 처리하게 하려고 하니 모르겠다.


검색을 해 본 결과는 다음과 같다.


<script> 

count_num="12345"; 

document.login_form.form_name.value=count_num;

</script> 


<form method="post" name="login_form" action="http://love.com/test.php"> 

<input type="hidden" name="form_name" value=""> 

<input type="button" name="dd" value="submit" onclick=login_form.submit();> 

</form>


이렇게 하면, 빈 value에 스크립트 내 count_num값이 들어가게 된다.

'개발 > 자바스크립트' 카테고리의 다른 글

[자바스크립트] for .. in 루프  (0) 2017.09.14
[자바스크립트] 데이터 타입 변환하기~  (0) 2017.09.14
[자바스크립트] ES6에서 변수와 리터럴 상수 등 사용 방법과 개념  (0) 2017.09.13
textarea에 글 내용 길이 구하기 & 빈 값인지 체크하기  (0) 2017.08.22
[Javascript] for in 반복문  (0) 2016.09.16
Posted by sungho88
,

[유니티] 유니티에서 씬(Scene) 전환 방법

개발/Unity & C# 2017. 6. 1. 18:52

일단, 가장 단순하게 버튼 하나를 생성하고 그 버튼을 눌렀을 때 다른 씬으로 넘어가도록 하려고 한다.

한 가지 기능씩 구현해나가며 익숙해지려고 한다.


1. 버튼을 만들어야 한다.


GameObject - UI - Button으로 생성한다.

이상한 위치에 가있으므로 버튼의 위치를 0 0 0 으로 초기화(Reset)시킨다.


2. 다음으로 C# 스크립트를 하나 생성한다.


프로젝트 뷰 - Create - C# Script를 클릭하여 파일을 생성한 후 이름을 원하는 이름으로 변경해준다.


※내가 겪은 주의 할 점 두 가지


1) 생성 직후 이름을 변경하는 것은 문제가 없으나, 추후에 변경할 경우 스크립트에 있는 클래스명은 변하지 않으므로 스크립트를 열어 클래스명도 동시에 수정해줘야한다.


2) 씬을 변환해주는 이미 내장된 클래스명이 SceneManager이므로 이 클래스명은 사용하지 말아야한다. SceneManager가 명확한 파일명이 될 수 있지만, 이렇게 이름을 지을 경우 SceneManager의 본래의 내장된 기능을 사용할 수 없게된다.


어쨋든, 스크립트를 생성하면 열은 뒤, 씬을 변경하는데는 Start()함수와 Update()함수는 필요하지 않다.

씬을 변경하는 작업만 할 것이므로 삭제한다.

그 다음에 임의로 메소드 하나를 생성한다. 나는 ButtonClick이라는 이름으로 만들었다.


그 메소드에는 SceneManager.LoadScene("Play");만 써주면 된다.

아 그 전에 SceneManager를 사용하기 위해서는  맨 위에


using UnityEngine.SceneManagement;


을 한줄 추가해주어야 한다. SceneManagement를 사용하겠다는 정의이다.

LoadScene()함수는 이름에서도 알 수 있듯이 씬을 로드해오는 기능을 갖은 함수이다.

매개변수로 string으로 불러오고자 하는 씬명(Scene Name)을 작성해주면 끝~~


전체 코드는 다음과 같다.


using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.SceneManagement;


public class SceneChanger : MonoBehaviour

{

    public void ButtonClick()

    {

        SceneManager.LoadScene("Play");

    }

}

 


예전 방식으로 씬을 불러오기 위해서는 

Application.LoadLevel("Play"); 를 사용했다.

더이상 사용하지 않도록 하자.  물론 지금 사용해도 에러.오류는 나지 않지만, 경고가 뜬다. 


application.loadlevel is obsolete. Use SceneManager.LoadScene.


그러므로, SceneManager.LoadScene("")을 사용하는 것을 권장한다.


'개발 > Unity & C#' 카테고리의 다른 글

[Unity] 유니티 C#에서 다른 스크립트 변수 사용하는 방법  (0) 2017.10.31
[Unity] NGUI에서 패스워드 입력 별표(*) 표시하기  (0) 2017.10.18
[Unity] Facebook 연동하기 02) Facebook에서 새 앱 추가해서 앱 ID 받기  (0) 2017.10.18
[Unity] Facebook 연동하기 01) SDK 유니티에 연결하기  (0) 2017.09.26
[C#] Console.WriteLine() 함수의 사용법  (0) 2017.04.18
Posted by sungho88
,

[C#] Console.WriteLine() 함수의 사용법

개발/Unity & C# 2017. 4. 18. 23:12

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;


namespace ConsoleApplication2

{

    class Program

    {

        static void Main(string[] args)

        {


            Console.WriteLine("Hello 월드!");

            Console.WriteLine("Hello 월드!");

            Console.WriteLine("Hello 월드!");


            Console.Write("Hello");

            Console.Write("Hello");

            Console.Write("Hello");

        }

    }

}


WriteLine() 함수도 텍스트를 출력하는 함수이고,

Write() 함수 역시 동일한 함수이다.


하지만, 차이점은

WriteLine() 함수는 출력한 뒤에 개행이 이뤄지지만,

Write() 함수의 경우 개행되지 않는다.


따라서, 위 예제를 실행하면 결과는 다음과 같다.




'개발 > Unity & C#' 카테고리의 다른 글

[Unity] 유니티 C#에서 다른 스크립트 변수 사용하는 방법  (0) 2017.10.31
[Unity] NGUI에서 패스워드 입력 별표(*) 표시하기  (0) 2017.10.18
[Unity] Facebook 연동하기 02) Facebook에서 새 앱 추가해서 앱 ID 받기  (0) 2017.10.18
[Unity] Facebook 연동하기 01) SDK 유니티에 연결하기  (0) 2017.09.26
[유니티] 유니티에서 씬(Scene) 전환 방법  (0) 2017.06.01
Posted by sungho88
,

Chorme에서 Textarea 크기 조절 막아버리기~

개발/HTML 2017. 3. 6. 23:52

<textarea style="resize: none;"></textarea>


묻고도 따지지도 않습니다.


크롬에서는 Textarea창을 사용자가 조절할 수 있도록 해줍니다.


하지만, 이러한 기능을 원치 않는다면 위와 같이 스타일을 


추가해줍니다. 그러면 고정이 되는 것을 볼 수 있을 것입니다.


크기 조절을 어떻게 하냐구요?


rows="5" cols="80" 


이렇게~~


rows는 줄 즉 세로의 길이를 지정(몇 줄 쓰고 줄바꿈할꺼냐)

cols는 칸 즉 가로의 길이를 지정(한줄에 몇 자나 쓸꺼냐)


 

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

[HTML] a 태그 사용법과 href의 상대 경로 지정하기  (0) 2017.08.04
HTML의 기본적인 개념 정리  (0) 2017.08.04
HTML 태그에서 띄어쓰기는 어떻게 할까?  (0) 2017.01.31
HTML 내용물 가운데 정렬하기  (0) 2017.01.23
<a>태그에서 confirm 함수 사용하는 방법  (1) 2017.01.20
Posted by sungho88
,

HTML 태그에서 띄어쓰기는 어떻게 할까?

개발/HTML 2017. 1. 31. 20:41

태그내에서는 공백(띄어쓰기)나 줄바꿈 같은 것들은 무시된다.( 한 번은 된다)


그럼 공백을 어떻게 해야 인지를 할까?


줄 바꿈의 경우 <br> 태그를 사용하며,


공백의 경우 &nbsp;  를 입력해주면 된다.


주의할점은 세미클론;을 붙이지 않으면 앞 5글자가 문자열이 되어버려 문자로 출력되게 된다.

너무나 간단하지만, 모르면 헷갈리는 것이다.



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

HTML의 기본적인 개념 정리  (0) 2017.08.04
Chorme에서 Textarea 크기 조절 막아버리기~  (0) 2017.03.06
HTML 내용물 가운데 정렬하기  (0) 2017.01.23
<a>태그에서 confirm 함수 사용하는 방법  (1) 2017.01.20
HTML form에서 submit버튼 중복 방지  (0) 2017.01.08
Posted by sungho88
,

티스토리툴바