[HTML&CSS] CSS #1 Summary

CSS #1 Summary

• 드림코딩 by 엘리: CSS 셀렉터, 기초 이론 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript
  
  Caution
  
  강의를 듣고 제가 기억하기 쉽게 기록하여 변형된 내용이 있을 수 있습니다.
  오류가 있거나 해당 글에 문제가 있을 경우 피드백 부탁드립니다.

Cascading 의미

정의된 세부적인 정의가 있다면 그것을 쓰고,
없다면 다음으로 지정된 기본값으로 넘어가는 것을 의미

1. Author Style (직접 작성한 Style)
2. User Style (Dark mode, Font size, . . .)
3. Browser (Browser default style)

CSS Selector

• CSS Selector 는 구체적일수록 priority 가 높다.
• !important 는 cascading 의 연결고리를 끊어 가장 높은 priority 를 가지게 한다. (사용권장 X)

• Universal: *
• type: tag_name
• ID: # + id_name
• Class: . + class_name
• State :: ex) button:hover
• Attribute []

Attribute Using Examples

• a 태그 중 href attribute 가 있는 elements select

a[href] {
    color: green;
}

• a 태그 중 href 값이 google.com 인 elements select

a[href="google.com"] {
    color: green;
}

• a 태그 중 href 값이 google.com 으로 시작하는 elements select

a[href^="google.com"] {
    color: green;
}

• a 태그 중 href 값이 google.com 으로 끝나는 elements select

a[href$=".com"] {
    color: green;
}

padding, margin, border

padding, margin

• padding 은 top 에서부터 시계방향으로 한 줄로 할당가능

* {
    padding: 1px 2px 3px 4px;
}

위의 코드는 아래 코드와 동일

* {
	padding-top: 1px
	padding-right: 2px;
	padding-bottom: 3px;
	padding-left: 4px;
}

• 2개의 값을 한번에 할당할 경우 (top, bottom), (left, right) 값을 주게 된다.

* {
    padding: 1px 2px;
}

위의 코드는 아래 코드와 동일

* {
	padding-top: 1px
	padding-right: 2px;
	padding-bottom: 1px;
	padding-left: 2px;
}

• margin 도 padding 과 동일한 형태로 값을 할당할 수 있다.

border

* {
	border: 2px solid blue;
}

위의 코드는 아래 코드와 동일

* {
	border-width: 2px;
	border-style: solid;
	border-color: blue;
}

CSS Selector Practice

https://flukeout.github.io/