CSS3 요소

# rem 사용
- 1rem => 10px
- 3.2rem => 32px

    html { 
      font-size: 62.5%; /* 1rem = 10px */
    }

    h1 { font-size: 3.2rem; margin-bottom: 1rem; }
    h2 { font-size: 2.8rem; margin-bottom: 1rem; }
    h3 { font-size: 2.4rem; margin-bottom: 1rem; }
    h4 { font-size: 2.0rem; margin-bottom: 1rem; }
    h5 { font-size: 1.6rem; margin-bottom: 1rem; }
    h6 { font-size: 1.2rem; margin-bottom: 1rem; }  
    p  { font-size: 1.6rem; margin-bottom: 1rem; }

# CSS 웹킷 기반 스크롤 슬라이딩

-webkit-overflow-scrolling: touch;

 

 

# CSS 계산 (calc) [ie9+]

div { width : calc(100% - 50px); }

# CSS 계산(min, max)
- 정의된값중 작은값, 큰값을 계산함.

div { width:  min(500px, 100%); }        // div { width: 100%; min-width: 500px }   
div { width:  max(1200px, 100%); }     // div { width: 100%; max-width: 1200px }   

div { width :  min(20px, 10%); }
div { width :  max(20px, 10%); }

- clamp(min, val, max) : 기준값val 값은 12px, 20px 안의 값일때 유효함

font-size: clamp(12px, 2.5vw, 20px);    // 2.5% 크기로, 12px 작지않고, 20px 보다 크지 않은값

 

# CSS 영역 마스크 (ie8+) 
- rect : 사각형 [상단, 오른쪽, 하단, 왼쪽]
- circle : 원

div { vclip: rect(0px,50px,200px,10px); }

 

# 이미지 마스크 
- clip-path : 이미지 대비 마스크 크기 
- shape-outside : 이미지 대비 접근 가능한 거리

img {
  float: left;
  clip-path:     circle(40%);
  shape-outside: circle(50%);     // 이미지보다 10%크게 
}

# CSS 마우스 이멘트 막기 (ie11+) [상단, 오른쪽, 하단, 왼쪽]

div.ex1 { pointer-events: none; }

 

 

 

 

# 가상선택자

:is(el, el)  :   괄호 안의 모든 요소에 동시에 동일한 스타일
- Level 1 : ul, ol 안의 strong 의 폰트크기 지정
- Level 2 : ul, ol 안의 ul, ol 안의 strong 의 폰트크기 지정

/* Level 1 */
:is(ul, ol) strong {
  font-size: 25px;
}
/* Level 2 */
:is(ul, ol) :is(ul, ol) strong {
  font-size: 20px;
}

:not(el)  : 괄호 안의 선택자 제외 하고.  자식요소 (.head, .body, .foot) 
- case1 : ".box" 안의  ".head"를 제외 하고 ( .body, .foot ) 배경색 변경
- case1 : ".box" 안의  ".head, .foot"를 제외 하고 ( .body ) 배경색 변경

/* case1 */
.box:not(".head) {
  background-color : gold
}  

/* case2 */
.box:not(".head):not(".foot) {
  background-color : gold
}

:has(el)  : 괄호 안의 형제(+), 자식 요소에 따라 부모요소의 스타일 적용
- case1 : "section" 자식요소 중 ".item_gold" 있으면 "section" 배경색 변경
- case2 : "ul li" 자식요소중 "input:checkd" 되어있으면  "ul li .inner" 배경색 변경

/* case1 */
section:has(.item_gold) {
  background-color: gold;
}

/* case2 */
ul li:has(input:checked) .inner {
  background-color: gold;
}

 

 

 

 

# display : flex;
* flex-wrap: 유연한 항목 줄바꿈 여부.
         - nowrap (default) : 기본값  
         - wrap     : 유연한 형태 줄바꿈.

* flex-direction : 플렉스 - 방향   
     - row (default)     : 왼쪽부터
     - row-reverse      : 오른쪽부터
     - column            : 위에부터 
     - column-reverse : 아래부터

 

align-content :플렉스 라인을 정렬 (상하 기준)
       - normal, stretch (default) :  공간채움

- center      : 중앙 정열

- flex-start   : 왼쪽 정열

- flex-end    : 오른쪽 정열

       - space-around   : 양쪽 끝에 절반 크기의 공백
       - space-between : 양끝에서 채움
       - stretch               : 공간채움
        

* justify-content : 가로 정열
       - normal (default) : 정열안함.

- center      : 중앙 정열

- flex-start   : 왼쪽 정열

- flex-end    : 오른쪽 정열
- space-around   : 앞뒤 절만만큰 떨어진 상태간역

- space-between : 앞뒤 붙은 상태에서 동일하게 

- space-evenly    : 앞뒤 모두 같은 간격

* align-items : 세로 정열
       -normal,stretch(default) : 공간채움
       - center     : 중앙 정열

- flex-start : 상단 정열

- flex-end  : 하단 정열

- baseline  : 컨테이너의 기준선
- stretch    : 상하 꽉채우기

 

# display : flex; 자식요소

* flex :  유연한항목 비율 조정
    - 0 1 auto (default):
    - flex-basis   : 나머지 유연한 항목에 비해 항목이 얼마나 커질지 지정하는 숫자
    - flex-shrink  : 나머지 유연한 항목에 비해 항목이 축소되는 정도를 지정하는 숫자
    - flex-basis    : 항목의 길이. 유효한 값: "auto", "inherit" 또는 "%", "px", "em"
    -  auto : 1 1 auto.
    -  initial :  0 1 auto
    -  none : 0 0 auto.
    - inherit : 상속
    - 1 : 균등 비율만큼
    - 2 : 균등 2배 비율

* align-self : align-items 속성 재정의
     - auto (default) : align-items 상속, 없으면 "stretch" 속성
     - stretch      : 요소가 컨테이너에 맞게 배치됩니다.
     - center       : 요소가 컨테이너의 중앙에 위치합니다.
     - flex-start   : 요소는 컨테이너의 시작 부분에 위치합니다.
     - flex-end    : 요소가 컨테이너의 끝에 위치합니다.
     - baseline    : 요소가 컨테이너의 기준선에 배치됩니다.
     - initial          : 이 속성을 기본값으로 설정합니다.