@Summary
-. CSS의 각 규칙은 HTML 요소에 스타일을 제공함.
-. 일반적인 규칙은 하나의 선택자(selector)에 하나 이상의 속성과 값으로 구성됨.
-. 선택자는 어떤 요소가 어떤 규칙에 적용되는지를 명시함.
-. 예를 들면, p { color: gray; } 에서는 선택자 p가 회색의 글자 색을 갖는 규칙이 적용됨.
-. 하나의 규칙은 '{', '}' 안에 놓이며, 각 속성의 정의는 ';'(semi-colon)으로 끝남.
-. ','(comma)로 한 번에 여러 개의 요소를 선택할 수 있음.
-. <style> 태그를 사용하면 HTML 내에서 스타일을 포함할 수 있음.
-. 외부 css 스타일시트와 연결하여 HTML의 스타일을 분리할 수 있음.
-. <link> 요소는 외부 스타일시트를 포함시키는 데 사용됨.
-. 많은 속성은 상속을 받음. 그리고 상속받지 않는 속성도 있음.
-. 예를 들면 <body> 요소에 설정된 속성은 모든 자식 요소들에 상속되어 적용됨.
-. 상속은 모든 자식에게 적용되므로 재정의를 통해 특별한 규칙을 설정할 수 있음.
-. class 속성을 사용하면 선택자의 제한을 벗어나 공통 적용할 항목을 묶을 수 있음.
-. 클래스의 특정 요소를 선택하기 위해 '.'을 사용할 수 있음.
-. 예를 들면, p.greentea와 같이 사용이 가능함.
-. 클래스에 속한 모든 요소를 선택하기 위해 요소 이름을 생략할 수 있음.
-. 예를 들면, .greentea와 같이 사용하면 greentea 클래스의 모든 요소에 적용할 수 있음.
-. 클래스 속성에 여러 개의 클래스 이름을 넣어 여러 클래스에 속하게 할 수 있음.
-. 예를 들면, <p class="greentea raspberry"> 와 같이 사용 가능. 공백으로 구분.
-. CSS 유효성 검사를 위한 Tool도 있음.
-. CSS Validation Service : http://jigsaw.w3.org/css-validator
-. Style 적용에 관한 작고 빠른 지침서
1) 요소를 선택한 선택자가 있는가? (예를 들면, p { ... })
2) 상속받는 속성이 있는가? (예를 들면, body { ... })
3) 클래스가 설정되어 있는가? (예를 들면, <p class="greentea">)
4) 여러 개의 클래스가 설정되어 있는가? (예를 들면, <p class="greentea, raspberry">)
5) 아무런 설정값이 없는가? (기본 설정값)
-. CSS의 각 규칙은 HTML 요소에 스타일을 제공함.
-. 일반적인 규칙은 하나의 선택자(selector)에 하나 이상의 속성과 값으로 구성됨.
-. 선택자는 어떤 요소가 어떤 규칙에 적용되는지를 명시함.
-. 예를 들면, p { color: gray; } 에서는 선택자 p가 회색의 글자 색을 갖는 규칙이 적용됨.
-. 하나의 규칙은 '{', '}' 안에 놓이며, 각 속성의 정의는 ';'(semi-colon)으로 끝남.
-. ','(comma)로 한 번에 여러 개의 요소를 선택할 수 있음.
-. <style> 태그를 사용하면 HTML 내에서 스타일을 포함할 수 있음.
-. 외부 css 스타일시트와 연결하여 HTML의 스타일을 분리할 수 있음.
-. <link> 요소는 외부 스타일시트를 포함시키는 데 사용됨.
-. 많은 속성은 상속을 받음. 그리고 상속받지 않는 속성도 있음.
-. 예를 들면 <body> 요소에 설정된 속성은 모든 자식 요소들에 상속되어 적용됨.
-. 상속은 모든 자식에게 적용되므로 재정의를 통해 특별한 규칙을 설정할 수 있음.
-. class 속성을 사용하면 선택자의 제한을 벗어나 공통 적용할 항목을 묶을 수 있음.
-. 클래스의 특정 요소를 선택하기 위해 '.'을 사용할 수 있음.
-. 예를 들면, p.greentea와 같이 사용이 가능함.
-. 클래스에 속한 모든 요소를 선택하기 위해 요소 이름을 생략할 수 있음.
-. 예를 들면, .greentea와 같이 사용하면 greentea 클래스의 모든 요소에 적용할 수 있음.
-. 클래스 속성에 여러 개의 클래스 이름을 넣어 여러 클래스에 속하게 할 수 있음.
-. 예를 들면, <p class="greentea raspberry"> 와 같이 사용 가능. 공백으로 구분.
-. CSS 유효성 검사를 위한 Tool도 있음.
-. CSS Validation Service : http://jigsaw.w3.org/css-validator
-. Style 적용에 관한 작고 빠른 지침서
1) 요소를 선택한 선택자가 있는가? (예를 들면, p { ... })
2) 상속받는 속성이 있는가? (예를 들면, body { ... })
3) 클래스가 설정되어 있는가? (예를 들면, <p class="greentea">)
4) 여러 개의 클래스가 설정되어 있는가? (예를 들면, <p class="greentea, raspberry">)
5) 아무런 설정값이 없는가? (기본 설정값)
No comments:
Post a Comment