코드노트

css 기본 스타일 제거 본문

Code note/CSS

css 기본 스타일 제거

코드노트 2022. 10. 18. 21:23

 

 

Normalize CSS

 

Normalize.css: Make browsers render all elements more consistently.

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

necolas.github.io

reset CSS

 

CSS Tools: Reset CSS

CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter

meyerweb.com

 

정리 코드

body {
    min-width: 320px;
    line-height: normal;
    font-size: 14px;
    color: $booking-color-text1;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
input,
textarea,
select,
table,
button,
code {
    font-family: $font-default;
    font-size: 16px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.hidden,
[hidden] {
    display: none !important;
}

ul,
ol,
li {
    list-style: none;
}

a {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    &:hover,
    &:focus {
        text-decoration: none;
    }
}

button {
    border: 0;
    background-color: transparent;
    cursor: pointer;
    &:disabled {
        cursor: not-allowed;
    }
}

select,
input,
textarea,
button {
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
}

input:disabled {
    background-color: rgba(255, 255, 255, 0);
    cursor: not-allowed;
}

select {
    border: 0;
    background-color: transparent;
    cursor: pointer;
    &::-ms-expand {
        display: none;
    }
}

input,
textarea {
    font-size: inherit;
    border: 0;
    &::placeholder {
        /* Chrome, Safari, Firefox */
        color: #444;
        opacity: 1;
    }
    &:-ms-input-placeholder {
        /* IE, Edge */
        color: #444;
        opacity: 1;
    }
    &[readonly],
    &:disabled {
        &::placeholder {
            /* Chrome, Safari, Firefox */
            color: rgba(#000, 0.2);
            opacity: 1;
        }
        &:-ms-input-placeholder {
            /* IE, Edge */
            color: rgba(#000, 0.2);
            opacity: 1;
        }
    }
    &::-ms-clear,
    &::-ms-reveal {
        /* IE, Edge */
        display: none;
    }
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }
}

'Code note > CSS' 카테고리의 다른 글

a태그 css로 text숨기기  (0) 2022.11.10
이미지 스프라이트(image sprite) 사용하기 css  (0) 2022.10.20
html, css, sass 정리  (0) 2022.10.18
Media Query 반응형 디자인 크기 조절  (0) 2022.10.14
css grid 그리드, 정렬 및 그리드 단위 정리  (0) 2022.10.14
'Code note/CSS' Related Articles more