반응형
- Universal *
- type Tag
- ID #id
- Class .class
- State :
- Attribute []
selector{
property: value;
}
기본적인 선택자 구성
* {
color: green;
}
전체 태그 글자색 변경
li {
color: blue;
}
<li></li>태그의 글자색 변경
li#special {
color: pink;
}
<li></li>태그 중 id가 special인 태그의 글자색 변경
.red {
width: 100px;
height: 100px;
background: yellow;
}
class가 red인 태그의 속성 변경
button:hover {
color: red;
background: beige;
}
<button></button> 태그에 마우스를 올렸을 때 속성 변경
a[href="naver.com"]{
color: purple;
}
//<a></a> 태그 중 href가 naver.com인 태그의 속성 변경
a[href$=".com"]{
color: purple;
}
//<a></a> 태그 중 href가 .com으로 끝나는 태그의 속성 변경
a[href^="naver"]{
color: purple;
}
//<a></a> 태그 중 href가 naver으로 시작하는 태그의 속성 변경
div 관련 태그
/*
padding: 컨텐츠 안에 들어가는 spacing
margin: 컨텐츠 밖에 들어가는 spacing
*/
.red {
width: 100px;
height: 100px;
padding: 2px;
/*
padding: 20px 20px 20px 20px;
시계방향으로 패딩 넣기
padding: 20px 0px;
위 아래 양 옆 패딩 넣기
*/
margin: 20px;
border-width: 2px;
border-style: solid;
border-color: pink;
/*
border: 2px dashed red;
border 한꺼번에 설정하기
*/
background: yellow;
}
CSS 태그 더 살펴 보기↓
CSS 게임↓
https://flukeout.github.io/ 8단계까지 완료
관련 포스팅 링크
반응형
'웹 프로그래밍 > HTML | CSS' 카테고리의 다른 글
[오류해결] 반응형 웹 적용되지 않는 오류 (0) | 2023.03.24 |
---|---|
CSS Flex Box (0) | 2022.07.04 |
CSS Display & Position (0) | 2022.07.04 |
HTML/CSS 참고 블로그 및 사이트 (0) | 2021.11.26 |