코딩왕랄프👊🏻

[CSS] CSS 정리 본문

카테고리 없음

[CSS] CSS 정리

hyerm_2 2021. 7. 8. 16:31
반응형
SMALL
CSS?

Cascading Style Sheets

HTML 문서를 style

<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