html4 케스케이딩과 스타일 우선 순위 css에서 c는 케스케이딩으로 '위에서 아래로 흐르는 스타일 시트'라는 뜻이다. html문서에 스타일을 적용할 때 적용되는 스타일 간에 충돌이 발생할 수 있다. 이때 어느 스타일을 따라야하는지에 대한 규칙이 '스타일 우선순위'와 '스타일 상속'이다. 스타일 우선순위 스타일 우선순위는 다음과 같다. 1. 사용자 중요 스타일 2. 제작자 중요 스타일 3. 제작자 일반 스타일 4. 기본적인 브라우저 스타일 사용자 스타일 시트란 시스템에서 설정한 스타일을 뜻한다. 예를들어 윈도우즈 운영체제에서는 고대비 설정을 줄 수 있는데 이렇게 적용된 스타일이 사용자 스타일 시트이다. 제작자가 만든 스타일 시트는 사이트를 제작하면서 만든 스타일 시트를 말한다. 이때 !important가 붙은 스타일이 중요 스타일이다. 이 중.. 2021. 11. 19. CSS3 선택자 - 속성 선택자 [속성] - 지정한 속성에 스타일을 적용한다. 이 선택자는 지정한 속성을 가진 요소를 찾아 스타일을 적용한다. '[ ]' 사이에 찾으려는 속성을 지정하면 된다. 아래의 예시는 a태그 중 href속성을 가진 요소에 배경색을 지정하는 것이다. a[href] { background: yellow; } [속성 = 값] - 속성과 속성 값이 일치하는 요소를 찾아 스타일을 적용할 수 있다. 아래 예시는 스타일을 target속성과 target속성값이 blank인 모든 태그에 적용시킨다. [target="blank"] { } [속성 ~= 값] - 여러 값 중 특정 값이 포함된 속성에 스타일을 적용한다. 아래의 선택자는 class속성에서 button을 포함한 태그에 스타일을 적용한다. 예를 들어 class="button.. 2021. 11. 19. CSS3 선택자 - 연결 선택자 하위 선택자 - 상위요소에 있는 하위 요소에 css를 적용한다. 상위요소와 하위요소는 공백으로 구분한다. section p { color: blue; } 자식 선택자 - 부모 요소안에 포함된 자식 요소중 해당 요소에만 css를 적용한다. 부모 요소와 자식요소는 >로 구분한다. section > p { clolr: blue; } 인접 형제 선택자 - 부모요소를 가지는 요소들을 형제요소라고 하는데, 먼저 오는 요소를 '형 요소' 다음에 오는 요소를 '동생 요소'라고 한다. 인접 형제 선택자는 첫 번째 동생요소에만 스타일을 적용한다. h1 + p { text-decoration: underline; } 형제 선택자 - 인접 형제 선택자와 달리 모든 형제 요소에 적용한다. 요소 사이에 '~'로 구분한다. h1 .. 2021. 11. 19. display의 inline, block, inline-block 요소 모든 html요소에는 요소 유형에 따라 기본 표시 값이 있다. 인라인과 블록 방식이다. none요소는 요소가 숨겨져서 페이지에 요소가 없는 것처럼 표시된다. visibility:hidden도 비슷한 기능을 하나 none의 경우 공간조차 차지하지 않는다. inline요소는 요소들이 가로로 배치되며 , , , 태그 등이 있다. 인라인 요소는 너비, 높이를 지정할 수 없다. 필요한 만큼만 너비를 차지한다. 주로 목록에서 사용된다. block요소는 요소들이 세로로 배치되며 , , 태그 등이 있다. 태그같은 인라인 레벨 요소도 블록레벨 요소로 바꿀 수 있다. 블록 요소는 가능한 최대의 너비 값을 가진다. 위쪽 여백과 아래쪽 여백속성을 줄 수 있다. inline-block요소는 인라인 요소지만 블록 요소 처럼 너비.. 2021. 11. 17. 이전 1 다음