Programming

CSS

CSS(Cascading Style Sheets) : 웹페이지를 꾸미는 언어

CSS 구문

CSS 구문


선택자 {
    속성: 값; 속성: 값;
}

/* ... */ : 주석(comment)

주석으로 처리함


/* 이 부분은 주석처리 됨 */
p {
    color: aqua;
}

선택자

HTML 요소를 태그 이름, id값, 클래스, 특성 등에 따라 찾거나 선택하는데에 사용됨

태그 선택자

태그 이름을 기반으로 함


태그이름 {
    속성: 값;
}

id 선택자

HTML의 id 속성의 값을 사용함

'#' 다음에 id값을 붙여서 사용


#id값 {
    속성: 값;
}

클래스 선택자

HTML의 class 속성의 값을 사용함

'.' 다음에 class값을 붙여서 사용


.class값 {
    속성: 값;
}

자손 선택자

선택자 안에 포함된 선택자를 선택함

선택자1 안에 포함된 선택자2를 선택하려면


선택자1 선택자2 {
    속성: 값;
}

그룹화 선택자

중복되는 스타일 정의가 있으면 그룹화 할 수 있음

','를 사용하여 선택자를 구분해줌


h1 {
    text-align: center;
    color: blue;
}

h3 {
    text-align: center;
    color: blue;
}

p {
    text-align: center;
    color: blue;
}
그룹화

h1, h3, p {
    text-align: center;
    color: blue;
}
↑ ↓