freeCodeCamp 웹 디자인 – Colored Markers

Responsive Web Design Certification – a Set of Colored Markers

Hex color

• Hex color values start with a # character and take six characters from 0-9 and A-F. The first pair of characters represent red, the second pair represent green, and the third pair represent blue. For example, #4B5320.
  • 00: 0%, FF: 100%

HSL

• hue red is at 0 degrees, green is at 120 degrees, and blue is at 240 degrees.
• Saturation is the intensity of a color from 0%, or gray, to 100% for pure color. You must add the percent sign % to the saturation and lightness values.
• Lightness is how bright a color appears, from 0%, or complete black, to 100%, complete white, with 50% being neutral.

Gradient

• linear-gradient function은 image 요소를 만들어내므로 background-color가 아닌 background 속성과 같이 쓰임
• linear-gradient(gradientDirection, color1, color2, ...);
  • 최소 2컬러 이상 사용해야 함
  • gradientDirection is the direction of the line used for the transition. ( 180deg가 기본값)
• linear-gradient(90deg, red 90%, black);: px이나 %로 색깔별로 차지하는 길이를 지정할 수 있음

.red {
  background: linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%);
}

Opacity

• opacity 속성으로 0~1.0 사이 숫자로 투명도 조절 가능
• 또는 rgba, hsla 등의 속성으로 알파값을 조정할 수 있음
  • hex code 역시 끝에 붙여주면 됨 e.g. #3B7E20CC

Box shadow

• box-shadow: offsetX offsetY color;
  • both offsetX and offsetY accept number values in px and other CSS units
• a positive offsetX value moves the shadow right and a negative value moves it left
• a positive offsetY value moves the shadow down and a negative value moves it up
• if you want a value of zero (0) for any or both offsetX and offsetY, you don’t need to add a unit. Every browser understands that zero means no change.
• The height and width of the shadow is determined by the height and width of the element it’s applied to.
• 가장자리가 솔리드하지 않게 하려면
  • box-shadow: offsetX offsetY blurRadius color;
• 쉐도우를 확장하고 싶으면
  • box-shadow: offsetX offsetY blurRadius spreadRadius color;

.red {
  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
  box-shadow: -5px -5px red;
}

.green {
  background: linear-gradient(#55680D, #71F53E, #116C31);
  box-shadow: 5px 5px 5px green;
}

.blue {
  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
  box-shadow: 0 0 0 5px blue;
}

etc.

• margin: auto; 가운데 정렬
• 하나의 엘리먼트에 여러 개의 클래스를 지정하고 싶으면 div class="animal dog"과 같이 space로 구분
  • animal과 dog 클래스에 각자 스타일을 지정할 수 있음
    • 하나의 엘리먼트에 여러 개의 클래스를 지정할 경우 첫번째 클래스 스타일이 하위 클래스에 상속됨
• border-left: width style color; 순서로 축약해서 지정 가능