css3 교재3 3. CSS 적용 우선 순위 3. CSS 적용 우선 순위 여러분은 조금 전 웹 페이지에 어떻게 CSS 코드를 이용하여 스타일을 적용할 수 있는지에 대해서 3 가지 방법을 배웠습니다. 웹 사이트를 만들다 보면 다수의 스타일을 적용하게 되며 3 가지 방법을 혼합하여 상황에 따라 사용하게 됩니다. 그런데 만약 일부 스타일을 중복될 경우 어떻게 내부적으로 처리될까요? 조금 전 3가지 방법을 이용한 결과로 다음과 같이 동일한 결과를 얻었습니다. 이 3 가지 방법에 대한 스타일이 적용되는 우선 순위는 다음과 같습니다. 이제 확인을 위해 메모장을 열어서 다음과 같이 “inlineStyle.html”과 동일한 형태로 코드를 작성합니다. CSS를 이용하는 방법 여러분들이 CSS를 웹 페이지에 적용하는 방법은 태그 블록 내에 직접 CSS 관련 코드를.. 2013. 8. 4. 2. CSS를 이용하는 방법 3 가지 2. CSS를 이용하는 방법 3 가지 여러분들이 CSS를 웹 페이지에 적용하는 방법은 위에서 보는 것처럼 태그 블록 내에 정의된 웹 페이지 내용, 즉 컨텐츠가 CSS를 이용하는 방법 여러분들이 CSS를 웹 페이지에 적용하는 방법은 태그 블록 내에 직접 CSS 관련 코드를 입력하는 방법, 필요한 HTML 태그 내에 직접 CSS 코드를 입력하는 방법, 마지막으로 파일 확장자가 .css로 끝나는 외부 파일에 CSS 코드를 작성, 저장한 후 이를 웹 페이지에서 참조하여 CSS에 정의된 대로 스타일을 적용하는 방법으로 나눌 수 있습니다. 위와 같이 작성, 저장한 후 IE9를 통해 그 결과를 확인하면 다음과 같이 나타납니다. 이제 위와 같은 내용에 대해 스타일을 적용하기 위해서 위의 CSS 코드는 배경색은 노랑(y.. 2013. 8. 4. 1.7.3 인접 형제(Adjacent Sibling) combinator 1.7.3 인접 형제(Adjacent Sibling) combinator 인접 형제 combinator는 선택자1(selector1)이 온 다음에 그 다음 바로 나오는 selector2가 나와야 하며 같은 부모를 가져야 합니다. 그래서 이와 같은 조건에 맞는 selector2에 정의된 스타일을 적용하는 것으로 다음과 같은 형식을 사용합니다. selector1 + selector2 { property:value; property:value; …} “combinatorEx.html” 파일을 메모장으로 열고 블록을 다음과 같이 작성합니다. 다른 이름으로 저장을 선택하여 adjacent_sibling_combinator.html로 저장한 후 IE9를 통해 열어보면 다음과 같이 h4 요소 다음에 바로 이어지는 p.. 2013. 8. 1. 이전 1 다음
