시간과 공간

선택자 우선순위 더 높은 우선순위 그룹의 규칙이 있으면 낮은 그룹의 경쟁 규칙은 무시된다. 그룹은 해당 선택자의 명시도에 따라 분류된다. 낮은 우선순위 그룹의 선택자는 높은 우선순위 그룹의 선택자에 비해 명시도가 낮다. 선택자 우선순위를 결정할 때는, 일반적인 선택자는 문서의 전반적인 스타일을 설정하는데 적용하고, 더 구체적인 선택자는 일반적인 선택자보다 우선시하여 특정 스타일을 적용하길 권장한다. 특징 스타일 시트는 다음과 같은 3개의 CSS original source를 가질 수 있다. 제작자(author) : 웹 사이트 제작자가 지정하는 자신의 페이지 스타일 사용자(user) : 사용자가 직접 정하는 자신이 사용할 스타일 사용자 도구(user agent) : 웹 브라우저 자체에 지정된 기본 스타일 ..

※ 해당 글은 참조 url을 참고하여 작성한 내용입니다. 자세한 내용은 참조 url 링크를 확인부탁드립니다~! ※ *지원 범위 : 모든 브라우저에서 효과적으로 지원된다.(IE6이상, Firefox2 이상, Chrome1 이상 등) *vertical-align 속성의 특징 inline block을 포함한 inline 요소의 수직 정렬을 위해 사용된다. block 요소의 수직 정렬에는 영향을 미치지 않는다. (table cell은 예외) 요소 자체만을 정렬하고, 내용에는 영향을 미치지 않는다. display:table cell에 적용할 때는 내용에 영향을 미친다.(margin 속성 작동하지 않는다. -> div 같은 block 요소를 부모요소로 감싼 후, 그 부모요소에 margin값을 주면 된다.) vert..

CSS 이미지 스프라이트(Image Sprite) 웹페이지의 첫 로딩 속도를 줄여주는 여러 방법 중 하나로 서버로의 요청 횟수를 최소화해줘서 모바일환경과 같이 한정된 자원을 사용하는 플랫폼의 최적화 요소 중에서도 실제 적용하기에 아주 손쉬운 방법입니다. 원리는 아이콘이나 버튼과 같은 반복되서 표시되지 않는 그림들처럼 독립된 여러 그림을 하나의 그림으로 합쳐놓고 CSS의 background-position속성을 이용해 이미지의 특정 부분만 노출되도록 하는 것이다. 이렇게 하면 서버로의 요청 횟수를 줄여주면서 사이트 로딩 속도를 줄여주고 내려받는 이미지의 크기까지 줄여줄 수 있는 효과를 얻을 수 있다. 일일이 그래픽 프로그램에서 여러 개의 그림을 하나의 이미지로 합치고 CSS적용을 위한 그림의 좌표값을 얻기..