본문 바로가기

분류 전체보기370

SASS 사용 방법- 정말 편리하고 간편하게 css 개발 가능!

SASS도 '언어'입니다. CSS는 프로젝트의 규모가 커지고, html 요소와 그 요소들을 style해주는 css 코드는 많아 질수록 관리가 어려워지게 됩니다. sass는 큰 프로젝트일 경우에 유용합니다. SASS를 사용할 경우 이점. 계층적으로 코드를 작성할 수 있어서 코드를 보기가 편해집니다. css 속성의 변수 작성(mixin) 및 조건문 사용이 가능합니다. 성능적인 이점은 없습니다. 그보다, 필요 없습니다. SASS의 큰 특징이라면 브라우저는 표준 css만 읽을 수 있으므로, SASS에 문법에 맞는 코드를 작성하고 CSS로 트랜스컴파일링을 해야한다는 겁니다. 하는 방법은 밑에 설명에 나와 있습니다. SASS 적용 방법 1. npm 초기화 $ npm init -y 2. sass 라이브러리 설치 $ .. 2021. 4. 21.

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.

티스토리툴바