본문 바로가기

CSS42

1.4 속성(Attribute)을 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기 1.4 속성(Attribute)을 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기 HTML 요소(Element)의 속성을 이용하여 선택자를 구성하는 형태로 다음과 같은 다양한 형식들을 사용하여 선택자를 구성하고 CSS 규칙을 만들 수 있습니다. 위에서 첫 번째 형식은 속성이름을 갖는 모든 요소에 대해서 스타일을 적용하는 형태이고 두 번째부터 선택자를 구성하면서 “[속성이름=속성값]” 형태와 같이 속성이름이 속성값과 같은가를 검사하는 연산자가 사용되었습니다. 정리하면 다음과 같습니다. 연산자 설명 = 속성이 속성값과 같을 경우 ~= 속성이 속성값과 같거나 공백을 포함한 속성값일 경우 |= 속성이 속성값과 같거나 속성값이 “속성값-…”의 형태의 속성값일 경우 ^= 속성이 속성값으로 시작되는 값.. 2013. 7. 31.
1.3 class를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기 1.3 class를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기 class를 이용한 선택자를 구성한다는 것은 class 속성을 가지고 있는 요소들 중에서 class 속성값이 일치하는 요소(들)에 대해서 스타일을 적용하는 것으로 다음과 같은 형식을 이용하게 됩니다. .class이름 { property:value; property:value; …} 메모장을 실행하여 다음과 같이 코드를 작성합니다. HTML5,CSS and Javascript HTML5,CSS and Javascript HTML5,CSS and Javascript 위와 같이 작성하고 “classEx.html”로 저장합니다. 그 다음 IE9를 통해 확인해보면 다음과 같이 나타납니다. 이제 class 속성을 이용하여 스타일을 적.. 2013. 7. 31.
1.2 id를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기 1.2 id를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기 id를 이용한 선택자는 요소(element) 가운데 id 속성을 가진 요소들 중 해당 속성값과 일치하는 요소들에 스타일을 적용하기 위해서 id를 선택자로 설정해주는 것으로 다음과 같은 형식으로 사용할 수 있습니다. #id이름 { property:value; property:value; …} 실제 예제를 가지고 그 사용방법을 알아볼까요? 메모장을 실행하여 다음과 같이 코드를 작성합니다. HTML5,CSS and Javascript HTML5,CSS and Javascript 위와 같이 h1 요소 2개를 이용하여 “HTML5, CSS and Javascript”라는 텍스트를 화면에 나타내도록 코드를 작성하는데 2개의 h1 요소 중 .. 2013. 7. 31.
1. CSS의 구조와 선택자(selector) 1. CSS의 구조와 선택자(selector) 하나의 스타일 시트(Style Sheet)는 스타일 규칙(Rule)로 구성되며 각 규칙은 다시 선택자(selector)와 속성(property) 그리고 속성값(value)의 조합으로 구성됩니다. 이를 이해를 돕기 위해서 시각화하면 다음과 같이 하나의 규칙(Rule)은 selector, property, value와 같은 부분으로 구성됩니다. 선택자(selector)는 CSS 규칙이 적용되는 대상을 나타내는 것으로 id, class 등과 같은 조건에 의해서 선택된 HTML5의 HTML 요소를 나타냅니다. 속성(property)는 선택자에 속한 글꼴 크기(font-size)와 같은 하나의 속성을 나타내며 속성값(value)은 선택자에 속한 글꼴 크기(font-s.. 2013. 7. 31.

티스토리툴바