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
<head>
    <style>
        *{}                        전체 선택자(*)
        태그명{}                    태그 선택자(태그명)
        #id{}                      id 선택자(#아이디명)
        .class{}                    class 선택자 (.클래스명)
        부모선택자>자식선택자{}      부모선택자의 자식선택자들 선택 (>)
        부모선택자 자식선택자{}      부모선택자의 자식선택자들 선택 ( )
        형제A선택자+형제B선택자{}    형제A선택자 바로 뒤의 형제 선택자B 선택(+)
        형제A선택자~형제B선택자{}    형제A선택자 뒤의 모든 형제 선택자B 선택(~)
        [속성]{}                    속성을 가진 모든 태그 선택([속성명])
        [속성="값"]{}               특정 값을 가진 속성을 가진 모든 태그 선택([속성명="값"])
        선택자[속성~="값"]{}        값을 단어로 포함하면 선택. 값 앞뒤에 공백이 있다면 선택(~=)
        선택자[속성|="값"]{}        값과 동일하거나 동일한 값으로 시작할 경우 선택(|=)
        선택자[속성*="값"]{}        값을 하나라도 포함하면 선택(*=)
        선택자[속성^="값"]{}        값으로 시작하면 선택(^=)
        선택자[속성$="값"]{}        값으로 끝나면 선택($=)
        
        a:link{}                    방문 전 (선택자:link)
        a:visited{}                 방문 후 (선택자:visited)
        a:hover{}                   마우스 올리면 (선택자:hover)
        a:active{}                  클릭한 순간 (선택자:active)
        
        input:checked{}             선택되어 지면
        input:disabled{}            비활성화 되면
        input:enabled{}             활성화 되면
        input:focus{}               마우스 커서로 선택되면
        
        p:empty{}                   비어있을 경우
        p:fist-child{}              첫 자식(첫 자식이 다른 자식이면 선택안됨)
        p:last-child{}              마지막 자식
        p:only-child{}              자식이 하나인 경우
        p:fist-of-type{}            첫 자식(첫 자식이 다른 자식이더라도 선택안됨)
        p:nth-child(n){}            n번째 자식
        p:nth-child(odd){}          홀수 자식
        p:nth-child(even){}         짝수 자식
    </style>
</head>

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

[CSS] style 정리  (0) 2020.11.28
[CSS] css 적용방법 3가지  (0) 2020.11.28
<head>
    * internal
    <style>
    	HTML 파일 내 스타일 내용 기입
    </style>
    
    * exteral
    <link ref="stylesheet" type="text/css" href="css파일 경로" />
        별도 .css 파일 내 스타일 내용 기입
</head>

<body>
    * inline
    <div style="">
        태그 style 속성 내 스타일 내용 기입
    </div>
</body>

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

[CSS] style 정리  (0) 2020.11.28
[CSS] 선택자 selector  (0) 2020.11.28

+ Recent posts

1