CSS

PreProject, MainProject가 끝나고 구직 중 어언 한달이 넘었다. 그사이 많은 심경의 변화가 있었고, 주변역시 많이 변하였다. 올해까지는 개발직군을 준비하겠지만, 이전처럼 전업으로 준비할순없다. js, react, ts 등 수강할 강의를 올해 다 볼 수 있을지는 모르겠지만 틈틈히 일하면서 봐야한다. 2년남았다. 40살ㅋㅋㅋㅋ

---

1. alpha & opacity

#rgba {
  ...
  background-color: rgba(255, 255, 255, 0.5);
  ...
}

#hex {
  ...
  background-color: #ffffff00;
  ...
}

#opacity {
  ...
  opacity: 0.5
  ...
}

• background-color: 배경만 불투명도 적용된다.

• opacity: 내부 내용도 불투명도 적용된다.

• hex: 00~ff
• alpha & opacity: 0~1

2. position

• position, 위치를 정한다.

#static {
  ...
  position: static;
  top; 100px;
  ...
}

#relative {
  ...
  position: relative;
  top: 100px;
  left: -100px;
  ...
}

/* 부모에 지정되지 않을 시 body 최상위 기준으로 위치조정*/
#absoluteBody #abChild {
  ...
  position: absolute;
  top: 100px;
  left: 100px;
  ...
}

/* 부모지정 */
#absolute {
  position: relative;
}

/* 부모가 지정되었으므로 부모 기준 위치이동. */
#absolute #absoluteChild {
  ...
  position: absolute;
  top: 100px;
  left: 100px;
  ...
}

/* 공간차지하지 않으며, 초기 컨테인팅 블록의 상대적 위치 ex) navigationBar*/
#fixed {
  ...
  position: fixed;
  ...
}

/* 스티커처럼 쓸수있음. */
#sticky {
  ...
  position: -webkt-sticky;
  position: sticy;
  top: 20px;
  ...
}

transitions

#transitions {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: 1s;
}

#transitions:hover {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%;
}

• transition: property name

  duration

  timing function

  delay

#tsAll {
  ...
  transition: all 1s;
  ...
}

#tsBG {
  ...
  transition: background-color 1s;
  ...
}


#transitions {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: background-color 1s ease-in, border-radius 1s;
}

#transitions:hover {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%;
}

• timing function chart

transform

#setLine {
  ...
  transform-origin: bottom right;
  transform: roatate(45deg);
  ...
}

#rotate {
  ...
  transform: rotate(180deg);
  ...
}

#scale {
  ...
  transform: scale(0.5);
  ...
}
/* (2, 1),  (y, x) */

#translate {
  ...
  transform: translateX(100px);
  ...
}

/* 기울기 */
#skew {
  ...
  transform: skew(20deg);
}

---

---

참조

MDN: css