반응형
기본 선택자
/* 주석 단축키 : 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 |
