본문 바로가기

분류 전체보기369

[CSS]dim 검정 투명 화면으로 처리하기

가끔, 웹이나 앱을 처음 들어가게 된 경우에, 웹에 대한 설명을 하기 위해서 웹이나 앱 위에 투명한 검정색 팝업창을 전체크기로 해서 설명을 적어 놓은 기능을 보신 적 있으실 겁니다. 이걸 'dim'이라고 합니다. 투명한 색을 전체 배경으로 하는 CSS 사용 키워드 background-color: rgba(0, 0, 0, 0.3); rgba(적색, 녹색, 청색, 투명도)를 각 입력값으로 받습니다. 맨 마지막의 투명도의 값은 0~1 사이의 값을 가집니다. 1이 투명하지 안게 되는 쪽입니다. 적색, 녹색, 청색으로 색을 변경할 수 있습니다. 색의 강도는 0~255의 값으로 강도를 조절할 수 있습니다. 예시) 예시 코드 HTML 투명한 배경을 주고, 설명 CSS .init_desc { position: abso.. 2021. 2. 18.

[CSS] 글자가 길어서 영역 밖으로 벗어났을 때 생략처리 방법.

글의 결과 CSS를 사용해서 영역을 벗어날 정도로 긴 텍스트를 생략 처리를 해봅니다. CSS 설정 옵션 width: 100px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-bottom: 0.14em; //👈 글자 밑이 hidden으로 인해 잘려보일 수 있어서 추가함. 안녕하세요. 이번에 회사 업무를 하면서, 부모영역이나 태그 영역을 벗어날 정도로 긴 글자가 들어갈 경우에 대한 예외처리를 해야 했습니다. 서버로 부터 받아 온 데이터를 수정해서 화면에 보여주는 방법은 좋지 않다고 생각했습니다. CSS로 처리해 봅시다. 일단, CSS 코드로 작성한 결과 화면입니다. 여기서 width를 넘어가면, CSS 처리로 글자를 없애고,.. 2021. 2. 12.

[HTML] 숫자만 입력받기 및 숫자 최대값 최소값 입력 제한하기

마크업 작업을 할 때, 사용자에게 입력을 받는 페이지에서는 요소를 사용합니다. 요소는 마크업 요소 중에서 강한 기능을 가지고 있습니다. 그 이유는 정말 많은 유형(type) 기능을 제공하기 때문입니다. type의 기본값은 type="text"입니다. 숫자만 입력을 받게 하는 유형(type)도 있습니다. input요소에는 type이라는 속성이 존재합니다. type 속성 중에 number를 사용하면 됩니다. 1. input type="number"로 준다. 2. 입력값 최소값 및 최대값 설정하기 MDN을 참고하시면 많은 도움이 됩니다. MDN HTML 입력 요소 2021. 2. 9.

[Javascript] 배열에 특정 원소가 있는지 찾는 방법

indexOf() 개인적으로 가장 편한 방법인 것 같습니다. 배열 안에서 찾으려는 값과 정확하게 일치(===)하는 첫번째 원소의 index를 리턴합니다. 만약 값이 없으면, -1을 반환합니다. indexOf()함수는 문자열에서도 사용할 수 있습니다. 문자열에서 특정 원소의 자릿수를 반환합니다. lastIndexOf() 그럼 반대로, 문자열의 뒤에서부터 찾으려고 한다면, 어떻게 하면 될까요? 문자열.lastIndexOf('찾을 문자열'); 을 하면 됩니다. 마찬가지로 찾는 문자가 없으면 -1을 반환합니다. includes() 배열이 특정값을 포함하고 있는지 여부를 true/false로 반환합니다. 2021. 2. 9.

리눅스 특정 포트 프로세스 죽이기

특정 포트 PID 찾기 netstat -nap | grep 27889 PID를 통해서 프로세스 죽이기 kill -9 5717 2021. 2. 8.

[Javascript] Web API DOM 클래스 다루기

HTML 요소의 클래스 이름을 변경하는 방법. MDN 문서 : className 예시 코드 html kisBlog css //css .title-red { color: 'red'; } .title-blue { color: 'blue'; } Javascript //Javascript const title = document.querySelector('.title-red'); if (title.className !== 'title-red') { title.className = 'title-red'; } else { title.className = 'title-blue'; } 클래스 이름 변경하는 법 MDZ : Element.classList Element.classList 프로퍼티는 DOMTokenList를.. 2021. 2. 5.

html 체크박스 색을 수정하는 것은 가능할까?

안녕하세요. 이번에 회사에서 웹 화면을 만들면서, UI/UX 디자인에 체크바스 색이 다른 것을 사용하고 있었습니다. 단순 html에서 를 사용하게 되면, 아래 그림처럼 체크를 하게되면, 파란색으로 체크가 됩니다. 그럼, UI/UX 디자인 요구사항대로, 이 파란색을 회색이나 빨간색으로 HTML과 CSS 만으로 수정할 수 있을까요? 정답은 .. 안됩니다. css의 background-color나 color를 적용해도 색상은 변경되지 않습니다. 그럼, 어떻게 바꿀 수 있을까요? 두 가지 방법을 소개드리는데, 저는 두 번째 방법을 사용했습니다. 첫 번째 방법은 vuetify의 를 사용해서 체크박스의 색을 변경하는 겁니다. 두 번째 방법은 vue를 사용하지 않고 javascript로 이를 처리하려면, 버튼을 이용.. 2021. 2. 1.

[Javascript] HTTP 요청과 응답 처리하는 방법. 프론트 개발자가 알아야 하는

Javascript HTTP 통신 하는 방법 ⚡️ XMLHttpRequest MDN-XMLHttpRequest 객체 짧게 XHR이라고 부릅니다. XHR은 객체입니다. 서버와 통신을 위해서 사용됩니다. HTTP 프로토콜 뿐만 아니라 file, ftp 도 지원합니다. 페이지 갱신 없이 필요한 데이터를 받아 올 수 있는 장점이 있습니다. ⚡️ fetch() MDN Fetch Web API ES6에 생긴 기능입니다. Javascript의 Web API의 비동기 네트워크 통신 함수입니다. XHR 대체제로 나온 기능입니다. 브라우저에 있는 Javascript 엔진을 통신 기능으로 사용합니다. 📩 GET 요청 사용 예시 //MDN 코드 사용 fetch('http://example.com/movies.json') .t.. 2021. 2. 1.

[Javascript] 알파벳 문자열 대소문자 변경 함수

안녕하세요. Javascript의 내장함수로 알파벳 문자열의 대소문자를 변경해주는 함수가 있습니다. ABCD -> abcs로 바꾸던지, abcd -> ABCD로 이 함수를 사용해서 변경할 수 있습니다. 바로, 다음 함수들입니다. toLowerCase(); toUpperCase(); 사용 방법은 다음과 같습니다. let a = "ABC abc"; a.toUpperCase(); console.log(a); //결과 : "ABC abc" => 문자열 자체를 바꾸지 않습니다. a = a.toUpperCase(); console.log(a); // 결과 "ABC ABC" let b = "ABC abc"; b.toLowerCase(); console.log(b); //결과 : "ABC abc" => 문자열 자체를 .. 2021. 1. 30.

[Javascript] 제대로 된 문자, 숫자, 배열 객체 원소 정렬을 사용하는 방법

안녕하세요. 회사에서 에 문자와 숫자를 정렬하는 기능을 추가해야 했습니다. v-data-table vuetify의 에는 정렬 기능이 기본적으로 있어서 처음엔 을 사용했었습니다. 그런데, 표에 의 에 checkbox까지 들어가야 하는 디자인의 요구사항이 있었습니다. 물론 에도 에checkbox를 넣고 사용할 수 있는 기능이 있지만, 디자인대로 구현하기에는 어려움이 있었습니다. 그래서, 차라리 테이블의 목록을 정렬하는 기능을 제가 만드는 것이 낫겠다고 생각했습니다. 그래서 이번 포스팅에서는 Javascript를 사용해서 api를 통해서 받아온 [{},{},{} ...] 배열을 어떻게 정렬을 하는지에 대해서 알아보기 위해서 이번 문서를 작성하게 되었습니다. 재미있게 봐주세요. *목차 1. Javascript .. 2021. 1. 29.

티스토리툴바