sass –-style [스타일옵션] [SASS/SCSS파일주소/파일]:[CSS파일주소/파일]

sass --watch --style compact style.scss
ㄴ watch option : nested , expanded , compact , compress

sass --sourcemap=none --watch style.scss:style.css
sass --update --force --sourcemap=none style.scss:style.css

--sourcemap=none
ㄴ --no-source-map     <--22.08.07 현재 이걸로 바뀜

 

node-sass를 설치하지 않고 순수 sass 환경에서의 컴파일

sass 설치 잘했는데 왜 안되지?

프로젝트별 다양한 기술이나 버전이 적용되다 보니... 습관적으로 global설치보다는 save설치를 하게 된다...

이거시 sass 컴파일 명령어가 안먹힌 원인이었을 줄이야...

scss : 'scss' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오.

 

해결

npm install -g sass
sass --no-source-map --watch --style expanded style.scss:style.css


글로벌로 설치하고 컴파일 다시 해보니 완료...

 

 

 

728x90

'css' 카테고리의 다른 글

[css] 도넛 차트 그리기  (0) 2021.06.03
[css] 레이아웃 그리기  (0) 2021.03.30
[css] reset파일 만들기 귀찮을 때  (0) 2021.03.17
[css] 크로스브라우징  (0) 2021.03.17

데이터 차트를 보여줘야 하는데 이것을 도넛 모양으로 표현할 때가 있다.

이제 것 라이브러리를 사용하여 크게 신경 쓰지 않았지만,

데이터가 추가 된다거나, 변경되고, 유기적인 데이터가 아닌 가벼운 데이터의 경우 도넛 모양의 차트만 그려줄 거라 하드코딩으로 해보기로 했다.

 

 

일단 구조를....

 

 

이런 도넛 모양의 차트를 기준으로 시작해봤다.

 

     1. 베이스 원형

     2. 가운데 뚫어줄 원형

     3. % 별로 컬러가 입혀질 원형

     4. 데이터 표시 라벨

 

 

 

 

1. 일단 css로만 해볼까?

일단 한개 수치만 띄어보자.

 

<HTML>

<div class="chart">
  <div class="chart-bar"></div>
</div>

 

<CSS3>

.chart{
  margin:0;
  padding:0;
  list-style-type: none;
  overflow: hidden;
  position: relative;
  width: 280px;
  height: 280px;
  border-radius:320px;
  background:gray;
}
.chart:after{
  content:'';
  position:absolute;
  top:0;left:0;bottom:0;right:0;
  margin:auto;
  width:80%;
  height:80%;
  background:#fff;
  border-radius:100%;
}
.chart-bar{
  position: absolute;
  top:50%;left:50%;
  background:skyblue;
  height:110%;  
  width:45%;
  transform: translate(-50%,-50%) rotateZ(-45deg);
  transform-origin:center;
}

chart-bar의  width 값과 transform값의 rotateZ로 변경하면 될 거 같았다.

 

이건 대체 무슨129 ㅇㅁㅇ!!!!

 

 

2. background:conic-gradient() 의 사용하기

원의 중심점에서 끝점, 각도 끝점까지 해서 대략 원뿔모양식으로 처리를 해야했다.

 

<HTML5>

<div class="chart">
  <div class="chart-bar" data-deg="50"></div>
</div>

 

<CSS3>

.chart {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  transition: 0.3s;
  background:lightgray;
  display:inline-block;
}

.chart:after{ /* 가상선택자는 도넛 모양을 만들기 위함이다.*/
  content:'';
  background: #fff;  /* 백그라운드 컬러로 중앙가리기 */
  position: absolute;
  top:50%; left:50%;
  width:200px; height:200px; /* 도넛의 너비 설정 */
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.chart-bar{
  width: inherit;
  height: inherit;
  border-radius: 50%;
  background: conic-gradient(#9986dd 50deg, #fbb871 50deg); /* 차트 설정 */
}

 

위 모양처럼 나온다

 

 conic-gradient은 시작지점을 설정하지 않으면 12시부터(시계로 빗대어 말하자면) 시작하게 된다.

 

 

background: conic-gradient(#9986dd 50deg, #fbb871 50deg); 

인자값 :  첫 시작 컬러 00번째  각도까지, 두 번째 컬러 00번째 각도부터 전체 

 

 

 

 

background: conic-gradient( red 36deg, orange 36deg 170deg, yellow 170deg);

차트가 여러 개가 될 경우는 중간 차트 시작 지점 , 끝 지점 설정해야 한다.

 

 

 

굳이 시작점과 끝 지점 각도를 전부 설정하는 이유는 차트 경계를 엣지 있게 처리하기 위함이다. 

컬러+시작각도 만 넣으면 경계는 스무스하게 그라데이션으로 처리된다.

 

 

 

background: conic-gradient( red 36deg, orange 170deg, yellow);

 

 

 

 

 

1) 첫번째 시작 기준점을 옮기고 싶다면 from 

 

 

background: conic-gradient(from 45deg, red 36deg, orange 170deg, yellow);

 

 

 

 

 

2) 원 중심점 옮기기 - at(x축, y축)

 

 

background: conic-gradient(at 60% 25%, red 36deg, orange 170deg, yellow);

 

 

 

 

 

3) 여러 속성을 한꺼번에 사용

 

 

background: conic-gradient(from 30deg at 40% 35%,  red , orange , yellow);

 

 

 

 

 

자세한 내용은 아래 링크 참고하자

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient()
ㄴ 링크에서 보시다시피 ie는 전혀 지원하진 않지만 엣지부터 다른 브라우저들은 지원하고 있다.

https://www.w3schools.com/css/css3_gradients_conic.asp
ㄴ 파이 차트 그리는 방식을 상세히 설명하고 있다

 

conic-gradient() - CSS: Cascading Style Sheets | MDN

The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels. The result of the conic-g

developer.mozilla.org

 

CSS Conic Gradients

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

 

 

3. 최종 : 디테일하게 설계

이제 데이터 수치 라벨, 데이터 그래프를 나눠주면 그리고자 했었던 차트를 완성할 수 있다.

 

<HTML5>

<div class="chartWrap">
  
  <div class="chart">
    <div class="chart-bar" data-deg="50"></div>
    <div class="chart-bar" data-deg="95"></div>
    <div class="chart-bar" data-deg="200"></div>
    <div class="chart-bar" data-deg="15"></div>
  </div>
  
</div>

 

<CSS3>

.chartWrap{
  position: relative;
  width: 300px;
  height: 300px;
  margin:100px;
}
.chart {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  transition: 0.3s;
  background:lightgray;
  display:inline-block;
}
.chart:after{
  content:'';
  background: #fff;
  position: absolute;
  top:50%; left:50%;
  width:170px; height:170px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.chart-bar{
  width: inherit;
  height: inherit;
  border-radius: 50%;
  position: relative;
}

.chart-total{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background:gray;
  width:100%;
}
.chart-total span{
  position: absolute;
  color:#777;
}
.chart-total-num{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size:1.3rem;
  font-weight:bold;
  color:#333;
}
.chart-total-text1{
  top:-150px;right:-10px;
}
.chart-total-text2{
  top:-50px;right:-70px;
}
.chart-total-text3{
  top:120px;right:30px;
}
.chart-total-text4{
  top:0;left:-70px;
}

 

<javascript>

var _chart = document.querySelector('.chart');
var _chartBar = document.querySelectorAll('.chart-bar');
var color = ['#9986dd','#fbb871','#bd72ac','#f599dc'] //색상
var newDeg = []; //차트 deg

function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function chartLabel(){
  var _div = document.createElement('div');
  _div.className = 'chart-total';
  _div.innerHTML = `<span class="chart-total-num">Total:<br> 3,135</span>
                    <span class="chart-total-text1">Automobile</span>
                    <span class="chart-total-text2">Disablility</span>
                    <span class="chart-total-text3">Life</span>
                    <span class="chart-total-text4">Property</span>`;
  insertAfter(_div,_chart);
}

function chartDraw(){ 
  for( var i=0;i<_chartBar.length;i++){
    var _num = _chartBar[i].dataset.deg
    newDeg.push( _num )
  }

  var num = newDeg.length - newDeg.length;
  _chart.style.background = 'conic-gradient(#9986dd '+
                                                newDeg[num]+'deg, #fbb871 '+
                                                newDeg[num]+'deg '+newDeg[num+1]+'deg, #bd72ac '+
                                                newDeg[1]+'deg '+newDeg[2]+'deg, #f599dc '+
                                                newDeg[2]+'deg )';
  
  chartLabel();
}

chartDraw();

 

&amp;lt;result&amp;gt;

 

See the Pen Untitled by JNoony (@jnoony) on CodePen.

728x90

'css' 카테고리의 다른 글

[scss] scss 컴파일 해보기  (1) 2022.08.07
[css] 레이아웃 그리기  (0) 2021.03.30
[css] reset파일 만들기 귀찮을 때  (0) 2021.03.17
[css] 크로스브라우징  (0) 2021.03.17

유지보수나, 운영팀에 있다 보면 코드를 보고 발 빠르게 대처해야 한다. 

그러기 위해선 자신이 주력으로 사용하는 프로그래밍 언어에 대해 이해가 있어야 리소스를 덜 낭비하고 쉽게 처리할 수 있다.

하나의 레이아웃으로 여러 코드를 이용하여 그려보면 css를 깊게 활용할 수 있고, 다양한 이슈 상황에 대처하는 연습이 된다고 생각한다.

 

 

point ) visual과 cont 사이엔 빈 공간

 

1. float:left;

웹사이트의 화면은 포토샵의 레이아웃처럼 겹겹이 올리는 방식으로 스타일을 사용하고 있어 float:left 같은 레이아웃을 강제적으로 바꿔주는 코드는 많이 사용하면 할수록 웹브라우저의 반응속도가 더디게 된다.

요즘은 float보다 폭넓게 활용할수 있는 코드가 많이 업데이트됐기 때문에 지양하고 있지만 아직 많이 사용하고 있어 활용해보았다.

 

See the Pen BapLLgP by JNoony (@jnoony) on CodePen.

.Tip)

float:left를 너무 많이 쓰다보면 부모객체를 잃어버릴때가 있다. 

이렇게 되면 margin이나 padding값이 이상하게 먹거나 안먹히고, 자식객체들이 조금씩 틀어져서 나가는 경우가 발생한다.

이럴경우 필요에 따라 높이값을 줘도 되지만, 권장하지 않는다.

요즘은 반응형으로 제작을 하게 되는데 디바이스가 바뀔때마다 높이값을 조정하는 사태가 벌어지는데 이는 유지보수 하는데 좋은 방법이 아니기 때문이다.

대부분  부모객체에 overflow:hidden을 사용하게 되면 원만히 해결된다.

 

 

2. display:flex;

See the Pen jOyMVRW by JNoony (@jnoony) on CodePen.

 

 

3. display:grid;

728x90

'css' 카테고리의 다른 글

[scss] scss 컴파일 해보기  (1) 2022.08.07
[css] 도넛 차트 그리기  (0) 2021.06.03
[css] reset파일 만들기 귀찮을 때  (0) 2021.03.17
[css] 크로스브라우징  (0) 2021.03.17

원래 선배들부터 돌려쓰던 reset.css를 잃어버리고, 내가 일일이 작성하자니 귀찮아서 찾게 된 사이트다.

 

meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

 

그래서 위 사이트에 적혀진 상태에서 필요한 부분 덧붙여 아래 코드는 내가 사용 중인 reset.css 코드이다.

 

@charset "utf-8";

html {
	font-family: 'Apple SD Gothic Neo', Roboto, 'Noto Sans KR', NanumGothic, 'Malgun Gothic', sans-serif;
	line-height: 1.2;
	word-wrap: break-word;
}
body {
	-webkit-font-smoothing: antialiased;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
div, span, article, section, header, footer, aside, 
p, ul, li, fieldset, legend, label, a, nav, form {
	box-sizing: border-box;
}
ol, ul, li {
	list-style: none;
}

:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

img {
	max-width: 100%;
	height: auto;
	border: 0;
}
button {
	border: 0;
	background: transparent;
	cursor: pointer;
}
728x90

'css' 카테고리의 다른 글

[scss] scss 컴파일 해보기  (1) 2022.08.07
[css] 도넛 차트 그리기  (0) 2021.06.03
[css] 레이아웃 그리기  (0) 2021.03.30
[css] 크로스브라우징  (0) 2021.03.17

마이크로소프트에서도 포기한 IE를 아직도.. 우리나라는 사용하고 있기 때문에 예전에 배웠던 대로 IE8,9는 맞출 필요는 없지만 적어도 IE10+이상은 맞춰야 한다.

 

float:left의 남용이 웹브라우저 최적화를 저하시키기도 해서 지양하고 있기 때문에, 웹브라우저의 버전업과 함께 stylesheet도 점차 발전해가고 그에 맞춰 편하게 레이아웃을 조정할 수 있도록 나온 display:grid를 사용하고 싶지만 IE10에서는 지원하지 않기 때문에.. ㅜㅜ 그나마 핵사용이라도 해서 display:flex로 레이아웃 스타일을 활용하고 있다.

 

하지만 아무리 맞춰도.. 한계는 있는 법.

 

웬만하면 크롬/웨일 막 요런 거 쓰자..

 

1. css에서 IE만 반영 

/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 /* Enter your style code */
}
 
/* IE6,7,9,10 */
@media screen and (min-width: 640px), screen\9 {
 /* Enter your style code */
}
 
/* IE6,7 */
@media screen\9 {
 /* Enter your style code */
}
 
/* IE8 */
@media \0screen {
 /* Enter your style code */
}
 
/* IE6,7,8 */
@media \0screen\,screen\9 {
 /* Enter your style code */
}
 
/* IE9,10 */
@media screen and (min-width:0\0){
 /* Enter your style code */
}

 

2. HTML에서 IE만 반영하는 stylesheet 링크 사용

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="only-ie.css" />
<![endif]-->


<!--[if IE]>
<style>
    /* Enter your style code */
    /* 몇개 수정할 경우 사용, 웬만하면 링크 걸자. 브라우저 속도를 위해 */
</style>
<![endif]-->

 

3. 접두어사용

 -ms-      : Edge / Internet Explorer에서 지원
 -moz-    : Firefox 지원
 -webkit- : Google 크롬, Safari에서 지원
 -o-        : Opera에서 지원

 

 

 

 

 

 

 

docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537512(v% 3d vs.85)
728x90

'css' 카테고리의 다른 글

[scss] scss 컴파일 해보기  (1) 2022.08.07
[css] 도넛 차트 그리기  (0) 2021.06.03
[css] 레이아웃 그리기  (0) 2021.03.30
[css] reset파일 만들기 귀찮을 때  (0) 2021.03.17

+ Recent posts

티스토리툴바