본문 바로가기

Selector13

1.4.5 “[속성^=속성값]”의 경우 1.4.5 “[속성^=속성값]”의 경우 속성이 속성값으로 시작되는 값을 가질 경우에 정해준 스타일이 적용되는 형태로 블록 내에 모든 코드를 주석 처리하고 다음과 같이 코드를 작성, 저장합니다. 그 다음 IE9를 통해서 보면 4개의 h4 요소의 title 속성이 모두 “book”으로 시작하기 때문에 다음과 같이 모두 스타일이 적용되어 나타납니다. 1.4.6 “[속성$=속성값]”의 경우 속성이 속성값으로 끝나는 값을 가질 경우로 이해를 돕기 위해서 … 블록 내의 모든 코드를 주석() 처리한 후 다음의 코드를 추가합니다. 스타일 시트 파일 HTML 문서 word 문서 h4 요소에 파일 확장자(file extensions) 속성을 설정하고 속성값으로 각각 “.css”, “.html”, “.docx”로 설정하였습.. 2013. 7. 31.
1.4.4 “[속성|=속성값]”의 경우 1.4.4 “[속성|=속성값]”의 경우 속성이 속성값과 같거나 속성값이 “속성값-…”의 형태의 속성값일 경우, 즉 속성값 다음에 – 로 이어져 나타나는 속성값일 경우를 의미하는 것으로 블록 내에 다음과 같이 코드를 수정, 저장합니다. 그 다음 IE9를 통해 보면 title 속성의 속성값이 각각 “book_title”, “booktitle”, “book title”인 3개의 h4 요소에 대해서 어느 것 하나 스타일이 적용되지 않고 다음과 같이 나타나게 됩니다. - 이 포함된 속성값에 스타일이 적용되는 것을 확인하기 위해서 … 블록 내에 다음과 같이 한 줄을 추가, 저장합니다. HTML5,CSS and Javascript XML & LINQ 그 다음 IE9를 통해 보면 다음과 같이 - 이 포함된 속성값에 스.. 2013. 7. 31.
1.4.2 “[속성=속성값]”의 경우 1.4.2 “[속성=속성값]”의 경우 이제 “[속성이름=속성값]”의 경우를 보기 위해서 블록 내에 다음과 같이 코드를 수정, 저장합니다. IE9를 통해 열어보면 방금 전 결과와 달리 h4 요소의 title 속성값이 “book_title"인 h4 요소에 대해서만 스타일이 적용되어 나타납니다. 1.4.3 “[속성~=속성값]”의 경우 다음으로 “[속성이름~=속성값]”의 경우를 보기 위해서 … 블록 내 기존 코드를 모두 주석 처리한 후 다음과 같이 코드를 추가합니다. HTML5,CSS and Javascript HTML5,CSS and Javascript HTML5,CSS and Javascript 위와 같이 작성한 후 블록 내에 모든 코드를 주석 처리하고 저장한 후 IE9를 통해 보면 다음과 같이 나타납니다... 2013. 7. 31.
1.4 속성(Attribute)을 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기 1.4 속성(Attribute)을 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기 HTML 요소(Element)의 속성을 이용하여 선택자를 구성하는 형태로 다음과 같은 다양한 형식들을 사용하여 선택자를 구성하고 CSS 규칙을 만들 수 있습니다. 위에서 첫 번째 형식은 속성이름을 갖는 모든 요소에 대해서 스타일을 적용하는 형태이고 두 번째부터 선택자를 구성하면서 “[속성이름=속성값]” 형태와 같이 속성이름이 속성값과 같은가를 검사하는 연산자가 사용되었습니다. 정리하면 다음과 같습니다. 연산자 설명 = 속성이 속성값과 같을 경우 ~= 속성이 속성값과 같거나 공백을 포함한 속성값일 경우 |= 속성이 속성값과 같거나 속성값이 “속성값-…”의 형태의 속성값일 경우 ^= 속성이 속성값으로 시작되는 값.. 2013. 7. 31.