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 역시 한문장으로 간단하게 표현이 가능하다.