CSS tag

김빛나리·2020년 7월 2일
CSS
0
  • head안에 style이 있고 그 안에 css tag들을 사용할 수 있습니다.
  • 예시:
    <head>
      <style>
        h1{
           color:blue;
           font-size:12px;
          }
      </style>
    </head>

    <body>
    </body>

1. Syntax

  • Selector
    • selector {
      Declaration ( Property: Value );
      Declaration ( Property: Value );
      }
    • h1{color:blue; font-size:12px;}
    • p{color:red; text-align:center;}
  • Comments
     /*hello*/

2. Selectors

  • element selector
    • p{} / h1{}
  • id selector
    • #para1{}
  • class selector
    • .center{}
    • 특정 elements의 class
      • p.center{}
  • universal selector
    • *{}
  • grouping selector
    • h1, h2, p{}

3. Colors

  • background color
    • background-color:blue;
  • text color
    • color:blue;
  • border color
    • border:1px solid blue;

4. Background

  • color
    • body{background-color: lightblue;}
  • image
    • body{background-image: url("paper.jpg");}
  • repeat
    • body{
      background-image: url("gradient_bg.png");
      background-repeat: repeat-x;
      }
  • no-repeat
    • body{
      background-image: url("img_tree.png");
      background-repeat: no-repeat;
      }
  • position
    • body{
      background-image: url("img_tree.png");
      background-repeat: no-repeat;
      background-position: right top;
      }
  • attachment
    • body{
      background-image: url("img_tree.png");
      background-repeat: no-repeat;
      background-position: right top;
      background-attachment: fixed;
      }
    • fixed: 스크롤을 내려도 계속 따라옴
    • scroll: 스크롤 내리면 그따라 올라감
  • shorthand property
    • body{
      background: #f1f1f1 url("img_tree.png") no-repeat right top;}

5. Borders

  • borde-style
    • dotted
    • dashed
    • solid
    • bouble
    • groove
    • ridge
    • inset
    • outset
    • none
    • hidden
    • mixed
      • dotted dashed solid double
      • top에서부터 left까지 하나씩
    • border-top-style
      • top/right/bottom/left 다 설정해줄 수 있음
  • border-width
    • 0px
    • medium
    • thick
    • 2px 10px 4px 20px
      • top에서부터 left까지 하나씩
  • border-color
  • shorthand property
    • width style color
    • border: 5px solid red;
  • rounded border
    • border-radius: 5px;

6. Margin

7. Padding

8. Height / Width

9. Box Model

  • magin - border - padding - content

10. Outline

  • outline - border - content
  • outline-offset
    • outline-offset: 15px;
    • outline과 border사이 거리가 15px
  • background-color를 해도 border안에만 color가 입혀집니다.

11. Text

  • color
  • text-align
  • text-decoration
    • none
    • overline
    • line-through
    • underline
  • text-transform
    • uppercase
    • lowercase
    • capitalize
  • text-indent
    • 50px
  • letter-spacing
    • 3px
    • -3px
  • line-height
    • 0.8
    • 1.8
  • word-spacing
    • 10px
    • -5px
  • text-shadow
    • 가로-세로-color
    • 3px 2px red;

12. Fonts

  • font-size
  • font-weight
  • a:link{ ~내용~ }
  • a:visited{ ~내용~ }
  • a:hover{ ~내용~ }
  • a:active{ ~내용~ }

14. Lists

  • list-style-type
    • circle
    • square
    • upper-roman
    • lower-alpha
    • none
  • list-style-position
    • outside
    • inside
  • shorthand property
    • type-position
    • list-style: square inside;

15. Table

  • vertical-align
    • top
    • bottom

16. Overflow

  • visible
    • 정해진 크기에 상관없이 다 보여줍니다.
  • hidden
    • 정해진 크기를 지나면 지나진 것들은 보여지지 않습니다.
  • scroll
    • 정해진 크기를 지나면 스크롤내려서 볼 수 있습니다.
  • auto
    • 스크롤과 비슷합니다.

17. Float

  • right
  • left

18. Opacity

19. Navigation Bar

  • list 사용

참고: https://www.w3schools.com/css/default.asp

profile
김빛나리
이전 포스트

HTML tag

다음 포스트

JavaScript tag

0개의 댓글