CSS

[Vue.js] Vue.js 에서 css variable 사용하기 들어가기에 앞서 단순히 공통 속성을 사용하기 위해서는 css variable이 아닌 IE에서도 사용 가능한 scss(sass)를 통한 공통 속성을 정의하여 재사용하는 것이 좋으며, vue class 또는 style 바인딩을 통해서도 충분히 구현 가능한 부분이기에 vue style binding에 css variable 연결하는 방식은 그냥 이런 방법도 있다는 것을 인지만 하는 것이 좋을 것 같다. CSS Variable css variable은 style css 내에 사용자 속성을 지정하여 재사용 가능하도록 하는 객체를 의미한다. 현재, IE는 지원하지 않기 때문에 IE를 지원하는 사이트를 개발 중이라면 사용에 주의해야한다. `css-va..

[Django] SCSS/SASS 사용하는 방법 관련 패키지 설치 $ pip install libsass django-compressor django-sass-processor settings.py에 설정 추가 # settings.py INSTALLED_APPS = [ ... 'sass_processor', ... ] SASS_ROOT = os.path.join(BASE_DIR, 'static') SASS_PROCESSOR_ENABLED = True SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR, 'static') SASS_OUTPUT_STYLE = 'compact' STATICFILES_FINDERS = ( 'django.contrib.staticfiles.finders..

[CSS][Bootstrap] Spinner 화면 중앙 위치하도록 설정하는 방법 Bootstrap4 - spinners spinner, 즉 loading 표시를 화면 가운데(중앙)에 위치하도록 하기 위에서는 아래와 같이 css에 추가해주면 된다. .spinner { display: block; position: fixed; z-index: 1031; top: calc( 50% - ( ...px / 2) ); /* where ... is the element's height */ right: calc( 50% - ( ...px / 2) ); /* where ... is the element's width */ } top과 right의 ... 은 각자 자신에게 맞는 요소 크기를 입력해 주면 된..

[Django] static 파일 불러오기 static폴더 : css, image, js 파일을 포함하는 폴더이다. 먼저 settings.py에서 static 폴더 위치를 설정해 준다. Django예제에서와 같이 앱들과 동등한 위치에 static폴더를 만들 경우 아래와 같이 staticfiles_dirs에 경로를 추가해 주면된다. // settings.py STATIC_DIR = os.path.join(BASE_DIR, "static") STATIC_URL = '/static/' STATICFILES_DIRS = [ STATIC_DIR, ] s 만약, static폴더를 다른 곳에 만들고 싶다면 어떻게 해야할까? 예를 들어, myapp 이라는 앱 폴더 내에 존재할 경우, 똑같이 경로를 staticfiles..

[JavaScript] style 제거 하는 방법 ex) `el` 아이디를 갖는 요소의 `transform` style을 제거할 경우 CSS #el { transform: translate(171px, 0px); } JS const el = document.getElementById("el"); el.style.setProperty("transform", "none"); [참고] https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

[CSS] 테이블 자동 줄바꿈하는 방법 테이블 자동 줄바꿈 하려면 태그에 "table-layout: fixed" 속성을 추가해서 테이블 크기를 고정시킨 후 줄바꿈을 하려는 태그 , , 등에 "word-wrap: break-word;" 속성을 추가하면 된다. table { table-layout: fixed; } td { word-wrap: break-word; } ※ word-wrap 속성 종류 normal : 일반 줄바꿈 지점에서만 줄을 바꿈 ( default ) break-word : 줄을 바꿀 만한 지점이 없을 경우 임의의 지점에서 줄을 바꿈. [참고] https://www.w3schools.com/cssref/css3_pr_word-wrap.asp