[CSS] CSS Anatomy

안녕하세요 동기 여러분! 오늘은 CSS의 생김새에 뜯어 보도록 합시다!

 

CSS Anatomy

 

Selector/opening tag

p {
  color: green;
}

위의 CSS 코드를 HTML에 바로 쓰게 되면 

<p style='color:green;'>가는 말이 고우면 얕본다!</p>

위와 같이 쓸 수 있습니다. 여기서 p는 selector이고 <p style='color: green;'>이 opening tag입니다.

 

• Selector : 스타일을 할 요소의 이름입니다. p와 h1같이 정해져 있는 태그들은 CSS 코드에서 p {}나 h1 {}와 같은 방법으로 작성을 하지만 id값은 #id값 class값은 .class값으로 작성합니다. 아래의 코드에 예시가 있습니다.
• Opening tag : 시작 태그

<div id="apple" style='color=red;'>애~뽀올</div>

<div class="bear" style='color=brown;'>어흥</div>

#apple {
  color: red;
}

.bear {
  color: brown;
}

 

---

 

Declaration(선언) block/attribute

• Declarartion block : { } 중괄호(curly braces)를 말합니다. ( CSS 코드에서 { color: green; } <- 이 부분)
• attribute : 속성 ( HTML 코드에서 style='color: green;' <- 이 부분)

 

---

 

Declaration(선언)

• 선언한 부분 = 내용을 말합니다. (HTML과 CSS코드에서 color: green; <- 이 부분)

 

---

 

Property(프로퍼티)

• declaration의 첫 번째 부분으로 요소에 시각적으로 어떠한 기능이 적용 될지 의미하는 곳 ( color <- 이 부분)

 

---

 

Value

• Declaration의 두 번째 부분으로 프로퍼티의 값이다. ( green; <- 이 부분)

 

---

 

오늘의 느낌

요즘 운동 관련 유튜브를 자주 보는데 운동 마렵다... ㅋㅋㅋ