웹 CSS3 실습해보기 2

오늘도 지난 시간에 이어서 CSS3를 정리해보려고 합니다.

상속

CSS3는 자신을 둘러싸는 상위 tag로부터 상속받습니다.

<!DOCTYPE html> 
<html> 
<head>
<title></title>
</head> 
<body> 
<p style="color:green">
<em style="font-size:25px">상속</em>
</p> 
</body> 
</html>

오버라이딩

Browser는 각 tag에 대한 default style sheet를 가집니다.

브라우저의 default style과 .css style sheet 파일에 선언된 style , <style></style> tag에 선언된 style 그리고 style 속성에 선언된 style이 동시에 사용가능 합니다.

그래서 동일한 CSS3 property에 서로 다른 값을 설정하는 충돌이 발생 시 우선순위가 높은 style을 적용하는 규칙이 있습니다.

  1. style 속성에 선언된 style

  2. <style></style> tag에 선언된 style

  3. .css style sheet 파일에 선언된 style

  4. 브라우저의 디폴트 style

위 순서대로 우선 순위가 적용됩니다.

Selector

tag 이름으로 이루어진 selector는 기본적으로 이와 같은 이름의 모든 태그에 스타일이 적용됩니다.

class selector는 점으로 시작하는 selector로서, html 태그의 클래스속석으로만 지정 가능합니다.

body.main {font-size : 10px;}

이러면 body 태그의 메인 클래스에서만 스타일이 적용됩니다.

id selector는 #으로 시작하는 이름의 selector로서, id속성으로 지정 가능합니다.

각 태그를 유일하게 구분하려는 id 태그의 속성을 잘 쓰면서 하려면 id selector를 써야하고, 여러 태그를 하나의 그룹으로 묶어 단체로 동일한 CSS 스타일을 적용할 때는 class selctor를 써야 합니다.

부모 자식 관계인 두 selector를 ‘>’ 기호로 조합하여 블럭으로 포함되는 하위 태그에서만 css가 적용됩니다.

별표(*)를 사용하여 모든 tag에 적용시키는 selector를 사용하면, 모든 태그에 적용됩니다.

 * { color : green; }

마지막으로 가상 클래스 selector가 있는데, 특정 조건에 발동되는 선제작 이벤트가 있습니다.

마우스나 링크와 블록,양식에 대한 유형이 있습니다.

Written on March 28, 2018