CSS [2] – Color 컬러, Size 크기 속성 정리

CSS Tutorial – Full Course for Beginners

Lesson 3 – Colors: CSS에서 컬러를 지정하는 방법

p {
  color: darkblue;
}

/* rgb */
  /* color: rgba(999, 0, 0); red */
  /* color: rgba(0, 0, 0, 0.5); */

/* hex code */
  /* color: #FF0000; =#F00 red*/
  /* color: #00FF00; =#0F0 green */
  /* color: #0000FF; =#00F blue */
  /* color: #333; 한자리 숫자 pair로 되어 있는 색상일 경우 축약 */


/* hsl(hue 색상, saturation 채도, lightness 명도) */
  /* color: hsl(0, 100%, 50%); */
  /* color: hsl(0, 0%, 100%); white */
  /* color: hsla(0, 100%, 50%, 100%); */

• named color
  • mdn 문서
• rgb
  • color: rgba(999, 0, 0);
• hex code
  • color: #FF0000;
• hsl
  • color: hsla(0, 100%, 50%, 100%);

Lesson 4 – Units & Sizes: CSS에서 크기를 지정하는 방법

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* header {
  width: 50%;
} */

h1 {
  border: 2px dashed red;
  width: 50%;
  font-size: 3rem;
  padding: 0.5em;
  /* padding의 em은 font-size의 비례 */
}

main {
  font-size: 2rem;
  background-color: skyblue;
}

p {
  font-size: 2rem;
  width: 40ch;
}

body {
  min-height: 100vh;
}

• mdn 문서
• absolute length units
  • user가 원하는 브라우저 세팅에 반하지 않도록 폰트 사이즈를 absolute size(e.g. px)로 지정하는 것은 권하지 않음
• relative length units
  • %로 설정할 경우 부모 태그 기준의 %로 계산되어 설정됨
  • rem의 r은 root, 2rem 설정시 브라우저 기본 폰트 크기의 2배 크기
  • 2em 설정시 부모 태그 크기의 2배 크기
  • ch는 character, 40ch 설정시 40자 정도 들어가는 크기
  • vw는 viewport width 기준, horizontal scroll bar가 생길 수 있음
  • vh를 min-height에 쓸 경우 화면을 100%로 잡아둘 수 있음