본문 바로가기

분류 전체보기369

Javascript 소수점 반올림 다루는 api

Math.ceil(소수) : 소수점 올림, 정수 반환 Math.floor(소수) : 소수점 버림, 정수 반환 Math.round(소수) : 소수점 반올림, 정수 반환 Math.ceil(소수)는 크거나 같은 값 중에서 가장 작은 정수를 integer로 반환합니다. Math.floor(소수)는 작거나 같은 정수 중에 가장 가까운 수를 integer로 반환합니다. Math.round(소수)는 입력값을 반올림한 수와 가장 가까운 정수 값을 반환합니다. 참고 : developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/floor developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global.. 2021. 4. 19.

[Javascript]HTML 요소에서 동일 클래스 이름에 동작 부여하기

안녕하세요. 한 번은. 개발을 하다가, 동일 클래스를 가지는 요소들에 동일한 값을 Javascript를 통해서 넣어줘야 하는 상황이 있었습니다. 저는 단순히, document.querySelector('.클래스 이름');을 부여한 변수에 innerText를 사용해서 Javascript로 구한 값을 정성스럽게 넣어주었습니다. 그런데, 값은 가장 상위의 클래스에만 반영되고, 그 밑으로 동일한 클래스를 가지는 요소들에는 Javascript값이 들어가지 않았습니다. 원인은, document.querySelector입니다. 이 api는 단순 코드 가장 위에서부터 처음 매칭되는 클래스 요소만을 가져옵니다. 그 밑에 동일한 클래스 이름을 가지는 html 요소는 고려하지 않는 api입니다. 동일한 클래스 이름을 가지는.. 2021. 4. 19.

[Vue] v-model 을 잘 사용하는 방법

Vue.js에서 폼 입력 바인딩으로 많이 사용하는 v-model 유용한 기능을 살펴보려고 합니다. 값 바인딩 : 체크박스 v-model과 함께 사용하기 true-value와 false-value를 사용해서 toggle 데이터에 입력되는 값을 true나 false가 아니라 유연하게 개발자가 원하는 값으로 입력받을 수 있습니다. 위의 코드대로라면, toggle의 초기 값은 'no'입니다. checkbox를 체크하게 되면 toggle은 'yes'가 됩니다. 수식어 v-model.lazy input이 아니라 change 이벤트 후에 데이터가 연동되도록 하는 수식어입니다. ex) v-model.number input으로 받는 숫자는 문자열이 아닌, int type으로 데이터가 들어가게 하는 수식어입니다. ex) .. 2021. 4. 19.

서버에서 git branch 변경하기 필독!!

회사에서 gitlab을 사용하고 있습니다. 로컬에서 개발을 하다가 서버에서의 환경으로 개발된 결과물을 확인하고 싶을 때가 있습니다. 이럴 경우에는 로컬에서 개발한 소스를 git remote repository로 git push를 하고, 서버에서 같은 브랜치로 checkout해서 git pull을 받은 뒤에 빌드하고 실행하는 작업이 필요합니다. 로컬 쪽 소스는 git Desktop이나 vscode에서 바로 변경된 코드를 확인하고 commit 메시지를 작성하고 commit 하고, push를 하면 됩니다. 그런데, 서버에 소스를 옮기려면, ssh로 서버에 command를 입력해서 branch를 변경하고 소스를 pull받아야 합니다. 이번 글은 서버에서 command로 branch를 변경하고, 소스를 pull받.. 2021. 4. 19.

[CSS] box-sizing 설정 알아보기

box-sizing css 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다. 보통 border를 설정하게 되면, 기존에 요소의 너비와 높이에 border의 두께를 더해서 요소가 화면에 보여집니다. 이 기본 설정이 box-sizing: content-box입니다. 요소에 border를 주더라도, 요소의 크기가 border에 영향을 받지 않게 하려면, box-sizing: border-box를 주면 됩니다. box-sizing: content-box box-sizing: content-box;는 border 바깥 쪽으로 'border'의 크기가 커집니다. 마치 margin을 준 것처럼요. .child_container { box-sizing: content-box; width: 100px; borde.. 2021. 4. 17.

[CSS] 텍스트 다루기-2 자간, overflow 줄 바꿈 퍼블리셔나 프론트 개발자라면 반드시 알아야 하는

letter-spacing word-break overflow-wrap letter-spacing 글자 간격 조절하는 옵션. CSS 속성은 글자 사이의 간격(자간)을 조절합니다. div { letter-spacing: 10px; } 옵션 값을 위처럼 letter-spacing: 10px;을 주게되면, 글자 사이의 간격이 10px만큼 떨어져서 화면에 그려집니다. letter-spacing 설명. /* */ letter-spacing: normal; /* 값 */ letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: .3px; /* 전역 값 */ -- letter-spacing: normal; 현재 글꼴의 기본 간격. /* 값 */ 기본 간격에 추가할 글.. 2021. 4. 17.

[CSS] 블록에 scroll주는 법 프론트 개발자라면 반드시 알아야 하는

height: 100px; overflow: scroll; 2021. 4. 15.

[vue.js] vue-router 튜토리얼 -1

개요 jquery나 pure js로 개발된 페이지는 사용자가 매 번 요청하는 경로가 달라지면, 서버에서 페이지 자원을 다시 받아오게 됩니다. 받아오는 동안에도 시간이 걸리기 때문에 화면이 번쩍하면서 랜더링이 됩니다. 반면어 spa는 사용자가 처음 애플리케이션에 접속할 때 보내는 서버 요처으로 애플리케이션에 필요한 자원을 모두 받아옵니다. 사용자가 경로를 다르게 요청하면, 서버에 다시 페이지 자원을 요청하지 않습니다. 처음에 받아온 script 파일로 동적으로 페이지를 변환합니다. 덕분에 서버는 해당 경로에 페이지에 필요한 데이터만 브라우저에 전송해 주면되므로, 서버에 부담이 덜 하게 됩니다. 그럼, 브라우저에서는 어떻게 동적으로 경로에 맞는 페이지를 랜더링해주는 걸까요? vue에서는 사용자가 요청한 경로.. 2021. 4. 13.

CSS 반드시 알아야 하는 기초 개념 면접 필수 질문

웹 퍼블리셔 또는 프론트 개발자 신입 면접에서 다루는 기본 개념 꼭 물어봅니다. margin과 padding의 차이점 margin : border를 기준으로 바깥 여백을 주는 것. //margin : 상하 좌우 margin : 0 auto; // -> 가로 가운데 정렬. padding : border를 기준으로 안 쪽 여백을 주는 것. // padding: 상하 좌우; position position : static 기본 페이지 레이아웃을 따릅니다. 기본값입니다. (default)요소를 일반적인 문서 흐름에 따라 배치합니다. position : relative 자기 자신을 기준으로 Offset이 적용됩니다. top, right, bottom, left를 기준으로 Offset이 적용됩니다. position.. 2021. 4. 8.

CSS 적용 우선순위 프론트엔드 개발자라면 반드시 알아야하는 CSS 우선순위

마크업 작업과 CSS 작업 그리고 vue.js프레임워크를 사용해서 현업에서 개발을 하면서도, 이제야 CSS 스타일 적용 우선순위에 대해서 공부하게 되네요. 매번 중복되는 요소에 style이 들어가서 우선적으로 style을 적용하기 위해서 !important를 남발했던 저 스스로 반성하게 되는 것 같습니다. 그럼, 스타일 적용 우선순위에 대해서 알아보겠습니다. 1. 속성 값 뒤에 !important 붙이는 속성. 2. HTML에서 style옵션을 준 경우 3. #id 로 지정한 속성 4. .클래스, :추상클래스로 지정한 속성 5. 태그이름으로 지정한 속성 6. 상위객체에 의해 상속된 속성 상위객체에 의해 상속된 속성 VS .클래스 끼리에서의 우선순위는 상위객체에 의해 상속된 속성의 스타일이 우선 적용됩니다.. 2021. 4. 3.

티스토리툴바