8. 폼 추가 및 스타일링하기

CSS 선택자와 속성 활용 방법

CSS 선택자와 속성을 활용하여 버튼과 입력란 요소들을 스타일링하는 고급 기술을 알아봅시다.

고급 속성 선택자

/* 모든 type 속성을 가진 요소 선택 */
[type] {
    /* 스타일 지정 */
}

/* type이 email인 모든 요소 선택 */
[type="email"] {
    /* 스타일 지정 */
}

/* lang 속성을 가진 요소 선택 */
[lang~="값"] {
    /* 스타일 지정 */
}

/* lang이 값과 같거나 값으로 시작하는 요소 선택 */
[lang|="값"] {
    /* 스타일 지정 */
}

/* href 속성이 #으로 시작하는 모든 요소 선택 */
[href^="#"] {
    /* 스타일 지정 */
}

/* href 속성이 특정 값으로 끝나는 모든 요소 선택 */
[href$="값"] {
    /* 스타일 지정 */
}

/* src 속성에 특정 값을 포함하는 모든 요소 선택 */
[src*="값"] {
    /* 스타일 지정 */
}

/* 대소문자 무시하여 i를 사용한 예시 */
[type="email" i] {
    /* 대소문자 무시하고 스타일 지정 */
}

입력 요소 디자인

/* 입력 요소 스타일링 */
input {
    /* 공통 스타일 */
}

/* 모바일에서는 꽉 차게, 일정 크기 이상에서는 커지지 않게 설정 */
@media screen and (max-width: 767px) {
    input {
        width: 100%;
    }
}

/* 웹에서는 일정 크기 이상에서 커지지 않도록 설정 */
@media screen and (min-width: 768px) {
    input {
        max-width: 300px; /* 예시 값, 원하는 크기로 조절 */
    }
}

/* 폰트 상속 제거하고 내가 원하는 폰트 적용 */
input {
    font: inherit;
}

/* 포커스 시 색상 지정 */
input:focus {
    color: blue;
}

/* 웹킷 브라우저에서 기본 값 덮어쓰기 */
input {
    -webkit-appearance: none;
}

/* 모질라 브라우저에서 기본 값 덮어쓰기 */
input {
    -moz-appearance: none;
}

/* 모든 브라우저에서 기본 값 덮어쓰기 */
input {
    appearance: none;
}

/* 체크박스에서 체크되었을 때 디자인 */
input[type="checkbox"]:checked {
    /* 스타일 지정 */
}

/* 유효성 검증 피드백 - 수동 */
input:not(:focus):invalid {
    background-color: red; /* 클릭 안한 상태에서 빨간색 배경 */
    /* 수동 피드백 스타일 지정 */
}

/* 유효성 검증 피드백 - 자동 */
:invalid {
    background-color: red !important; /* 자동 피드백 스타일 지정 */
}

/* required 속성이 있는 경우 초록색으로 바뀌게 지정 */
input:required {
    border: 2px solid green;
}

/* disabled 속성이 있는 경우 마우스 커서 모양 변경 */
[disabled] {
    cursor: not-allowed;
}