찾으시는 정보가 있으시다면
주제별reference를 이용하시거나
우측 상단에 있는 검색기능을 이용해주세요

Colors(name, rgb, hex, hsl) – advanced color

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values

Color name

Predefined color name ex) Tomato, SlateBlue … CSS support 140 standard color names

Color values

Same as color name “Tomato”

• RGB : rgb(255,99,71)

• HEX : #ff6347

• HSL : hsl(9, 100%, 64%)

RGBA, HSLA have alpha parameter is a number between 0.0(fully transparent) and 1.0 (not transparent at all)

RGB

RGB color value represents Red, Green, Blue light sources

Using this formula : rgb(red,green,blue)

Each parameter defines the intensity of the color between 0 and 255

HEX

Is specified with : #RRGGBB

Where the RR(red), GG(green), and BB(blue) hexadecimal integers specify the components of the color

Between 00 and ff( same as decimal 0-255)

3-digit hex value

Is a shorthand for some 6-digit hex code

Can only be used when both the value are the same for each component

HSL

Using this form : hsl(hue, saturation, lightness)

Hue is a degree on the color wheel from 0 to 360, 0 is red, 120 is green, and 240 is blue

Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color

Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white

Box model

All elements can be considered as boxes

The term “box model” is used when talking about design and layout

The box model is essentially a box that wraps around every HTML element

It consists of: margins, borders, padding, and the actual content

• Content - The content of the box, where text and images appear

• Padding - Clears an area around the content, the padding is transparent

• Border - A border that goes around the padding and content

• Margin - Clears an area outside the border, the margin is transparent

When you set the width and height properties of an element with CSS, you just set the width and height of the content area

To calculate the full size of an element, you must also add padding, borders and margins

Display

Specifies if/how an element is displayed

Every HTML elements has a default display value depending on what type of element it is

The default display value for most elements is block or inline

However, Can override this, Changing an inline element to a block element, or vice versa

Setting the display property of an element only changes how the element is displayed, not what kind of element it is.

So, an inline element with display:block; is not allowed to have other block elements inside it

Display:none;

Is commonly used with JS to hide and show elements without deleting and recreating them