더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
총 8개의 일치하는 문서를 찾았습니다.
webdevetc[스타일 가이드] intellij, webstorm 자바스크립트 prettier 설정 방법
자바스크립트를 사용하여 웹 어플리케이션을 만들때 스타일 가이드를 위해서 Prettier를 많이 사용합니다. 만약 IDE를 사용하는 경우 Prettier를 설정하여 스타일 포맷이나 저장시 자동으로 Prettier가 반영될 수도 있는데요 ~ 아래는 Prettier를 간략하게 알아보고 IDE에 설정하는 방법 역시 알아봅니다.# Prettier를 사용하는 이유Prettier는 코딩 스타일 가이드 중 가장 잘 알려진 툴 중 하나입니다. Prettier를 사용하면 정해진 스타일 가이드 대로 코드가 작성되었는지 검증하고 그 결과를 알려주고 에러를 띄우거나 또 자동으로 수정해주기도...
Last Modified : 2022-07-21 23:41:00
Created : 2022-07-21 21:44:00
vue[NuxtJS] 특정 페이지의 컴포넌트에만 전역 스타일 적용하기, global style
NuxtJS를 사용하는 경우 해당 컴포넌트 또는 전역으로 style을 설정할 수 있습니다. 이 경우 만약 특정 페이지에서만 전역으로 스타일을 설정할 경우의 방법을 알아보려고 합니다.# NuxtJS에서 특정 페이지만 전역 스타일 설정하기제일 먼저 생각할 고민은 아래와 같습니다."특정 페이지에서만 전역 스타일 설정이 왜 필요할까?"Nuxt에 사용된 모든 스타일은 컴파일 후 하나의 파일로 번들링 과정을 거치게 됩니다. 즉 글로벌로 설정된 스타일이 있는 경우 해당 페이지뿐만 아니라 결국 모든 페이지에 영향을 주게 된다는 점인데 이런 이유로 특정 페이지의 body나 ...
Last Modified : 2022-07-14 00:39:00
Created : 2022-06-24 09:16:06- css
[scss] 다른 스타일을 가져와 적용하기, @extend 확장
CSS의 전처리기 언어인 SCSS를 사용하는 방법 중 다른 스타일을 가져오는 방법에 대하여 알아봅니다. 바로 @extend를 사용한 스타일 확장 방법입니다.# SCSS의 스타일 확장 알아보기, @extend전처리기 덕분에 CSS 역시 자바스크립트의 객체처럼 다른 스타일을 상속 받는 것처럼 사용하는 것이 가능합니다. 상속과는 다를 수 있으나 스타일을 확장하여 사용할 수 있어 모든 스타일을 정의하지 않아도 다른 스타일을 가져와 사용할 수 있죠. SCSS의 @extend가 바로 그것입니다.@extend <가져올 스타일>문법은 위와 같이 간단하며 가져올 스타일을...
Last Modified : 2020-04-30 21:36:45
Created : 2020-04-27 10:51:17 
vuejsVueJS에서 스타일 적용하는 방법 알아보기
VueJS에서 웹어플리케이션에 스타일(style)을 적용하는 방법에 대하여 알아보고 어떻게 사용하고 활용할 수 있는 방안은 무엇인지 알아보려고합니다.# VueJS에 스타일(Style) 적용하기시작에 앞서 스타일(Style)음 무엇이고 왜 중요한지 알아야겠죠? 간략하게 알아봅니다.! 웹페이지에서 스타일 Style이란?스타일(Style)은 웹페이지를 더 이쁘게, 보기 좋게 그리고 더 편리하게 사용할 수 있도록 UI 디자인을 웹 어플리케이션에 맞게 입히는 과정이라 할 수 있습니다. 이때 css의 다양한 속성을 사용하여 적용이 가능합니다.VueJS에서는 이런 스타...
Last Modified : 2019-08-07 20:38:13
Created : 2019-02-07 11:30:23- js
유용한 자바스크립트 변수의 네이밍 규칙은?
코드스타일과 관련된 질문입니다. 유용한 자바스크립트 변수의 네이밍 규칙은? 어떤게 있는지 간략하게 알아봅니다.! 자바스크립트 코드 스타일 알아보기자바스크립트에서 변수나 함수를 선언할 때 사용할 수 있는 유용한 네이밍, 코딩 스타일 가이드와 관련된 정보를 알아보려고 합니다.@ 선언시 카멜, 헝가리, 언더스코어 등의 표기법 사용하기의미가 있는 형태소 단위 사이의 구분자로 카멜, 헝가리 또는 언더스코어를 사용한 표기 방법을 말합니다. 예를들어 아래의 변수명의 네이밍을 봐주세요.sitenamesimple = '';위 변수와 아래의 변수를 비교해보겠습니다.siteNameSim...
Last Modified : 2020-08-04 18:13:02
Created : 2017-04-19 10:49:20 
js자바스크립트 코딩 스타일 중 알아두면 좋은 것들
보기 좋은 코드가 관리 등의 유지보수및 향후 고도화, 업데이트를 위해 더 좋을 것입니다. 만약 잘못된 코딩 스타일을 가지고 있다면 바꾸도록 노력하는 건 어떨까요? 코딩 스타일은 습관처럼 쉽게 바뀌지 않기 때문이죠.아래는 자바스크립트를 작성할 때 알아두면 좋은 코딩 스타일 가이드 중에서 몇 가지를 적어봤습니다. # 문장의 끝에 세미콜론의 입력문장의 끝을 마치는 기호 세미콜론... 자바스크립트에서 세미콜론이 없더라도 브라우저 엔진에서 자동으로 판단할 수 있으나 성능에도 영향이 있을 수 있으므로 반드시 세미콜론(;)을 넣는 것을 원칙으로 합니다. 다만 블록 스코...
Last Modified : 2019-02-07 00:36:36
Created : 2017-03-30 15:20:09- html
[HTML] input 태그 placeholder 속성, 텍스트 스타일 변경하기
input 태그의 placeholder 속성을 사용해 input 태그안에 보여지게 될 문구를 넣을 수 있습니다. 이 값은 방문자에게 어떤 정보에 대한 폼양식인지 전달할 뿐 실제 이 값이 전송되지는 않죠. 그런데 이 안에 있는 default 속성값... 예를 들어 색상이나 투명도 등을 설정하기 위해서는 어떻게 해야할까요?아래 방법처럼 CSS를 설정하여 원하는대로 스타일 지정이 가능합니다.::-webkit-input-placeholder { /* Webkit browsers */ color: #AB75AB;}:-moz-placeholder { /* Mozilla Fire...
Last Modified : 2020-04-21 11:22:11
Created : 2015-03-25 13:20:09 - html
[HTML] select 태그 사용시 내부 스타일 제거하는 방법
select 태그는 기본적으로 브라우저가 가지고 있는 스타일이 적용되어 있습니다. 그렇기 때문에 새로운 스타일을 적용하기 위해서는 기존 스타일을 제거할 필요가 있죠. 이때 사용할 수 있는 방법으로 appearance 속성을 사용합니다. 아래는 간단한 사용방법입니다.select { appearance: none; }select {-webkit-appearance: none;-moz-appearance: none;appearance: none;}이와 같이 CSS의 appearance 속성의 값을 none으로 설정하면 브라우저에 지정된 스타일을 제가할 수가 있습...
Last Modified : 2015-10-30 07:46:16
Created : 2015-03-06 17:49:17