h1{

     * 폰트
     font-family : 글꼴;
     font-style : italic;
                : normal;
                : oblique;
     font-size : xx-small;
               : x-small;
               : small;
               : medium;
               : large;
               : x-large;
               : xx-large;
               : larger;
               : samller;
               : 12px;
               : 150%;
     font-weight : bolder;                 진하기
                 : normal;
                 : bold;
                 : bolder;
                 : lighter;
                 : 100;
                 
     * 텍스트
     color : #ffffff;
           : rgb(255,255,255);
           : rgba(255,255,255,0.5);        투명도 0-투명, 1-불투명
     text-align : center;
                : justify;                 오른쪽 여백 없앰
     text-decoration : none;               밑줄 설정
     text-transform : uppercase;           대문자
                    : lowercase;           소문자
                    : capitalize;          첫글자만 대문자
     text-indent: 50px;                    첫 라인 들여쓰기
     letter-spacing : -10px;               글자 간격
     line-height : 10px;                   라인 간격
     word-spacing : 10px;                  단어 간격 
     text-shadow: 5px 10px 5px gray;       x좌표, y좌표, 투명도, 색
		   
     * display
     display : none;                        안보이게
             : block;                       줄바꿈
             : inline;                  같은 줄(width, height, margin-top,margin-bottom 무시)
             : inline-block;            같은 줄(width, height, margin-top,margin-bottom 적용)
		   
     visibility : visible;
                : hidden;
                : collapse;                 테이블 안보이게
                
     * 투명도
     opacity : 0.5;                         투명도 0-투명, 1-불투명
		   
     * box model
     width : 10px;                           content의 가로
     height : 10px;                          content의 세로
     max-width : 10px;                       창이 작아지면 자동 조절
          
     padding : 10 20 30 40;                  상 우 하 좌
          
     border : solid 5px #ffffff;
     border-style : solid;
                  : none;
                  : dotted;
                  : dashed;
                  : solid;
                  : double;
                  : groove;
                  : ridge;
                  : inset;
                  : outset;
                  : hidden;
     
     border-width : thin;
     border-color : #ffffff;
     
     border-radius : 10px 10px 10px 10px / 10px 10px 10px 10px;
        (테두리 둥글게 top-letf-x, t-right-x, bottom-l-x, b-r-x / t-l-y, t-r-y, b-l-y, b-r-y)
     border-image : ;
     box-shadow : ;
     border-collapse:collapse;
     
     margin : 10 20 30 40;                            상 우 하 좌
     margin : auto;                                   가운데 정렬
                   
     box-sizing : content-box;            width와 height가 content의 길이를 나타냄.(default값)
                : border-box;                         width와 height가 border의 길이를 나타냄.
     
     * background
     background-color : #ffffff;                     색
     background-image : url('경로'),url('경로2');    배경 이미지
     background-repeat : repeat;                     반복
                       : no-repeat;
                       : inherit;
                       : round;
                       : space;
                       : repeat-y;
                       : repeat-x;
                       : no-repeat;
     background-attachment : fixed;                   붙이는 방식
     background-position : center;                    위치
     
     * potision
     potision : static;                           (default) top, bottom, left, right에 무관.
              : relative;                              normal position 기준. 부모에 적용.
              : absolute;                            가장 가까운 부모 기준.      자식에 적용.
              : fixed;                                 view port 기준
     z-index : -1;                                     큰 값이 위로 올라온다.
     overflow : visible;                               내부 요소가 부모의 범위를 벗어날 경우
              : hidden;                    
              : scroll;                    
              : auto;                                  필요할 때만 scroll 생성
     		                    
     * float                    
     float : left;                   자식 float 속성을 주면 부모는 overflow : hidden;을 준다.
           : right;
     clear : both;
     
     * cursor
     cursor : auto;
            : text;
            : crosshair;
            : default;
            : e-resize;
            : help;
            : move;
            : n-resize;
            : ne-resize;
            : nw-resize;
            : s-resize;
            : se-resize;
            : sw-resize;
            : w-resize;
            : pointer;
            : wait;
            : progress;
     
      * ext			
      list-style-image: url('이미지 경로');             리스트에 이미지 background
     
     }
     >
</head>

 

'FRONT END > CSS' 카테고리의 다른 글

[CSS] 선택자 selector  (0) 2020.11.28
[CSS] css 적용방법 3가지  (0) 2020.11.28

+ Recent posts

1