[CSS] CSS 기초 개념 및 문법 (1) - style , selector , declaration

"생활코딩 css 강의의 내용을 정리한 글입니다." 

CSS가 등장하기 전의 상황

원래는 HTML (전자문서) 만 있었음. 하지만 사람의 욕심이 끝이 없음 .

웹 페이지를 아름답게 만들고 싶은 욕구

html - 디자인과 관련된 새로운 태그 생성했지만 한계점 있었음 ( 기존 정보 검색의 HTML 과 구분 어려움)

 -> css - 디자인과 최적화된 완전히 새로운 언어 탄생 

CSS의 등장

1. css 를 통해서 중복된 코드를 제거 → 유지 보수를 훨씬 효과적으로
2. 디자인과 관련된 것은 <style> 태그 안에 갇혀 정보태그인 html과 분리

 

 

CSS의 기본적인 문법

1) style 태그를 쓴다

2) style 속성을 쓴다.

 

1) style 태그를 쓴다

<style>
  이 안에 있는 건 css니까 css언어의 문법에 맞게 해석해야 돼 
</style>

<style>
    a{
      color:black; 
      text-decoration: none;
    }
  </style>

여기서 a : 선택자(selector)

{ }  안의 코드 : 선택자에게 지정될 효과 (declaration)

color : red

(property) : (value) 

 

 

2) style 속성을 쓴다.

style이라는 속성은 웹브라우저는 css문법에 따라 해석 - css문법에 따라 해석된 결과를 style태그가 위치하고 있는 이 태그에 적용할 것이다.

<ol>
      <li><a href="1.html" target="_black">HTML</a></li>
      <li><a href="2.html" target="_black" style="color:red">CSS</a></li>
      <li><a href ="3.html" target="_black">JavaScript</a></li>
  </ol>

여기서 style="color:red" 은 html의 속성

style이라는 속성은 ? 반드시 그 값으로 반드시시 css의 효과가 들어온다.

이때는 style태그의 위치에 css가 적용되므로 선택자라는 것을 사용할 필요가 없다.

두가지 속성 적용하기