개발자의 개발 블로그

<input>의 경우 input 뒤에 한 칸 띄우고 속성을 작성했다.

하지만, Jade의 경우 

<>를 안쓰기 때문에 속성을 어디에 넣어야하는지 난감했다.

하지만 방법은 있었다.

태그명 뒤에 괄호()를 넣어 그 안에 속성을 넣을 수 있다.

placeholder를 사용하고 싶었기 때문에 다음과 같이 작성했다.

input(placeholder="Search for...").input#inputWord

또한 콤마를 이용하여 여러개의 속성도 역시 사용이 가능하다

input(placeholder="Your name" name="username" value=username)

[이벤트(Event) 시스템(System)]

유저가 웹브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(Event)라 부른다.

- 버튼을 클릭했을 때, onclick

- 버튼을 두번 클릭했을 때,

- 버튼에 마우스 커서를 올렸을 때, 

- input 창에 값이 바뀔 때,

등등 수많은 이벤트가 존재한다.

HTML 이벤트와 비교해서 리액트에서 이벤트 사용시 주의 사항

1. camelCase를 사용한다.

HTML에서는 onclick, onkeyup과 같이 소문자로 작성했다. 

하지만, React에서는 camelCase를 쓴다. 

camelCase란 여러 단어가 붙여지는 변수 선언시 첫 단어를 대문자 처리하는 것이다.

onClick, onKeyUp으로 사용한다. 

2. 이벤트에 실행할 자바스크립트 코드를 전달하지 않고, 함수 형태의 값을 전달한다.

HTML에서는 

<button onclick= "alert('Clicked')">클릭</button>와 같이 

onclick 안에 자바스크립트 코드가 들어가지만, React에서는 

 <button onClick= { () => {

            this.setState({

              number: this.state.number+22

            })

          }

        }

        >Plus 22

        </button>

와 같이 함수 형태로 전달한다. 물론, 외부에 미리 함수를 만들어서 전달해도 된다.

3. DOM 요소에서만 이벤트를 설정할 수 있다. 

- 직접 만든 컴포넌트는 이벤트를 자체적으로 설정할 수 없다

- 우리가 만든 컴포넌트에 이벤트를 달게 되면, 이름으로 설정되어 props값을 전달하게 된다.

- 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정할 수는 있다.

이벤트 처리 방법

1.함수를 직접 기입하기

2. 함수를 외부에 선언 후, 함수 호출하기

이 코드는 매우 짧아서 못 느끼겠지만,

길어지게 되면 아래 코드가 더욱 간결 & 깔끔하며 가독성이 높아진다는 것을 알 수 있다.

[input 여러 개 핸들링]

인풋이 여러개면, 메소드를 인풋 개수만큼 만들어야할까?

그럼 매우 비효율적일 것이다. 바로 event 객체를 활용하는 것이다.

input의 이름(name)속성을 이용하여 이벤트 핸들러에서 e.target.name을 사용할 수 있다.

        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()함수가 실행되게 된다. 

<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 문장 안에 인용구가 있을 경우 q 엘리먼트는 사용한다.

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

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

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

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

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

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

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

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

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

블록 엘리먼트

- 독립적이다.

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

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

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

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

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

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

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

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

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

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

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

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>

위 문장 처음부터 끝까지 전체를 엘리먼트(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 >)

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

홈페이지를 만들다보니 SQL문을 종종 짜야할 때가 있다.

이번에는 게시물 하단에 LIST를 구현하는데, 해당 게시물을 중심으로 -5개부터 +5개를 만들었다.

이 경우 어떤 범위 내에 값을 DB로부터 끌고와야 하는데, 이 역할을 하는 문법이 바로 BETWEEN이다

단어의 뜻을 알면 당연하다.

WHERE id BETWEEN 시작값 AND 끝값

이렇게 작성하면 DB에 저장된 id값들 중 시작값부터 끝값까지 조건에 맞는 값만 추출해낼 수 있다.

만약,  현재 보고있는 게시물을 중심으로 5번째 이전 게시물부터 5번째 이후 게시물까지 보고싶다면

$sql01 = 'select * from student_table where id between ' .$bno. '-5 and ' .$bno.'+5';

이렇게 작성하면 된다. 이 문장의 의미는

student_table 테이블에서 id 속성을 현재 글 번호 bno에서 -5한 값부터 +5한 값까지 불러오는 코드다.

이렇게 하면 해당 게시물을 기준으로 상단, 하단으로 5개씩 리스트가 생기게 된다.

참고로, echo에서 php 변수를 HTML 태그와 혼용하는 경우에는 다음과 같이 작성한다

echo "<b>{$title}</b>";

이렇게 하면 title 변수를 b태그 처리 한 뒤, echo로 출력해준다.

자바스크립트와 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값이 들어가게 된다.

중앙에 오게 하기 위해 많이 시도했지만, 개념이 부족하여 실패했다.

검색한 결과, 생각보다 간단했다.

margin:0 auto;

이 코드를 스타일에 넣어주면 그만이다.

여기서 0 auto 는 "0 auto 0 auto" 의 의미라고 할 수 있다..

패딩 또는 마진을 값을 지정할 때, 상하좌우 4가지 방향으로 각각 설정할 수 있다.

순서는 블럭의 상단 --> 우측 --> 하단 --> 좌측이다. 즉, 시계 방향으로 돌아간다고 생각하면 쉽다.

반복되는 값이라면 줄여서 "5px 10px" 이라고 할 수 있다. 이는 5 10 5 10과 같이 2번 반복되는 것이다.

마찮가지로 상하좌우 모두 동일한 값으로 4번 반복된다면 "5px" 하나만 쓰면 된다.

즉, "0 auto" 는 상단과 하단은 여백을 주지 말고, 좌측과 우측의 여백을 자동으로(auto) 주라는 것이다.

이렇게 하면 내용물이 페이지에 중앙에 배치되는 것을 볼 수 있다.