티코의 코딩로그
210327 CSS 정리 본문
CSS(Cascading Style Sheet)
author style -> user style -> browser
(우리가 지정한 스타일이 가장 우선순위)
Selectors
Universal *
type Tag
ID #id
Class .class
State :
Attribute []
실제 예를 살펴보자.
전체 태그, id, class 별로 사용하는 법을 간단하게 적은 코드들이다.
가장 맨 위에 * {~} 을 이용해서 전체 컬러를 초록색으로 바꿔놓았지만
아래에 좀 더 세부적으로 태그를 적용하니 각각의 컬러들이 바뀐다.
<div> 태그 안은 비어있어서 background를 지정해줘도 나타나지 않았지만
width, height를 css로 추가해줬더니 나타났다.
button:hover {
color: red;
background: pink;
}
오늘 처음 알게 된 코드! 마우스를 올리면 글씨, 배경색이 위 사진처럼 바뀐다.
#주소를 가지고 있는 그룹만 색을 바꿔라.
a[href] {
color: purple;
}
#특정 주소를 가지고 있는 그룹만
a[href="naver.com"] {
color:purple;
}
#특정 주소로 시작 or 끝나는 그룹만
a[href^="naver"] {
color:purple;
}
a[href$=".com"] }
color:purple;
}
<a> 태그의 다양한 css 코드이다.
.red {
width: 100px;
height: 100px;
padding: 20px 0px;
margin: 20px;
border: 2px dashed red;
background: yellow;
}
padding, margin을 적을 때 padding-top~ 이런 식으로 여러 줄 적을 필요 없이
padding: (위), (오른쪽), (아래), (왼쪽)
이렇게 한문장으로 간단하게 표현이 가능하다.
border 역시 한문장으로 간단하게 표현이 가능하다.
'TIL' 카테고리의 다른 글
반응형 웹 내 취향으로 만들어보기 (0) | 2021.04.09 |
---|---|
반응형 웹 만들어보기 (0) | 2021.04.01 |
CSS-display, position (0) | 2021.03.31 |
210325 html 기본기 (0) | 2021.03.25 |
210324 html/css로 구글 페이지 만들어보기 (0) | 2021.03.24 |