profile
움직이는 만큼 행복해진다

meta태그 Content-Security-Policy

소위 CSP라 불리기도 하는 Content-Security-Policy 메타 태그에 대해 알아보자이 태그의 목적은 xss로 웹에 허용되지 않은 script를 삽입하거나 외부페이지로 부터 HTTP요청을 보내는 것을 막을 수 있도록 Response header에 마련된 정

2023년 1월 6일
·
0개의 댓글
·

HTML meta tag

HTML head에 위치한meta 태그에 대해 알아보자meta라는 것은 어떤 것의 부가적인 의미를 갖는다HTML문서에 대한 정보인 메타데이터를 정의할 때 사용한다사실 이 메타태그에 대한 포스팅을 쓰게 된 이유는 줌인, 줌아웃을 막는 것을 할 수 있다는 것을 알게 되었기

2022년 7월 27일
·
0개의 댓글
·
post-thumbnail

HTML table element

내가 지금까지 들었던 강의 중에선 table을 쓰는 강의가 하나도 없었지만 오래된 책이나 회사웹사이트에선 종종 보이는 것 같다.이번 기회에 table, tr, td, th 같은 table 관련 element를 정리해보자https://youtu.be/XUTFXu

2021년 11월 16일
·
0개의 댓글
·
post-thumbnail

HTML title attribute

버튼 같은 곳에 마우스를 올리면 나오는 설명을 쉽게 달 수 있는 방법이 있었다.이런식으로 버튼 위에 마우스를 올리면 title속성에 표시한 글자가 나온다.이 간단한 것을 몰랐을 땐 hover와 말풍선을 직접 만들어서 했었다.말풍선 만들기

2021년 10월 31일
·
0개의 댓글
·

css div 가로길이 비례해서 높이 지정

div태그의 배경으로 이미지를 넣으려는 경우padding-bottom을 이용해서 가로 길이에 비례한 높이를 줄 수 있다.padding은 부모의 가로를 기준으로 그 크기가 잡히기 때문이다.https://stackoverflow.com/questions/88945

2021년 10월 20일
·
0개의 댓글
·
post-thumbnail

iframe

TinyMCE React integration 에서 TinyMCE는 iframe으로 제공되는 것을 확인했다.그래서 이번에 iframe이 어떤 장단점이 있는지 왜 사용하는지에 대해 알아보자.inline frame, 웹 브라우저 내 또 다른 프레임현재 브라우저에 렌더링되고

2021년 10월 16일
·
0개의 댓글
·

a tag rel="noopener noreferrer"

회사 리액트 웹앱의 warning을 정리 중에 나타난 메세지이다.Using target="\_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github

2021년 9월 28일
·
0개의 댓글
·

html a tag attribute

a 태그의 title 속성값에 text를 입력하고a 태그 위에 마우스를 올리면 text가 표시 된다<a href="https://electronic-moongchi.tistory.com/87

2021년 9월 27일
·
0개의 댓글
·

datalist 와 input 변화 감지 event

datalist와 연결된 input element에 'input' event로 변화를 감지할 수 있다.(select는 'change' event)https://stackoverflow.com/questions/23647359/how-do-i-get-the-ch

2021년 8월 26일
·
0개의 댓글
·

form 데이터 전송 방식

form 안의 input에 name이 key 이고 value가 value인데 이것을 form 태그를 사용해서 전송을 하면 Content-Type:application/x-www-form-urlencoded 방식으로 전달이 된다.둘다 body로 가는 것은 같지만 서버에서

2021년 8월 22일
·
0개의 댓글
·

HTML input tag

input tag에 대해 알아보자button : button 태그랑 같음checkboxcolordata : 달력email일반 텍스트 필드 처럼 보이지만 유효성 검증 매개변수가 존재, 브라우저와 장치가 동적장치를 지원하는 경우 적합한 키보드 보여줌filehidden :

2021년 8월 20일
·
0개의 댓글
·

form data 전송

프론트에서 DB에 값을 저장하려 할 때 POST 방식으로 전송을 하게 된다.form으로 전송하는 경우,file이 포함되지 않았다면,enctype이 application/x-www-form-urlencodedfile이 포함되었다면,multipart/form-data로 지

2021년 8월 15일
·
0개의 댓글
·

HTML data-* attribution

html tag를 구분하기 위해 data-\* 속성을 사용하기도 한다.예를 들어 data-id 처럼 사용하면 원하는 태그를 가져올 때 편한 것 같다.이것을 javascript에서 불러 오려면 다음과 같다.참고 문헌https://developer.mozilla.

2021년 8월 10일
·
0개의 댓글
·
post-thumbnail

HTML form

서식 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL 절대 주소(absolute URL)ex) href=“http://www.tcpschool.com/target.php”상대 주소(relative URL)ex) href=“target.

2021년 8월 9일
·
0개의 댓글
·

HTML datalist tag

jQuery에 editable select 라이브러리가 있는데HTML5에서 나온 datalist tag로 대체가 가능해보인다.단점은 드롭다운 메뉴안의 아이템들을 스타일링이 불가능하다는 것이다.그렇지만 검색도 잘되어 있고 리스트에 입력하기도 쉬워서간단한 필터링 드롭다운

2021년 8월 6일
·
0개의 댓글
·