Selector란? (feat. margin, padding)

Selectors란?

html에 어떤 tag들을 고를 것인지에 대한 규정하는 문법입니다.

 

* : 모든 태그에 적용

Tag : 해당 태그만 적용

#id : 해당 id만 적용

.class : 해당 class만 적용

: :태그 옆에 state 작성 가능

[] : 태그 옆에 attribute 작성 가능

 

 

다음과 같은 형식으로 작성하면 끝! 

CSS 문법은 어려운 것이 없습니다 :)

/*selector {

	property: value;

}*/

* {
	color: green;
}

li {
	color: pink;
}

.red {
	width: 100px;
	height: 100px;
	background: yellow;
}

button:hover {
	color: red;
	background: beige;
}

a[href^="naver"] {
	color: purple;
}

 

Margin vs Padding

margin vs padding

Padding

: 컨텐츠 안에 들어가는 공간을 말합니다.

Margin

: 컨텐츠 밖의 공간을 말합니다.

 

 

가능한 속성 값들은 어디서 확인하나요?

⇒ CSS reference에서 확인할 수 있습니다.

 

 

아래의 사이트에서 CSS를 연습해 볼 수 있습니다!

https://flukeout.github.io/

CSS Diner

 

 

참고:

https://deliciouslearning.tistory.com/417 → 이미지

https://www.youtube.com/watch?v=gGebK7lWnCk → 전체적인 내용