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%


  • 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.


  • 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 속성으로 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;


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

Leave a Reply

Your email address will not be published. Required fields are marked *