웹 프론트엔드/HTML | CSS | JS7 JS: 유니코드 문자열로 인코딩하기, 문자열 이스케이핑이란? (+encodeURIComponent, encodedURI, encodeURIComponent의 차이점) 서론 웹을 공부하다가 encodedURIComponent, decodeURIComponent 라는 window 객체의 메서드를 사용하여, 문자열 인코딩을 해야 할 일이 있었습니다. 그 당시에, 문제 해결을 위해서 어떤 함수인지, 문자열 인코딩이 무엇인지 모르고 복사해서 쓰곤 했는데 한번 정확하게 어떤 개념인지 알아두어야 할 필요가 있는 것 같아서 한번 정리를 해보게 되었습니다. 문자 집합 / 문자열 인코딩 먼저 문자열인코딩에 개념에 대해 알아보도록 하겠습니다. 문자 집합 (Charater Set) 이란 문자와 숫자가 매핑된 표를 의미합니다. Unicode 기반의 utf-8, 한글 코드 기반의 euc-kr 등이 문자집합이라고 볼 수 있으며, 보통 문자를 숫자로 나타내는 rule을 의미합니다. Unicode.. 2022. 12. 28. CSS : 말풍선 만들기 (border 속성) 개요 회사에서 프로젝트를 하다 보니 CSS를 이용하여 말풍선을 만들어야 할 일이 생겼습니다. 간단하게 CSS의 border 속성을 등을 이용하여 만들 수 있었는데요, 해당 방법을 한번 공유해보도록 하겠습니다. 말풍선 만들기 예제 먼저 간단하게 Codepen으로 만든 예제를 공유드리겠습니다. See the Pen Untitled by jungwoole91 (@jungwoole91) on CodePen. Border 속성을 이용하여 말풍선 꼬리 만들기 border의 영역에 대해서만 먼저 한번 설명드리겠습니다. border는 크게 border-top, border-bottom, border-right, border-left로 이루어져 있는데 각각의 영역은 아래와 같습니다. 위 사진은 border-top, bo.. 2022. 12. 20. 모바일 웹 : Device Orientation Event란? ( feat: IOS 13+ 이상에서 Device Orientation Event 권한 얻어오기 ) 개요 Device Orientation 는 모바일 웹에서 기기의 위치나 회전에 대한 값을 얻어올수 있는 이벤트입니다. 보통 모바일웹에서 360도 파노라마 이미지를 보여주거나 Aframe과 같은 3D 프레임워크를 웹에서 사용할때 내부적으로 DeviceOrientation 이벤트가 사용되는 것을 알수 있습니다. 오늘은 모바일 웹에서 DeviceOrientationEvent 이벤트를 요청하는 방법에 대해 알아보겠습니다. DeviceOrientation 이란? Device Orientation은 중력을 기준으로 기기의 물리적 방향의 변화(event)를 뜻합니다. 즉, Device Orientation은 모바일 웹에서 디바이스의 물리적 방향의 변화를 감지하기 위해 사용됩니다. 해당 이벤트를 이용하면 모바일 디바이.. 2022. 10. 12. JS : 모바일에서 오른쪽 클릭 시 옵션메뉴 안나오게 하기 마우스 오른쪽 클릭을 눌렀을 때 나오는 메뉴를 contextmenu라고 합니다. 모바일에서는 보통 `LongClick` 시에 해당 메뉴가 나오게 되는데, 때에 따라 해당 부분때문에 모바일 웹앱을 만들때 방해가 될 수 있습니다. 이럴때는 하단 태그에 다음과 같은 JS 파일을 삽입해주면 문제가 해결됩니다. // context 메뉴 출력시 호출되는 event handler window.oncontextmenu = function(event) { event.preventDefault(); // 기본 태그 기능 막기 event.stopPropagation(); // 이벤트 전달 막기 return false; }; 2021. 7. 21. text-indent 속성 CSS text-indent text-indent 속성을 들여쓰기 효과를 지정합니다. 즉 문단의 첫번째 줄을 지정한 길이만큼 들여쓰기 한다고 생각하시면 됩니다. 2018. 10. 1. HTML - fieldset 태그란 웹사이트에는 다양한 정보를 전달하기 위한 수 많은 입력 폼이 존재합니다. 예를들어 회원가입 페이지만 해도 사용자의 다양한 정보를 입력해야 하는데요, 이러한 정보를 그룹화 한다면 더욱 편리하게 관리 할 수 있습니다. 이에 html에는 fieldset이라는 태그가 존재하고, 이 태그를 사용할 경우 다수의 입력 폼들을 그룹화하여 관리 및 컨트롤 할 수 있습니다. fieldset 태그란? fieldset 태그는 몇가지 속성을 지정하여 사용할 수 있는데 각각의 속성의 특징은 다음과 같습니다. 아래처럼 이 태그에 사용 가능한 태그는 무척 한정적입니다. 이 태그의 가장 큰 장점중 하나로 권한에 따른 선택 그룹 전체르 비활성화 처리가 가능하다는 점을 들 수 있습니다. 예를 들어 권한이 없는 사용자에게 입력폼의 수정을 .. 2018. 9. 3. CSS - 자손 선택자와 자식선택자 비교 CSS의 자손선택자와 자식선택자 차이 css 선택자 중에 자손선택자와 자식 선택자를 알아보겠습니다. 자손선택자 자손 선택자(descendant selector)는 문서 구조에서 특정 요소의 자손을 선택하는 선택자입니다. 자손은 자식, 손자, 그리고 이후에 후손을 모두 포함합니다. 자식선택자 자식 선택자(child selector)는 특정 요소의 직계 자식만 선택하는 선택자입니다. (자식 이후 손자, 후손들 포함하지 않음) 참조) http://aboooks.tistory.com/286 2018. 8. 14. 이전 1 다음
