[D3.js] HTML의 CSS

in #kr-dev6 years ago

[D3.js] HTML의 CSS


CSS를 알아두면 D3.js를 사용할 때 편합니다. CSS은 HTML의 각 태그들의 스타일을 지정해 줍니다. 태그의 스타일을 D3.js 함수로 지정하여 멋지게 태그의 스타일을 만들기 때문에 미리 CSS의 개념을 잡아 놓으시면 나중에 D3.js에서 사용하실 때 효율적으로 코딩을 할 수 있습니다.

1. CSS(Cascading Style Sheets)


[기본 배치] : 3가지 형태로 CSS를 표현 합니다.

  • HTML 문서에 삽입하는 경우 :
<style>
svg {
  background-color: yellow;  
}
</style>
  • HTML 태그 속에 삽입하는 경우(svg) :
<svg width="300" height="300" style="background: yellow"></svg> 
  • 외부 CSS파일로 빼놓을 경우 :
<link rel="stylesheet" href="style.css" />

style.css 파일

svg {
  background-color: yellow;  
}

3. CSS 기본 코딩


스타일 지정 방식에서 특정 태그의 스타일을 지정하는 방식으로는 태그명, 클래스명, ID명으로 해당 태그의 스타일을 지정 할 수 있다.

<style>
     svg{
       background-color: yellow;
     }
     .a{
       fill:red;
       stroke:blue;
       stroke-width:5;
     }
     #b{
       fill:blue;
       stroke:red;
       stroke-width:5;
     }
</style>
<svg width="300" height="300">
   <rect class="a" x="10" y="10" width="50" height="30" />
   <rect id="b" x="100" y="100" width="50" height="30" />
</svg>      

위 예제는 3가지 접근 방법인데 svg 태그명으로 접근하면 html 문서상에 모든 svg 태그의 스타일을 지정하게 되고, 클래스명으로 접근하면 해당 클래명을 가진 태그만 스타일을 지정하게 된다. id명도 마찬가지입니다.

[결과]

2. D3.js로 스타일 지정


<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var svg = d3.select("body").append("svg")
     .attr("width", "300")
     .attr("height", "300")
     .style("background-color","yellow");
</script>

지난 시간의 예제 소스 입니다. 보시면 style()함수가 있고 각 개별적으로 스타일 속성을 지정해 주시면 svg 태그의 스타일이 변경됩니다.

묶어서 한번에 스타일을 지정 하고 싶을 때에는 rect 태그를 기준으로 코딩하면 다음과 같습니다.

  .styles({fill: 'red', stroke: 'blue', 'stroke-width': 5, opacity: 0.5 })

즉, 한개씩 수정할 때는 style()함수를 사용하고 여러개를 한번에 수정할 때에는 styles()함수를 사용한다.

참고로, attrs()나 styles()함수를 사용하기 위해서는 다음과 같은 링크 태그를 삽입해 놓아야 합니다.

<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>

마무리


CSS은 간단한 기본 지정만 하고 끝냈는데 사실 다양한 기능들이 있습니다. CSS를 얼마나 많은 사전지식을 가지고 있느냐에 따라 데이터 시각화의 스케일이 달라지게 됩니다. 애니메이션 효과도 부여 할 수 있고 스타일을 좀 더 정교하게 지정을 할 수 있는데 이건 CSS 래퍼런스를 좀 깊게 공부해 보세요. 나중에 D3.js로 데이터 시각화 할 때 CSS의 사전 지식을 어느정도 가지고 있으면 고퀄리티 작품을 만들 수 있을 거라 생각됩니다.

오늘 post에서는 간단히 CSS라는 것이 대충 어떤 느낌인지만 알아보는 시간이기 때문에 CSS 기교는 모두 뺐습니다. 이부분은 여러분들이 한번 CSS에 대한 문법을 공부한 뒤에 D3.js에서 CSS를 다뤄 보세요.

Sort:  
아직 Payout 되지 않은 관련 글
  1. [D3.js] HTML의 SVG 태그 D3로 코딩 ( 94.15 % )
  2. 막대형 차트로 보는 D3.js ( 87.61 % )
  3. [Unity VR과 Android BLE] #8 안드로이드 Plugin ( 87.58 % )
  4. 3-1 OR 로직 머신 러닝 Classification ( 86.92 % )
  5. 스팀잇에서 수식을 입력하는 몇 가지 방법! ( 86.33 % )
모든 기간 관련 글
  1. [D3.js] HTML의 SVG 태그 D3로 코딩 ( 94.15 % )
  2. D3.js 기본 틀 ( 90.70 % )
  3. [EOSIO dapp]튜토리얼 따라하기 v.1.2.0 - Multi Index Table ( 88.72 % )
  4. D3.js 버전5로 공부 시작 ( 87.95 % )
  5. 막대형 차트로 보는 D3.js ( 87.61 % )

인터레스팀(@interesteem)은 AI기반 관심있는 연관글을 자동으로 추천해 주는 서비스입니다.
#interesteem 태그를 달고 글을 써주세요!

잘모르지만 잘 봤습니다
자꾸 보면 코딩 잘할수 있을거 같은 ㅎㅎㅎ

코딩은 몰라도 자꾸보다 보면은 무의식속에 코딩이 어느순간 자리잡고 있게 돼요. ^^

옛날 공부할때 하던 C언어 같은데..
그때 좀 할걸 하는 생각이 드네요..

웹코딩으로 w3school 가셔서 기초부터 한번 접해보세요. 튜토리얼로 쉽게 나와 있는데 steem.js를 연동해서 스팀블록체인 정보를 다룬다는 동기 목적을 잡고 공부를 한번 해보세요. 아마 동기 부여 때문에 공부가 될꺼에요.

생활코딩 사이트 가셔서 다시 공부에 도전해보는 것도 괜찮을 듯 싶네요.

분명히 코딩에 대해 배운거 하나도 없는데 뭔가 너무 자주 노출되서 그런지 조금씩 읽히는 느낌입니다
외국인이 김밥천국 간판 알아보게되는 느낌이 이런건가...

그러다 어느순간 코딩을 하게 됩니다. ^^

이오스 계정이 없다면 마나마인에서 만든 계정생성툴을 사용해보는건 어떨까요?
https://steemit.com/kr/@virus707/2uepul

짱짱맨 방문에 감사합니다.

Coin Marketplace

STEEM 0.35
TRX 0.12
JST 0.040
BTC 70351.33
ETH 3563.43
USDT 1.00
SBD 4.72