CSS3

HTML5와 더불어 이슈화 되고 있는 CSS3를 정리 합니다.


CSS 선언


외부 CSS 호출

내부 CSS 선언


CSS 파일 기본 설정

@charset "utf-8";  

@font-face {
    font-family: "bootstrap-icons";
    src: url(./fonts/bootstrap-icons.woff2) format("woff2"), url(./fonts/bootstrap-icons.woff) format("woff");
}

변수 선언과 함수

:root {
    --변수명: 값;    
}

var(--변수명)
calc(계산식)
min()               /* 최소값 */
max()               /* 최대값 */
minmax(최소값, 최대값)
fit-content()
clamp();

repeat(반복 횟수, 반복 내용)

Selectors

*                   /* 모든 Element */
E                   /* Element 이름으로 지정 */
#id                 /* ID로 지정 */
.class              /* Class 이름으로 지정 */
 
[attr]              /* Attribute로 지정 */
[attr="val"]        /* Attribute 값이 val */
[attr^="val"]       /* Attribute 값이 val로 시작 */
[attr$="val"]       /* Attribute 값이 val로 마침 */
[attr~="val"]       /* Attribute 값이 val이 아님 */
[attr*="val"]       /* Attribute 값이 val을 포함 */
[attr|="val"]       /* Attribute 값이 val ??? */

E F                 /* E의 자식인 모든 F */
E > F               /* E의 바로 아래 자식인 모든 F */
E + F               /* E의 바로 뒤에 형재인 F */
E ~ F               /* E의 형재인 모든 F */

E:has(F)            /* F 자식을 가진 E */
E:first             /* 첫번째 Element */
E:last              /* 마지막 Element */
E:before            /* 이전 Element */
E:after             /* 다음 Element */
E:even              /* 짝수 Element */
E:odd               /* 홀수 Element */
E:eq(n)             /* n번째 Element */
E:gt(n)             /* n번째 이후의 Element */
E:lt(n)             /* n번째 이전의 Element */
E:root              /* Root Element */
E:not(s)            /* s와 일치하지 않는 E Element, 예) input:not(:checkbox) */
E:empty             /* 자식이 없는 모든 E Element */
E:nth-child(n)      /* n번째 자식 Element인 모든 E Element */
E:nth-last-child(n) /* 끝에서 n번째 자식 Element인 모든 E Element */*/
E:only-child        /* 형제가 없는 자식 Element인 모든 E Element */
E:first-child       /* 첫번째 자식 Element인 모든 E Element*/ 
E:last-child        /* 마지막 자식 Element인 모든 E Element */
E:nth-child(even)   /* 짝수 자식 Element인 모든 E Element */
E:nth-child(odd)    /* 홀수 자식 Element인 모든 E Element */
E:nth-child(Xn+Y)   /* 예) a:nth-child(3n+2) : n을 0부터 대입하여 이에 해당하는 자식 Element인 모든 E Element */
E:nth-of-type(n)    /* an E element, the n-th sibling of its type */
E:nth-last-of-type(n) /* */
E:first-of-type     /* */
E:last-of-type      /*  */
E:only-of-type      /* */
E:link              /* 사용자가 방문하지 않은 링크를 가진 Element */
E:visited           /* 사용자가 방문한 링크를 가진 Element */
E:active            /* 활동 중인 링크 Element */
E:hover             /* Mouse가 지나가는 Element */
E:focus             /* Focus를 가진 Element */
E:target            /* target을 가진 Element */
E::first-line       /* E Element의 첫번째 라인 */
E::first-letter     /* E Element의 첫번째 문자 */
E::before           /* E Element 이전에 추가된 content */
E::after            /* E Element 이후에 추가된 content */
E:enabled           /* 활성화된 E Element */
E:disabled          /* 비활성화된 E Element */
E:checked           /* 여러 항목중에서 선택된 Element */
E:lang(ko)          /* 언어가 ko인 Element */

​


화면 구성


Media Queries

@media (min-width: 576px) {
  /* sm : 화면 넓이 700으로 테스트 */
}

@media (min-width: 768px) {
  /* md */
}

@media (min-width: 992px) {
  /* lg */
}

@media (min-width: 1200px) {
  /* xl */
}

@media (min-width: 1400px) {
  /* xxl */
}

@media (pointer:coarse) {
  /* Touch 화면 : 정확도 낮음 */
}

@media (pointer:fine) {
  /* Touch 화면 : 정확도 높음 */
}

@media (hover) {
  /* Hover 가능한 장치 */
}

@media (hover:none) {
  /* Hover 불가능한 장치 */
}

@media (any-hover: hover) {
  /* Hover 가능한 장치 */
}

@media (any-hover:none) {
  /* Hover 불가능한 장치 */
}

@document url("https://www.example.com/") {
    
}

@supports (display: grid) {
    
}

@viewport {
    width: device-width;
}

@viewport {
    orientation: landscape;
}

Box Model

.item {
    box-sizing: border-box;       /* content-box, border-box */

    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin: top right bottom left;
    margin: top right;
    margin: all;
    
     border-top: 1px solid #E6E6E6; 
    border-top-color
    border-top-left-radius
    border-top-right-radius
    border-top-style
    border-top-width
    border-right: 1px solid #E6E6E6; 
    border-right-color
    border-right-style
    border-right-width
    border-bottom: 1px solid #E6E6E6;
    border-bottom-color
    border-bottom-left-radius
    border-bottom-right-radius
    border-bottom-style
    border-bottom-width
    border-left: 1px solid #E6E6E6; 
    border-left-color
    border-left-style
    border-left-width
    border: 1px solid black;
    border-color
    border-style
    border-width
    
    border-collapse: collapse;
    border-image
    border-image-outset
    border-image-repeat
    border-image-slice
    border-image-source
    border-image-width
    border-radius
    box-shadow
    
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding: top right bottom left;
    padding: top right;
    padding: all;
    
    outline
    outline-color
    outline-style
    outline-width
    outline-offset
    
    /* https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Logical_Properties */
    block-size
    max-block-size
    min-block-size
    
    inline-size
    max-inline-size
    min-inline-size
    
    width: 100px;
    max-width: 200px;
    min-width: 15px;
    
    height: 100px;
    max-height: 200px;
    min-height: 15px;
    
    /* both, horizontal, vertical, none */
    resize: none;                 /* 크기 조정 */
    
    align: center;
    vertical-align: top;
    
    opacity: .4; 
}

​


Scrollbars

.item {
    overflow: hidden; 
    overflow-X: auto; 
    overflow-Y: scroll;
    
    scrollbar-color: rebeccapurple green;
    scrollbar-width: thin;
    
    scrollbar-face-color: #ffffff;
     scrollbar-shadow-color: #d2e5f4;
     scrollbar-highlight-color: #d2e5f4;
     scrollbar-3dlight-color: #ffffff;
     scrollbar-darkshadow-color: #ffffff;
     scrollbar-track-color: #ffffff;
     scrollbar-arrow-color: #d2e5f4;
}

​


before, after

.item::after {
    content: '~';                 /* 추가할 내용 */
    content: none;
    
    content: url("http://www.example.com/test.png");
    content: linear-gradient(#e66465, #9198e5);
    
    content: open-quote;
    content: close-quote;
    content: no-open-quote;
    content: no-close-quote;
    
    content: open-quote chapter_counter;
}

Display

  • block

  • inline, inline-block

  • position, float

  • table, table-row, table-item

  • flex, inline-flex

  • grid, inline-grid

  • flow-root

  • contents

  • none

.item {
    /* layout에서도 지운다 */
    display: none;
    display: block flex;
    
    /* layout에서는 남겨 둔다 */
    visibility: hidden;           /* visible, hidden, collapse */
}

Flex (FlexBox)

  • main axis : 중심축
  • cross axis : 반대축
.container {
    display: flex;
    flex-direction: row;          /* row, column */
    flex-wrap: wrap;              /* wrap, nowrap */
    flex-flow: ~;
    justify-content: center;      /* 중심축의 정렬 방식 */
    align-items: center;          /* 반대축의 정렬 방식 */
    align-content: center;
}

.item {
    order: 1;                     /* 항목의 표시 순서 */
    flex-grow: 2;                 /* 항목의 늘어나는 상대 크기 */
    flex-shrink: 2;               /* 항목의 줄어드는 상대 크기 */
    flex-basis: 10%;              /* 항목의 절대 크기 */
    flex: 2 2 auto;               /* grow, shrink, basis */
    align-self: center;           /* 항목의 절대 위치 지정 */
}

​


Grid

.container {
    display: grid;
    
    grid-template-columns: 1fr 2fr 1fr;     /* 열 넓이 정의 */
    grid-template-rows: 100px 200px;        /* 행 높이 정의 */
    grid-auto-rows: 150px;                  /* 행 높이 정의 */
    grid-auto-rows: minmax(150px, auto);    /* 행 높이 정의 */
    grid-template-areas: ~;
    
    grid-column-gap: 10px;                  /* 열간 간격 */
    grid-row-gap: 10px;                     /* 행간 간격 */       
    grid-gap: 10px;                         /* 행과 열간 간격 */
}

.item {
    grid-column-start: 2;                   /* 시작 열 번호 (1,...) */
    grid-column-end: 4;                     /* 종료 열 번호 (...,-1)*/
    grid-column: 2 / 4;
    grid-row-start: 1;                      /* 시작 행 번호 (1,...) */
    grid-row-end: 3;                        /* 종료 행 번호 (...,-1)*/
    grid-row: 1 / 3;
    grid-area: ~;
}

​ 

.item {
    float:left; 
    filter:alpha(opacity=40);
    table-layout:fixed; white-space: nowrap;
}

​


Position

  • static, relative, fixed, absolute
/* 정적 위치 */
div {
    position: static;
}

/* 상대 위치 */
div {
    position: relative;
    left: 30px;
}

/* 고정 위치 : 화면 기준 */
div {
    position: fixed;
    top: 0px;
    left: 0px;
}

/* 절대 위치 : parent node 기준 */
div {
    position: absolute;
    top: 0px;
    left: 0px;
}

.item {
    z-index: 200;
}

​


Multi-column

.item {
    break-after
    break-before
    break-inside
    
    column-count
    column-fill
    column-gap
    column-rule
    column-rule-color
    column-rule-style
    column-rule-width
    column-span
    column-width
    columns
    
    orphans
    windows
}

글자 모양


Fonts

  • @font-face
@font-face {
    font-family: "bootstrap-icons";
    src: url(./fonts/bootstrap-icons.woff2) format("woff2"), 
         url(./fonts/bootstrap-icons.woff) format("woff");
}

.item { 
    font-family: 'Nanum Gothic', sans-serif;
    font-style: italic;
     font-weight: bold;
    font-variant-ligatures: normal;
     font-size: 14px;
    font-feature-settings: 'liga';
    
    letter-spacing: 1px;
}

Text

.item {
    text-rendering: optimizeLegibility;
     list-style: none; 
    list-style-type: none;
    line-height: 1.5;
    line-height: 27px;
    
    text-decoration-line: none;
    text-decoration-line: underline;
    text-decoration-color: greenyellow;
    
    text-align: center;                 /* 글자 정렬 */
    text-indent: -3000px; 
    text-overflow: ellipsis;
    
     color: #777777;
     clear: both;
     
    cursor: pointer/hand;
}

Color

  • opacity
.item {
    color: white;
    
    color-adjust
    opacity
}

​


Backgrounds

.item {
    background-color: white;
    background-color: transparent;
     background: transparent
        url(/design/common/image/btn/btn_basic_left.gif) 
        no-repeat/repeat/repeat-x scroll left top;
    
    background-attachment
    background-clip
    background-color
    background-image
    background-origin
    background-position
    background-position-x
    background-position-y
    background-repeat
    background-size
}

​


CSS3 Module


Transform

.item {
    transition: transform 0.5s;         /* 0.5초간 transform 실행 */
    
    /* 이차원 효과 */
    transform: translate(120px, 50%);
    transform: rotate(0.5turn);
    transform: scale(2, 0.5);
    transform: skew(30deg, 20deg);
    transform: skewX(30deg);
    transform: skewY(1.07rad);
    transform: matrix(1, 2, 3, 4, 5, 6);
    transform: perspective(17px);

    /* 삼차원 효과 */
    transform: translate3d(12px, 50%, 3em);
    transform: translateX(2em);
    transform: translateY(3in);
    transform: translateZ(2px);
    transform: rotate3d(1, 2, 3, 10deg);
    transform: rotateX(10deg);
    transform: rotateY(10deg);
    transform: rotateZ(10deg);
    transform: scale3d(2.5, 1.2, 0.3);
    transform: scaleX(2);
    transform: scaleY(0.5);
    transform: scaleZ(0.3);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    
    /* 효과를 중첩하여 사용 */
    transform: scale(0.5) translate(-100%, -100%);    
}

​ 

const item = document.querySelector('.item');

item.style.transform = 'translate(-100vw)';

​


Transition

.item {
    transition:    ;
    transition: transform 0.5s;         /* 0.5초간 transform 실행 */
    transition: width 2s, height 2s, background-color 2s, transform 2s;
    
    transition-property: width, color;
    transition-duration: 0.5s;          /* 모든 transition 시간 지정 */
    transition-timing-function: ease;   /* ease, linear, step-end */
    transition-delay: 0.5s;             /* transition 시작전 대기시간 */
}

​ 

const item = document.querySelector('.item');

item.addEventListener('transitionend', function() {}, true);

​


Animation

.item {
    animation-delay: 0.5s;              /* Animation 시작 전 대기시간 */
    /* alternate. 종료후 역방향으로 Animation 시작 */
    animation-direction: alternate;     /* Animation 종료후 action 지정 */
    animation-duration: 3s;             /* Animation 지속 시간 */
    /* infinite. 무한 반복 */
    animation-iteration-count: 1;       /* Animation 반복 횟수 */
    animation-name : keyFrameName;      /* @keyframes 이름 */
    animation-play-state: ~;            /* Animation을 멈추거나 다시 실행 */
    animation-timing-function: ~;       /* 중간 상태 전환의 시간 간격 지정 */
    animation-fill-mode: ~;             /* Animation 전/후의 상태 지정 */
}

@keyframes keyFrameName {
    0% { top: 0; left: 0; }
    30% { top: 50px; }
    70% { left: 50px; }
    100% { top: 100px; left: 100%; }
}

@keyframes slidein {
    from {
        margin-left:100%;
        width:300%
    }

    to {
        margin-left:0%;
        width:100%;
    }
}

​ 

const item = document.querySelector('.item');

item.addEventListener("animationstart", listener, false);
item.addEventListener("animationend", listener, false);
item.addEventListener("animationiteration", listener, false);

function listener(e) {
    switch (e.type) {
    case 'animationstart': break;
    case 'animationend': break;
    case 'animationiteration': break;
    }
}

​


Counter

.item {
    counter-increment
    counter-reset
}

​


Cascade

​


Conditional

​


Contain

​


Easing

​


Gcpm

​


Image

.item {
    image-orientation
    image-rendering
    image-resolution
    
    object-fit
    object-position
}

​


List

.item {
    list-style-image
    list-style-type
    list-style-position
    list-style
}

​


Page

​


Sizing

​


Snapshot


ui

​


values

​


web-animations

​


Masking

​


Miscellaneous

​


Motion Path

​


Namespaces

​


Paged Media

​


Positioning

​


Ruby

​


Scroll Snap

​


Scroll Snap Points


Shapes


Table


자료형


Custom Properties


Writing Modes


CSSOM View


Filter Effects


의사 클래스


의사 요소


CSS Sample

sample {
     z-index:200; position:absolute/relative; float:left; opacity:.4; filter:alpha(opacity=40);	
     top:0px; left:0px; width:20px; *width:; height:27px !important; line-height:27px; resize:none;
     min-width:15px; min-height:15px;
     border: none; border-collapse:collapse; border:1px solid #dbdbdb;
     border-top:#D9D9D9 solid 1px; border-left:#D9D9D9 solid 1px; border-right:#D9D9D9 solid 1px; border-bottom:1px solid #E6E6E6;
     margin-top:6px;	margin-right:5px;
     padding-left:8px; padding-right:8px;
     align:center; vertical-align:top;
     
     text-align:center; text-decoration:none/underline; text-indent:-3000px; text-overflow:ellipsis;
        overflow:hidden; overflow-X:hidden/auto; overflow-Y:scroll;
     font-family:Arial,AppleGothic,Sans-serif; font-size:15px; font-weight:bold;
     list-style:none; list-style-type:none;
     clear: both;
     
     color:#777777;
     background-color:transparent !important;
     background-color:#333333;
     background:transparent url(/design/common/image/btn/btn_basic_left.gif) no-repeat/repeat/repeat-x scroll left top;
     
     display:inline-block; visibility:hidden;	
     cursor:pointer/hand;
     
     table-layout:fixed; white-space: nowrap;
     
     scrollbar-face-color:#ffffff;
     scrollbar-shadow-color:#d2e5f4;
     scrollbar-highlight-color:#d2e5f4;
     scrollbar-3dlight-color:#ffffff;
     scrollbar-darkshadow-color:#ffffff;
     scrollbar-track-color:#ffffff;
     scrollbar-arrow-color:#d2e5f4;
 }

Reserved

/* 부모 박스의 크기에 따라 다르게 표시 */
@container (max-width: 350px) {
    display: block;
}

CSS3 in JavaScript

element.style.setPropertyValue('--변수명', 값);
element.style.getPropertyValue('--변수명');
getComputedStyle(element).getPropertyValue('--변수명');

참고 문헌

[[Category:기술 자료실|Category:기술 HTML5.md)

최종 수정일: 2022-12-14 18:11:56
이전글 :
다음글 :
상단 menu
arrow_back_ios
arrow_forward_ios