반응형
기본 선택자
/* 주석 단축키 : Ctrl + / */
/* 코딩 용어 : /(슬래쉬), \(역슬래쉬), ;(세미콜론) */
/* 기본선택자 : html 태그선택자 */
/* 사용법 :
    태그선택자 {
        속성:값;
    }
*/
h1{
    /* 글자색 */
    color: burlywood;
    /* 바탕색 */
    background-color: blue;
}

id 선택자
/* id 선택자 : 기본 선택자 */
/* id 속성(공통) : 태그에 이름을 부여하는 속성(변수명), 유일(관례), js 사용  */
/* name 속성(공통) : 태그에 이름을 부여하는 속성(변수명), jsp, react(서버쪽 통신)에 사용 */
/* 코딩용어 : #(샵) */
/* 사용법)
    #id 선택자 {
        속성 : 값;
    }
*/
/* px(픽셀) : 화면 화소(단위), 고정크기 예) cm, l 등... */
#header{
    /* 가로크기 */
    width: 800px;
    /* 배경색(바탕색) */
    background-color: red;
}

#warp{
    width: 800px;
}

#content{
    width: 300px;
    background-color: green;
}
와일드카드 : 전체 선택자
/* (wildcard) * : 전체 선택자  */
/* 사용법 :
  * {
    속성:값;
  }
 */

* {
    color: red;
}

h1 {
    color: aqua;
    background-color: blue;
}

클래스 선택자
/* 클래스 선택자 */
/* id선택자 vs class 선택자의 차이
    id선택자 : 중복 불가(이름)
    class선택자 : 중복 허용(이름), 실무 디자이너
*/
/* 사용법 :
    .클래스명 {
        속성:값;
    }
*/

.select{
    color: red;
}
속성 선택자 : 특수 선택자
/* 속성 선택자 : 특수 선택자 */
/* 사용법 :
    태그[속성="값"]{
        속성:값;
    }
*/

input[type="text"]{
    background-color: red;
}

input[type="password"]{
    background-color: blue;
}
후손 선택자 : 특수 선택자
/* 후손 선택자 : 특수 선택자 */
/* 부모 태그밑에 있는 자식태그들 모두 선택 */
/* 사용법 :
    (부모)선택자 (자식)선택자 {
        속성 : 값;
    }
*/
#header h1{
    color: red;
}
자식 선택자
/* 자식 선택자 */
/* 부모선택자 바로 아래 자식만 선택해서 디자인 적용 */
/* 사용법 :
    (부모)선택자 > (자식)선택자 {
        속성 : 값;
    }
*/
#header > h1 {
    color: red;
}
반응 선택자
/* 반응 선택자 */
/* 선택자:hover - 마우스가 위로 올라가면 디자인 적용 */
h1:hover {
    color: red
}
/* 선택자:active - 마우스를 클릭하면 디자인 적용 */
h1:active{
    color: blue;
}
상태 선택자
/* 상태 선택자 */
/* input:현재입력가능한 상태일때 디자인 적용 */
input:enabled {
    background-color: white;
}
/* input:현재입력불가능 상태일때 디자인 적용 */
input:disabled {
    background-color: gray;
}
/* input:커서가 있을때(포커스) 디자인 적용 */
input:focus {
    background-color: orange;
}
구조 선택자
/* 구조 선택자 */
li {
    /* 목록 앞에 점 없애기 */
    list-style-type: none;
}
/* 2n : 짝수, 2n+1 : 홀수
    사용법 :
        선택자:nth-child(수식) {
            속성 : 값;
        }
*/
li:nth-child(2n) {
    /* 10진수 : 1~9까지, 16진수 : 1 ~ 15까지, 8진수 : 1 ~ 7까지, 2진수 : 0과 1 */
    /* 16진수 : 10(a), 11(b), 12(c), 13(d), 14(e), 15(f) */
    /* 색깔 지정 : red, (#16진수 6자리, 색상표 표기) */
    background-color: #ff0003;
}

li:nth-child(2n+1) {
    background-color: #800000;
}
반응형

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] CSS 디자인 우선순위  (0) 2023.08.09
[CSS] 반응형 웹 이론 - 이미지 처리  (0) 2023.08.09
[CSS] 배경이미지  (0) 2023.08.08
[CSS] Box 기본속성  (0) 2023.08.07
[CSS] 폰트스타일  (0) 2023.08.07

+ Recent posts