Post List

2016년 10월 26일 수요일

Walmart Electrode #04 Develop Styles

CSS 모듈을 사용하여 스타일 개발

이번에는 동적 응용 프로그램을 만드는 CSS 모듈을 이용하여 일부 스타일을 추가 해본다.

1. 위치 : <your-awesome-component>/src/styles/your-awesome-component.css

해당 CSS 파일을 열어 아래 부분에 CSS 코드를 추가한다.



[binrang@binrang styles]$ pwd
/home/binrang/br-electrode-component/br-elec-component/src/styles
[binrang@binrang styles]$ ls -al
합계 4
drwxrwxr-x. 2 binrang binrang  34 10월 26 15:18 .
drwxrwxr-x. 6 binrang binrang  76 10월 26 17:37 ..
-rw-r--r--. 1 binrang binrang 175 10월 26 15:18 br-elec-component.css
[binrang@binrang styles]$ vi br-elec-component.css 
:root {
  --black: #000;
  --white: #fff;
}
.baseStyle {
  background-color: var(--black);
  color: var(--white);
}
.someStyle {
  composes: baseStyle;
  font-size: 18px;
}
/* 아래 부분에 추가한다. */
body {
  font-family: sans-serif;
}
p {
  padding: 15px;
}
@keyframes partyLights {
  0%{background-position:0% 51%}
  50%{background-position:100% 50%}
  100%{background-position:0% 51%}
}
@keyframes shake {
  from {
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.party {
  animation-name: shake;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}
.houseParty {
    -webkit-clip-path: polygon(2% 97%, 98% 97%, 98% 44%, 51% 8%, 3% 45%);
  clip-path: polygon(2% 97%, 98% 97%, 98% 44%, 51% 8%, 3% 45%);
  background: linear-gradient(269deg, #ff90f1, #27ff8f, #6db0ff, #a398ff);
  background-size: 800% 800%;
  animation: partyLights 5s ease infinite;
  min-height: 12em;
}
.house {
  clip-path: polygon(2% 97%, 98% 97%, 98% 44%, 51% 8%, 3% 45%);
  background-color: #474747;
  padding: 10em 2em 2em 2em;
  border-radius: 10px;
  min-height: 35vh;
}
.container {
  width: 50vw;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
  position: relative;
  transition: filter .7s ease-in-out;
}
.container:before {
  content: '';
  display: block;
  position: absolute;
  background-image: url(//goo.gl/8f5GrX);
  background-position: center;
  background-size: 95%;
  background-repeat: no-repeat;
  width: 45%;
  height: 45%;
  z-index: 999;
  left: 47%;
  top: -9%;
}
.room {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 2em;
  padding-right: 2.5em;
}
.message {
  display: block;
  position: absolute;
  width: 19em;
  height: 11em;
  z-index: 999;
  left: 4.5em;
  top: 7.5em;
  color: white;
  font-weight: 100;
  font-family: helvetica;
  font-size: 27px;
}
a, a:hover, a:active, a:visited {
  color: rgb(93, 245, 255);
  text-decoration: none;
}

2. 위치 : <your-awesome-component>/src/styles/guest-list.css
해당 디렉토리에 guest-list.css 파일을 신규로 생성하고 아래 코드를 입력한다.

[binrang@binrang styles]$ pwd
/home/binrang/br-electrode-component/br-elec-component/src/styles
[binrang@binrang styles]$ vi guest-list.css
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
label { font-size: 2em; }
input[type=checkbox] { display:none; }
input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
}
input[type=checkbox] + label:before { content: "\f096"; }
input[type=checkbox] + label:before { letter-spacing: 10px; }
input[type=checkbox]:checked + label:before { content: "\f046"; }
input[type=checkbox]:checked + label:before { letter-spacing: 5px; }
.guestList {
  position: absolute;
  z-index: 999;
  background-color: rgba(255, 255, 255, 0.93);
  left: 10%;
  border: 2px solid whitesmoke;
  display: inline-block;
  padding-left: 4em;
  padding-right: 4em;
  padding-bottom: 3em;
  padding-top: 1.7em;
  border-radius: 3px;
  margin: 2em;
}
.guestList h1 {
  font-size: 2.5em;
}
.guestName {
  margin-bottom: .5em;
}

3. 위치 : <your-awesome-component>/src/styles/render-friend.css
해당 디렉토리에서 render-friend.css 파일을 신규로 생성 한 후 아래 코드를 삽입한다.

[binrang@binrang styles]$ pwd
/home/binrang/br-electrode-component/br-elec-component/src/styles
[binrang@binrang styles]$ vi render-friend.css
@keyframes shake {
  from {
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.join {
  animation-name: shake;
  animation-duration: 1s;
  animation-fill-mode: both;
}
.friend {
  border-radius: 50%;
  background-color: #efefef;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  float: right;
}


참조 URL : develop_styles.html