[CSS] CSS 정리

카테고리 없음

[CSS] CSS 정리

hyerm_2 2021. 7. 8. 16:31

SMALL

CSS?

Cascading Style Sheets

HTML 문서를 style

CSS 문법

Selector { Property:Value ; Property:Value }

p {
  color: red;
  text-align: center;
}

CSS Selector

style하기 원하는 HTML element를 선택

Category
=> Simple selectors
=> Combinator selectors
=> Pseudo-class selectors
=> Pseudo-elements selectors
=> Attribute selectors

Element Selector
=> element 이름 기반으로 select
p {
  text-align: center;
  color: red;
}

Id Selector
=> Id attribute 사용
#paral {
  text-align: center;
  color: red;
}

Class Selector
=> class 이름 사용

.center {
  text-align: center;
  color: red;
}

p.center {
  text-align: center;
  color: red;
}

=> center 클래스 가진 것 중 p라는 element 가진 것만 해당

Universal Selector
=> 모든 HTML element
* {
  text-align: center;
  color: red;
}

Grouping Selector
=> 같은 style 갖는 element 들을 묶음
h1, h2, p {
  text-align: center;
  color: red;
}

CSS 추가 방법

External CSS
=> <head> section 안에, <link> element 내에 정의
<head>
	<link rel="stylesheet" href="mystyle.css">
</head>

Internal CSS
=> <head> section 안에, <style> element 내에 정의
<head>
  <style>
    body {
      background-color: linen;
    }

    h1 {
      color: maroon;
      margin-left: 40px;
    }
  </style>
</head>

Inline CSS
=> single element 대해 특별한 스타일 적용할 경우
=> 해당 element에 style attribute 더함
<body>
  <h1 style="color:blue;text-align:center;">This is a heading</h1>
  <p style="color:red;">This is a paragraph.</p>
</body>

CSS Comment

<style> element 내에 위치

<style>
  /* This is a single-line comment */
  p {
    color: red;
  } 
</style>

CSS Color

background-color	배경 색
color	문자 색
border	테두리 색

<html>
<body>

<h1 style="border: 3px solid Tomato;">Hello World</h1>

</body>
</html>

CSS Color Value

RGB
=> rgb (red, green, blue)

RGBA
=> rgba (red, green, blue, alpha)

HEX
=> #rrggbb

HSL
=> hsl (hue, saturation, lightness)
=> hue : 0은 red, 120은 green, 240은 blue
=> saturation : 0%는 shade of gray, 100%은 full color
=> lightness: 0%는 black, 50%는 light하고 dark, 100%는 white

HSLA
=> hsla (hue, saturation, lightness, alpha)

Color Values
=> RGB, HEX, HSL, RGBA, HSLA

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

CSS Background

Background-color
=> background-color

opacity opacity / transparency 지정

Background-image
=> background-image
<style>
  body {
    background-image: url("paper.gif");
  }
</style>

Background-Repeat
=> background-image를 repeat
=> repeat-x, repeat-y, no-repeat

Background-Position
=> right top----

Background Attachment
=> background image가 scroll / fix 되어야 하는지 지정

Background - Shorthand property
=> single property내에 모든 background property들을 지정하는 것이 가능

background	Sets all the background properties in one declaration
background-attachment	Sets whether a background image is fixed or scrolls with the rest of the page
background-clip	Specifies the painting area of the background
background-color	Sets the background color of an element
background-image	Sets the background image for an element
background-origin	Specifies where the background image(s) is/are positioned
background-position	Sets the starting position of a background image
background-repeat	Sets how a background image will be repeated
background-size	Specifies the size of the background image(s)

CSS Borders

border-style

dotted	점선
dashed	dashed
solid	solid
double	두 줄
groove	3D grooved border
ridge	3D ridged border
inset	3D inset border
outset	3D outset border
none	no border
hidden	hidden border

border-width

px (5px, 2px )	a b (bottom, sides) / a b c d (top, right, bottom, left)
medium, thick

border-radius

border	Sets all the border properties in one declaration
border-bottom	Sets all the bottom border properties in one declaration
border-bottom-color	Sets the color of the bottom border
border-bottom-style	Sets the style of the bottom border
border-bottom-width	Sets the width of the bottom border
border-color	Sets the color of the four borders
border-left	Sets all the left border properties in one declaration
border-left-color	Sets the color of the left border
border-left-style	Sets the style of the left border
border-left-width	Sets the width of the left border
border-radius	Sets all the four border-*-radius properties for rounded corners
border-right	Sets all the right border properties in one declaration
border-right-color	Sets the color of the right border
border-right-style	Sets the style of the right border
border-right-width	Sets the width of the right border
border-style	Sets the style of the four borders
border-top	Sets all the top border properties in one declaration
border-top-color	Sets the color of the top border
border-top-style	Sets the style of the top border
border-top-width	Sets the width of the top border
border-width	Sets the width of the four borders

CSS Margin

margin	A shorthand property for setting the margin properties in one declaration
margin-bottom	Sets the bottom margin of an element
margin-left	Sets the left margin of an element
margin-right	Sets the right margin of an element
margin-top	Sets the top margin of an element

CSS Padding

padding	A shorthand property for setting all the padding properties in one declaration
padding-bottom	Sets the bottom padding of an element
padding-left	Sets the left padding of an element
padding-right	Sets the right padding of an element
padding-top	Sets the top padding of an element

CSS Dimension

height	Sets the height of an element
max-height	Sets the maximum height of an element
max-width	Sets the maximum width of an element
min-height	Sets the minimum height of an element
min-width	Sets the minimum width of an element
width	Sets the width of an element

CSS Box Model

Margin > Border > Padding > Content

CSS Outline

Outline > Border > Content

LIST