쏘-스보기
퀴-즈 이펙트 쏘-스 보기.exe
HTML
JAVASCRIPT
CSS
X
<div class="quiz__wrap">
    <div class="quiz">
        <span class="quiz__type"></span>
        <h2 class="quiz__question">
            <span class="number"></span>
            <div class="ask"> </div>
        </h2>
        <div class="quiz__view">
            <div class="dog">
                <div class="head">
                    <div class="ears"></div>
                    <div class="face"></div>
                    <div class="eyes">
                        <div class="teardrop"></div>
                    </div>
                    <div class="nose"></div>
                    <div class="mouth">
                        <div class="tongue"></div>
                    </div>
                    <div class="chin"></div>
                </div>
                <div class="body">
                    <div class="tail"></div>
                    <div class="legs"></div>
                </div>
            </div>
        </div>
        <div class="quiz__answer">
            <button class="confirm">정답 확인하기</button>
            <div class="result"></div>
        </div>
    </div>
</div>

@import url('https://webfontworld.github.io/neodgm/NeoDunggeunmo.css');

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    *,
    *:before,
    *:after {
        box-sizing: border-box;
    }
    
    a {
        text-decoration: none;
    }
    
    body {
        background-color: #f6f6f6;
        background-image:
            linear-gradient(90deg, #cdcccc 0px, #cdcccc 1px, transparent 1px, transparent 99px, transparent 100px),
            linear-gradient(#cdcccc 0px, #cdcccc 1px, transparent 1px, transparent 99px, transparent 100px),
            linear-gradient(#e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, transparent 100px),
            linear-gradient(90deg, #e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, transparent 100px),
            linear-gradient(transparent 0px, transparent 5px, #f6f6f6 5px, #f6f6f6 95px, transparent 95px, transparent 100px),
            linear-gradient(90deg, #e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, #e0e0e0 99px, #e0e0e0 100px),
            linear-gradient(90deg, transparent 0px, transparent 5px, #f6f6f6 5px, #f6f6f6 95px, transparent 95px, transparent 100px),
            linear-gradient(transparent 0px, transparent 1px, #f6f6f6 1px, #f6f6f6 99px, transparent 99px, transparent 100px),
            linear-gradient(#cdcccc, #cdcccc);
        background-size: 100px 100%, 100% 100px, 100% 10px, 10px 100%, 100% 100px, 100px 100%, 100px 100%, 100px 100px, 100px 100px;
    }
    
    #header {
        background: #262626;
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        position: relative;
        z-index: 10;
    }
    
    #header::before {
        content: '';
        border: 4px ridge #a3a3a3;
        position: absolute;
        left: 5px;
        top: 5px;
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        box-sizing: border-box;
        z-index: -1;
    }
    
    #header h1 {
        padding: 3px 3px 6px 10px;
        /*위쪽 오른쪽 아래쪽 왼쪽*/
        font-family: 'DungGeunMo';
        font-size: 30px;
    }
    
    #header h1 a {
        color: #fff;
    }
    
    #header h1 em {
        font-size: 16px;
        font-style: normal;
    }
    
    @media (max-width: 600px) {
        #header h1 em {
            display: none;
        }
    }
    
    #header nav {
        padding-right: 10px;
    }
    
    #header nav li {
        display: inline;
    }
    
    #header nav li a {
        color: #fff;
        padding: 0 10px;
        border: 1px dashed #fff;
        font-family: 'DungGeunMo';
        /* border-radius: 20px; */
    }
    
    #header nav li.active a {
        color: #000;
        background: #fff;
        box-shadow: 0px 0px 30px 5px rgba(255, 255, 255, 0.671);
    }
    
    .header nav .effect {
        margin-top: 10px;
    }
    
    .header nav .effect li a {
        border-radius: 40px;
    }
    
    #footer {
        background: #fff;
        text-align: center;
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
        margin-top: 150px;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 10000;
    }
    
    #footer a {
        color: #000;
        font-family: 'DungGeunMo';
    }
    
    #footer a:hover {
        text-decoration: underline;
    }
    
    /* quiz__wrap */
    .quiz__wrap {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        margin-top: 50px;
        margin-bottom: 50px;
        flex-wrap: wrap;
    }
    
    .quiz {
        max-width: 500px;
        width: 100%;
        background-color: #fff;
        border: 8px ridge #cacaca;
        margin: 10px;
    }
    
    .quiz__type {
        background-color: #cacaca;
        text-align: center;
        display: block;
        font-size: 16px;
        border: 3px ridge #cacaca;
        color: #3b3b3b;
        font-family: 'DungGeunMo';
        padding: 4px;
    }
    
    .quiz__question {
        border-top: 6px ridge #cacaca;
        border-bottom: 6px ridge #cacaca;
        padding: 20px 20px;
        font-family: 'LeeSeoyun';
        line-height: 1.3;
    }
    
    .quiz__question .number {
        color: rgb(43, 21, 240);
    }
    
    .quiz__question .ask {
        display: inline;
        /* 한 라인에 정렬 */
    }
    
    .quiz__answer {
        border-top: 6px ridge #cacaca;
        padding: 10px;
        background-color: #f5f5f5;
    }
    
    .quiz__answer .confirm {
        border: 6px ridge #cacaca;
        width: 100%;
        font-size: 22px;
        padding: 13px 20px;
        background-color: #d6d6d6;
        font-family: 'LeeSeoyun';
        cursor: pointer;
    }
    
    .quiz__answer .result {
        border: 6px ridge #cacaca;
        width: 100%;
        font-size: 22px;
        line-height: 1.3;
        padding: 13px 20px;
        box-sizing: border-box;
        text-align: center;
        font-family: 'LeeSeoyun';
    }
    .quiz__answer .input {
        width: 100%;
        border: 6px ridge #cacaca;
        font-size: 22px;
        padding: 13px 20px;
        background-color: #fff;
        font-family: 'LeeSeoyun';
        margin-bottom: 10px;
    }
    
    .quiz__view {
        background-color: #f5f5f5;
        position: relative;
        overflow: hidden;
        font-family: 'LeeSeoyun';
    }
    .quiz__view .true{
        width: 120px;
        height: 120px;
        line-height: 120px;
        background-color:rgb(107, 63, 237);
        color: #fff;
        border-radius: 50%;
        text-align: center;
        position: absolute;
        left: 70%;
        top: 100px;
        opacity: 0;
    }
    .quiz__view .false{
        width: 120px;
        height: 120px;
        line-height: 120px;
        background-color: #f54f78;
        color: #fff;
        border-radius: 50%;
        text-align: center;
        position: absolute;
        right: 70%;
        top: 100px;
        opacity: 0;
    }
    .quiz__view.like .true{
        opacity: 1;
        animation: wobble 0.6s;
    }
    .quiz__view.dislike .false{
        opacity: 1;
        animation: wobble 0.6s;
    }
    
    .quiz__selects{
        margin-bottom: 15px;
    }
    
    .quiz__selects label{
        display: flex;
    }
    .quiz__selects label input{
        position: absolute;
        left: -9999px;
    }
    .quiz__selects label span{
        font-size: 20px;
        line-height: 1.3;
        font-family: 'LeeSeoyun';
        padding: 10px;
        display: flex;
        align-items: center;
        width: 100%;
        border-radius: 10px;
        cursor: pointer;
        /* display: block; */
    }
    
    .quiz__selects label span::before{ /* 가상요소 before */
        content: '';
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #fff;
        margin-right: 15px;
        display: flex;
        flex-shrink: 0; /*0(원래크기)으로 수축시킴*/
        box-shadow: inset 0px 0px 0px 3px rgb(190, 182, 215);
        transition: all 0.2s;
    }
    
    .quiz__selects label input:checked + span{ /*checked했을때 속성값을 줄 수 있고 + 를 사용해 친구에게도 속성을 줄 수 있음*/
        background-color: rgb(227, 223, 247);
        color: rgb(107, 63, 237);
        transition: all 0.3s;
    }
    
    .quiz__selects label input:checked + span::before{ /*checked했을때 속성값을 줄 수 있고 + 를 사용해 친구에게도 속성을 줄 수 있음 */
        box-shadow: inset 0px 0px 0px 10px rgb(107, 63, 237);
    }
    
    .quiz__confirm{
        width: 100%;
        text-align: center;
    }
    
    .quiz__confirm .check {
        font-size: 22px;
        line-height: 1.3;
        padding: 13px 20px;
        border: 6px ridge #cacaca;
        box-sizing: border-box;
        text-align: center;
        font-family: 'LeeSeoyun';
        cursor: pointer;
        margin: 40px 0;
        transition: background 0.3s;
    }
    
    .quiz__confirm .check:hover{
        background: rgba(106, 63, 237, 0.497);
    }
    @keyframes wobble {
        0%   {transform: translateX(0) rotate(0deg);} /*transform 변형시키다 */
        15%  {transform: translateX(-25%) rotate(-5deg);}
        30%  {transform: translateX(20%) rotate(3deg);}
        45%  {transform: translateX(-15%) rotate(-3deg);}
        60%  {transform: translateX(10%) rotate(2deg);}
        75%  {transform: translateX(-5%) rotate(-1deg);}
        100% {transform: translateX(0) rotate(0deg);}
    }
    
    
    /* Dog */
    .dog .tail,
    .dog .chin,
    .dog .tongue::before,
    .dog .tongue::after,
    .dog .mouth,
    .dog .nose,
    .dog .teardrop,
    .dog .eyes,
    .dog .face::before,
    .dog .face::after,
    .dog .ears::before,
    .dog .ears::after {
        transition: 0.2s ease-in;
    }
    
    .dog {
        padding-top: 50px;
    }
    
    .dog .head,
    .dog .body {
        position: relative;
        width: 115px;
    }
    
    .dog .head {
        height: 115px;
        border-radius: 50% 50% 0 0;
        margin: 0 auto;
    }
    
    .dog .ears {
        position: relative;
        top: -14%;
        width: 100%;
    }
    
    .dog .ears::before,
    .dog .ears::after {
        content: "";
        position: absolute;
        top: 0;
        width: 35px;
        height: 70px;
        background: #CB7A1D;
        border-top: 11px solid #F7AA2B;
        border-left: 7px solid #F7AA2B;
        border-right: 7px solid #F7AA2B;
    }
    
    .dog .ears::before {
        left: 0;
        border-radius: 50% 45% 0 0;
    }
    
    .dog .ears::after {
        right: 0;
        border-radius: 45% 50% 0 0;
    }
    
    .dog .face {
        position: absolute;
        background: #F7AA2B;
        width: 100%;
        height: 100%;
        border-radius: 50% 50% 0 0;
    }
    
    .dog .face::before,
    .dog .face::after {
        content: "";
        display: block;
        margin: auto;
        background: #FEFEFE;
    }
    
    .dog .face::before {
        width: 15px;
        height: 35px;
        margin-top: 24px;
        border-radius: 20px 20px 0 0;
    }
    
    .dog .face::after {
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        width: 60px;
        height: 65px;
        border-radius: 45% 45% 0 0;
    }
    
    .dog .eyes {
        position: relative;
        top: 29%;
        text-align: center;
    }
    
    .dog .eyes::before,
    .dog .eyes::after {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 100%;
        background: #451D1C;
        margin: 0 14.5%;
    }
    
    .dog .teardrop {
        position: absolute;
        top: 125%;
        left: 19%;
        width: 6px;
        height: 6px;
        border-radius: 0 50% 50% 50%;
        transform: rotate(45deg);
        background: #FEFEFE;
        visibility: hidden;
    }
    
    .dog .nose {
        position: relative;
        top: 35%;
        width: 16px;
        height: 8px;
        border-radius: 35px 35px 65px 65px;
        background: #451D1C;
        margin: auto;
    }
    
    .dog .mouth {
        position: relative;
        top: 34.5%;
        width: 4px;
        height: 6px;
        margin: 0 auto;
        text-align: center;
        background: #451D1C;
    }
    
    .dog .mouth::before,
    .dog .mouth::after {
        content: "";
        position: absolute;
        top: -4px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 4px solid #451D1C;
        border-left-color: transparent;
        border-top-color: transparent;
        z-index: 2;
    }
    
    .dog .mouth::before {
        transform: translateX(-89%) rotate(45deg);
    }
    
    .dog .mouth::after {
        transform: translateX(-2px) rotate(45deg);
    }
    
    .dog .tongue {
        position: relative;
        z-index: 1;
    }
    
    .dog .tongue::before,
    .dog .tongue::after {
        content: "";
        position: absolute;
    }
    
    .dog .tongue::before {
        top: 10px;
        left: -7px;
        width: 18px;
        height: 0;
        border-radius: 50%;
        background: #451D1C;
        z-index: -1;
    }
    
    .dog .tongue::after {
        top: 14px;
        left: -4px;
        width: 12px;
        height: 0;
        border-radius: 20px;
        background: #F5534F;
        z-index: 5;
    }
    
    .dog .chin {
        position: relative;
        top: 47.5%;
        margin: 0 auto;
        width: 12px;
        height: 12px;
        border-top: 10px solid #E8E7EC;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-radius: 2px;
        z-index: 0;
    }
    
    .dog .body {
        position: relative;
        height: 139px;
        margin: auto;
        z-index: 0;
    }
    
    .dog .body::before,
    .dog .body::after {
        content: "";
        position: absolute;
        top: -1px;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        width: 100%;
        margin: auto;
        background: #F7AA2B;
    }
    
    .dog .body::after {
        top: -2px;
        bottom: -1px;
        width: 60px;
        background: #FEFEFE;
    }
    
    .dog .tail {
        position: absolute;
        left: -60%;
        bottom: 1px;
        background: #F7AA2B;
        width: 93px;
        height: 15px;
        transform: rotate(45deg);
        transform-origin: 100% 50%;
        border-radius: 25px 0 0 25px;
        z-index: -2;
        animation: movetail 0.1s linear infinite alternate forwards;
    }
    
    .dog .legs {
        position: absolute;
        bottom: 0;
        left: -10%;
        width: 120%;
        height: 15%;
        background: #F7AA2B;
        border-radius: 10px 10px 0 0;
    }
    
    .dog .legs::before,
    .dog .legs::after {
        content: "";
        position: absolute;
        bottom: 1px;
        background: #CB7A1D;
        z-index: -1;
    }
    
    .dog .legs::before {
        left: -7.5%;
        width: 115%;
        height: 55%;
        border-radius: 5px 5px 0 0;
    }
    
    .dog .legs::after {
        left: -3.5%;
        width: 107%;
        height: 250%;
        border-radius: 20px 20px 35px 35px;
    }
    
    .like .dog .face::before {
        margin-top: 10px;
    }
    
    .like .dog .face::after {
        height: 85px;
    }
    
    .like .dog .eyes {
        top: 13%;
    }
    
    .like .dog .eyes::before,
    .like .dog .eyes::after {
        width: 18px;
        height: 5px;
        margin: 0px 12.5%;
        transform: rotate(-37.5deg);
        border-radius: 20px;
    }
    
    .like .dog .eyes::after {
        transform: rotate(37.5deg);
    }
    
    .like .dog .nose {
        top: 18%;
    }
    
    .like .dog .mouth {
        top: 16.5%;
    }
    
    .like .dog .tongue::before {
        height: 12px;
    }
    
    .like .dog .tongue::after {
        height: 24px;
        animation: movetongue 0.1s linear 0.35s infinite alternate forwards;
    }
    
    .like .dog .chin {
        top: 34%;
    }
    
    .like .dog .tail {
        animation: movetail 0.1s linear infinite alternate forwards;
    }
    
    .dislike .dog .ears::before {
        transform: rotate(-50deg) translate(-7px, 2px);
    }
    
    .dislike .dog .ears::after {
        transform: rotate(50deg) translate(7px, 2px);
    }
    
    .dislike .dog .face::before {
        margin-top: 28px;
    }
    
    .dislike .dog .face::after {
        height: 55px;
    }
    
    .dislike .dog .eyes {
        top: 38%;
    }
    
    .dislike .dog .eyes::before,
    .dislike .dog .eyes::after {
        width: 18px;
        height: 5px;
        margin: 0px 14.5%;
        transform: rotate(-37.5deg);
        border-radius: 20px;
    }
    
    .dislike .dog .eyes::after {
        transform: rotate(37.5deg);
    }
    
    .dislike .dog .teardrop {
        animation: cry 0.1s ease-in 0.25s forwards;
    }
    
    .dislike .dog .nose {
        top: 44%;
    }
    
    .dislike .dog .mouth {
        top: 42%;
    }
    
    .dislike .dog .chin {
        top: 52%;
    }
    
    .dislike .dog .tail {
        transform: rotate(0);
        animation: none;
    }
    
    @keyframes movetongue {
        100% {
            height: 27px;
        }
    }
    
    @keyframes movetail {
        0% {
            transform: rotate(37deg);
        }
    
        100% {
            transform: rotate(52deg);
        }
    }
    
    @keyframes cry {
        100% {
            visibility: visible;
        }
    }

//선택자
    const quizType = document.querySelector(".quiz__type");                 //퀴즈 종류 : .quiz__type 클래스 선택
    const quizNumber = document.querySelector(".quiz__question .number")    //퀴즈 번호 ; .quiz__question 에서 .number 클래스 선택
    const quizAsk = document.querySelector(".quiz__question .ask")          //퀴즈 질문 : .quiz__question 에서 .confirm 클래스 선택
    const quizConfirm = document.querySelector(".quiz__answer .confirm")    //정답 확인 버튼 : .quiz__answer 에서 .result 클래스 선택
    const quizResult = document.querySelector(".quiz__answer .result")      //정답 결과 : .quiz__answer 에서 .result 클래스 선택
    const quizDog = document.querySelector(".quiz__view .dog")              //강아지 : .quiz__view에서 .dog클래스 선택
    
    //문제 정보
    const answerType = "웹디자인기능사";
    const answerNumber = 1+".";
    const answerAsk = "인접하는 두 색의 경계 부분에 색상, 명도, 채도의 대비가 더욱 강하게 일어나는 현상을 무엇이라고 하는가?"
    const answerResult = "연변대비";

    //문제 출력 :: innerHTML은 태그도 인식하고, innerText는 텍스트만 출력합니다..
    quizType.innerText = answerType         //answerType의 텍스트만 인식해 출력
    quizNumber.innerText = answerNumber     //answerNumber의 텍스트만 인식해 출력
    quizAsk.innerText = answerAsk           //answerAsk의 텍스트만 인식해 출력
    quizResult.innerText = answerResult     //answerResult의 텍스트만 인식해 출력

    //정답 숨기기
    quizResult.style.display="none"; // quizResult의 스타일에 display "none"을 선언해서 정답을 먼저 숨겨놓음

    //정답 확인
    //정답 버튼을 클릭하면 -> 확인버튼 안보이게... 숨겨진 정답은 보이게...
    //정답을 확인하면 강아지가 웃고 있어야 함 // 클래스 like를 추가함
    quizConfirm.addEventListener("click", function(){   //quizConfirm에 상황이 발생(대상은 클릭, 실행시킬 함수의 내용은
        quizConfirm.style.display = "none";             //quizConfirm(정답확인하기)를 숨기고
        quizResult.style.display = "block";             //위에서 숨겨놨던 quizResult(연변대비)를 표시
        quizDog.classList.add("like");                  //클릭이 발생하면 like 클래스를 추가해 강아지를 웃게 만듬 //클래스를 추가하는 방식
    })
includes()를 이용하여 CSS 속성 검색하기

CSS 속성 검색하기

플렉스, 애니메이션, 백그라운드, 기타 등등 유형 별로 검색해보세요!
전체 속성 갯수 : 0
  • accent-color : 다른 페이지 이동을 설정합니다.
  • align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.
  • animation : 애니메이션과 관련된 속성을 일괄적으로 설정합니다.
  • animation-delay : 애니메이션 지연 시간을 설정합니다.
  • animation-duration : 애니메이션 움직임을 설정합니다.
  • animation-fill-mode : 애니메이션이 끝난 후의 상태를설정합니다.
  • animation-iteration-count : 애니메이션의 반복횟수를 설정합니다
  • animation-name : 애니메이션 keyframe 이동을 설정합니다.
  • animation-name : 애니메이션 keyframe 이동을 설정합니다.
  • animation-timing-function : 애니메이션움직임의 속도를 설정합니다.
  • backdrop-filter : 배경에 다양한 효과를 줍니다.
  • background : 백그라운드 속성을 일괄적으로 설정합니다
  • background-attachment : 배경 이미지의 고정 여부를설정합니다
  • background-blend-mode : 배경을 혼합했을 때 그래픽효과를 설정합니다.
  • background-clip : 백그라운드 이미지의 위치 기준점을 설정합니다.
  • background-color : 백그라운드 색을 설정합니다.
  • background-image : 백그라운드 이미지 속성을 설정합니다.
  • background-origin : 백그라운드 이미지의 위치 기준점을 설정하기위한 속성입니다.
  • background-position : 백그라운드 이미지의 위치 영역을설정합니다.
  • background-position-x : 백그라운드 이미지의 x축 위치영역을 설정합니다.
  • background-position-y : 백그라운드 이미지의 x축 위치영역을 설정합니다.
  • background-repeat : 백그라운드 이미지 반복 여부를 설정합니다.
  • background-size : 백그라운드 이미지 사이즈를 설정합니다.
  • border : 테두리 속성을 일괄적으로 설정합니다.
  • border-bottom : 아래쪽 속성을 일괄적으로 설정합니다.
  • border-bottom-color : 테두리 아래쪽 색 속성을 설정합니다.
  • border-left-radius : 아래 왼쪽 모서리 굴곡을설정합니다.
  • border-right-radius : 아래 오른쪽 모서리 굴곡을설정합니다.
  • border-bottom-style : border-bottom-style은아래쪽 테두리의 스타일 속성을 설정합니다.
  • border-bottom-width : border-bottom-width은아래쪽 테두리의 두께 속성을 설정합니다.
  • border-collapse : border-collapse는 테이블의 테두리를겹칠지, 떨어트릴지를 설정합니다
  • border-left : border-left는 요소의 왼쪽 테두리의 속성을 일괄적으로설정합니다.
  • border-left-color : border-left-color는 요소의 왼쪽테두리의 색상을 설정합니다.
  • border-left-style : border-left-style은 요소의 왼쪽테두리의 스타일 속성을 설정합니다.
  • border-left-width : border-left-width는 요소의 왼쪽테두리의 두께를 설정합니다.
  • border-radius : border-radius는 요소의 테두리 굴곡을 설정합니다.
  • border-right :border-right은 요소의 오른쪽 테두리 속성을 일괄적으로설정합니다.
  • border-right-color : border-right-color는 요소의오른쪽 테두리의 색상을 설정합니다.
  • border-right-style : border-right-style은 요소의오른쪽 테두리의 스타일 속성을 설정합니다.
  • border-right-width : border-right-width는 요소의오른쪽 테두리의 두께를 설정합니다.
  • border-spacingborder-spacing은 테이블의 테두리 사이의 간격을 설정합니다.
  • border-styleborder-style은 요소의 테두리 스타일 속성을 설정합니다.
  • border-topborder-top은 요소의 위쪽 테두리 속성을 일괄적으로 설정합니다.
  • border-top-colorborder-top-color는 요소의 위쪽 테두리의 색상을 설정합니다.
  • border-top-left-radiusborder-top-left-radius는 요소의 위쪽 왼쪽 모서리의 굴곡을 설정합니다.
  • border-top-right-radiusborder-top-right-radius는 요소의 위쪽 오른쪽 모서리의 굴곡을 설정합니다.
  • border-top-styleborder-top-style은 요소의 위쪽 테두리의 스타일 속성을 설정합니다.
  • border-top-widthborder-top-width는 요소의 위쪽 테두리의 두께를 설정합니다.
  • border-widthborder-width는 요소의 테두리의 두께를 설정합니다.
  • bottombottom은 요소의 아래쪽에서의 위치를 설정합니다.
  • box-sizingbox-sizing은 브라우저가 요소의 크기를 어떻게 계산할지를 설정합니다.
  • colorcolor는 텍스트의 색상을 설정합니다.
  • contentcontent는 가상 요소의 내용물을 표시합니다.
  • displaydisplay는 요소의 표시 유형을 설정합니다.
  • flex-wrapflex-wrap은 flex의 겹칩 방법을 설정합니다. wrap/nowrap/wrap-reverse
  • floatfloat는 float의 겹침을 설정합니다.
  • font-familyfont-family는 텍스트의 폰트를 설정합니다.
  • font-sizefont-size는 텍스트의 크기를 설정합니다.
  • font-stylefont-style은 텍스트의 이탤릭체 스타일을 설정합니다.
  • font-weightfont-weight는 텍스트의 두께를 설정합니다. 숫자가 높을 수록 두꺼워집니다.
  • grid-areagrid-area는 요소에 grid구역을 지정합니다.
  • grid-template-areasgrid-template-areas는 grid의 열과 행을 나타낼 구역을 설정합니다.
  • grid-template-columnsgrid-template-columns는 grid의 각 열의 너비를 설정합니다.
  • grid-template-rowsgrid-template-rows는 grid의 각 행의 높이를 설정합니다.
  • heightheight는 요소의 높이를 설정합니다.
  • justify-contentjustify-content는 flex나 grid의 항목이 배치되는 방식을 설정합니다.
  • leftleft는 가상요소의 왼쪽에서의 위치를 설정합니다.
  • list-stylelist-style은 리스트의 글머리 기호/숫자 스타일을 설정합니다.
  • marginmargin은 요소의 바깥쪽 여백을 설정합니다
  • margin-bottommargin-bottom은 요소의 바깥 아래쪽 여백을 설정합니다.
  • margin-leftmargin-left는 요소의 바깥 왼쪽 여백을 설정합니다.
  • margin-rightmargin-right는 요소의 바깥 오른쪽 여백을 설정합니다.
  • margin-topmargin-top은 요소의 바깥 위쪽 여백을 설정합니다.
  • max-heightmax-height은 요소의 최대 높이를 설정합니다.
  • max-widthmax-width는 요소의 최대 너비를 설정합니다.
  • min-heightmin-height은 요소의 최소 높이를 설정합니다.
  • min-widthmin-width는 요소의 최소 너비를 설정합니다.
  • opacityopacity는 요소의 투명도를 설정합니다.
  • overflowoverflow는 컨테이너에 비해 너무 큰 콘텐츠를 요소가 처리하는 방법을 설정합니다.
  • paddingpadding은 요소의 안쪽 여백을 설정합니다.
  • padding-bottompadding-bottom은 요소의 안쪽 아래 여백을 설정합니다
  • padding-leftpadding-left는 요소의 안쪽 왼쪽 여백을 설정합니다.
  • padding-rightpadding-right는 요소의 안쪽 오른쪽 여백을 설정합니다.
  • padding-toppadding-top은 요소의 안쪽 위 여백을 설정합니다
  • rightright는 가상요소의 오른쪽에서의 위치를 설정합니다.
  • text-aligntext-align은 텍스트의 정렬 방식을 설정합니다.
  • text-decorationtext-decoration은 텍스트의 장식을 설정합니다.
  • toptop은 가상요소의 위쪽에서의 위치를 설정합니다.
  • transitiontransition은 css의 변환 시간을 설정합니다.
  • widthwidth는 요소의 너비를 설정합니다.
  • word-breakword-break는 텍스트의 단어 구분을 설정합니다. 단어 단위로 끊거나 글자 단위로 끊도록 제어할 수 있습니다.
  • z-indexz-index는 가상요소의 z축에서의 위치를 설정합니다.
  • border설명