CSS이란 무엇일까 😸

 

 

 

🤷🏻‍♀️ CSS 란? 

: Cascading style sheets 의 약어로, 브라우저에서 웹 페이지가 표시되는 방식을 제어하는 선언적 언어입니다. 쉽게 말하자면 웹 페이지를 스타일링해주는 언어라고 할 수 있죠. CSS는 HTML 및 JavaScript 와 함께 세 가지 핵심 웹 기술 중 하나입니다. CSS는 일반적으로 HTML 요소의 스타일을 지정하지만 SVG 또는 XML 과 같은 다른 마크업 언어와 함께 사용할 수도 있습니다.   

 

 

 

 

 

 

---

Cascading

---

 

 

Cascading의 사전적 의미는 "폭포같은, 계속되는, 연속적인" 으로, 하나의 태그에 대해서 동일한 속성의 스타일을 적용하는 경우 우선순위에 따라서 스타일이 결정된다는 의미입니다. 우선순위를 결정하는 요소에는 중요도, 명시도, 코드의 순서가 있습니다. 

 

 

 

 

🧚🏻‍♀️ CSS Rules

CSS 규칙은 선택자(Selector)와 관련된 속성(Properties) 집합입니다.

 

 

 

다음은 모든 HTML 단락을 검은색 배경에 흰색 텍스트로 만드는 예시입니다.

p {
  color: white; /* color은 text color을 의미함 */
  background-color: black; /* background-color은 background color을 의미함 */
}

 

 

 

1. 중요도 

저작자 !important > 저작자 CSS > 사용자 CSS > 브라우저 CSS

 

저작자는 웹을 디자인한 사람에 해당되고 저작자가 지정한 스타일은 사용자나 브라우저가 설정한 기본 스타일보다 우선순위가 높습니다. 만약 저작자가 아무런 CSS 속성도 지정하지 않았을 경우, 브라우저에서 기본으로 설정된 스타일이 적용됩니다. 저작자 !important는 CSS 속성을 줄 때 뒤에 !important를 붙이는 것을 말하는데, 이렇게 하면 우선순위는 가장 높지만 모든 순서를 무시하고 적용되므로 코드에서 나쁜 냄새가 난다고 할 수 있습니다. (Bad smell!!)

 

 

 

 

2. 명시도 

style > id > class > tag

 

태그 요소에 스타일 속성을 줄 때 선택자(Selector)를 사용합니다. 선택자의 종류에 따라 명시도의 차이가 발생하고 명시도의 차이에 따라서 우선순위가 발생하는데요. 선택자의 종류를 먼저 살펴 봅시다. 

 

 

 

*

모든 요소를 선택

* {
  color: red;
}

모든 요소의 색상을 red로 지정합니다.

 

 

 

 

element

특정 요소만 선택

button {
  color: blue;
}

button 요소들의 색상을 blue로 지정합니다.

 

 

 

 

#{id}

id가 {id}인 요소만 선택

#logo {
  font-size: 24px;
}

logo 라는 id를 가진 요소들의 폰트 크기를 24px로 지정합니다.

 

 

 

 

.{class}

class가 {class}인 요소만 선택

.box {
  flex-direction: row;
}

box 라는 class 이름을 가진 요소들을 가로로 정렬합니다.

 

 

 

 

:first-child

특정 요소의 첫 번째 자식 요소만 선택

div:first-child {
  padding: 12px;
}

 

div 요소의 첫 번째 자식 요소의 padding을 12px로 지정합니다.

 

 

 

 

:last-child

특정 요소의 마지막 자식 요소만 선택

div:last-child {
  margin-right: 10px;
}

 

div 요소의 마지막 자식 요소의 margin-right을 10px로 지정합니다.

 

 

 

 

:not

특정 요소를 제외한 나머지 요소만 선택

li:not(:last-child) {
	padding-bottom: 5px;
}

 

마지막 요소가 아닌 li 요소들의 padding-bottom을 5px로 지정합니다.

 

 

 

 

element[속성=" "]

해당 요소 중 특정 조건을 갖춘 태그만 선택

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

 

a 요소 중 하이퍼링크가 "naver"로 시작하는 요소의 색상을 green으로 지정합니다.

 

 

 

 

3. 코드의 순서

 

선택자(Selector)의 종류와 깊이가 같을 때 우선순위의 결정 방식은 코드의 순서입니다. 코드 상에서 나중에 나오는 경우가 우선순위가 높도록 설정됩니다.

div ul .first {
  color: yellow;
}

div ul .first, .second {
  color: green;
}

 

코드의 순서에 따라 class 이름이 first인 요소의 색상은 green으로 지정됩니다.