[Web2] CSS

- html에 새로운 태그 추가 <font color="red"> 가 아니라 근본적인 해결책인 CSS a { color:red; }

 

- head태그 안에 style태그 안은 CSS문법에 맞게 처리된다 (세미콜론으로 각각이 구분됨). 디자인 관련 내용은 style태그안에 몰아넣을 수 있다.

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

 

 

 

- html style속성안에 내용은 CSS문법에 따라 처리된다.

ex) <a href="1.html" style="color:red;text-decoration:underline">HTML</a>

 

- Property 모두 외우는게 아니라 필요할 때 찾아쓰면 된다.

 

- class선택자는 앞에 .찍어서 나타낸다. 어떤 태그가 class 여러개를 가질 수 있고 띄어쓰기로 구분한다.

 

- id선택자는 앞에 #붙여서 나타내고, class선택자보다 우선순위가 높다.

 

- 태그 선택자 < class 선택자 < id 선택자 ( 같은 우선순위면 가장 마지막에 등장하는게 우선순위높다)

(뒤로 갈수록 구체성이 높다. id값은 단 하나만 존재)

 

- element는 tag와 같은 의미로 생각

 

Selector 정리

www.w3schools.com/cssref/css_selectors.asp

CSS Selectors Reference

 

- 화면 전체를 쓰는 block level element가 있고, 주어진 영역만 쓰는 inline level element가 있다.

이는 CSS Property에서 diplay:inline; 또는 display:block;으로 변경가능하다. (display:none;하면 통째로 사라진다)

 

- 선택자 ,로 구분해서 한번에 쓸 수 있다.

ex)

  h1, a{
        border-width:5px;
        border-color:red;
        border-style:solid;
      }

 

- Property 앞부분 중복도 묶을 수 있다. 순서는 상관없다.

ex)

h1, a{
        border: 5px solid red;
      }

 

-  CSS 박스모델