반응형

lang/css 16

css 가상 클래스(Pseudo classes), 가상 엘리먼트(Pseudo Elements)

가상 클래스 :active 사용자가 요소를 활성화 (예 클릭) 일치합니다. /* 활성화된 모든 `` 태그를 선택 */ a:active { color: red; } :active 가상 클래스는 대개 , 과 함께 사용합니다. 다른 흔한 대상으로는 활성화된 요소를 포함한 다른 요소와 연결된 로 선택한 입력 폼 요소 등이 있습니다. :active 가상 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 가상 클래스(:link, :hover, :visited)가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(:link — :visited — :hover — :active)를 따라, :active 규칙을 다른 모든 링크 규칙들보다 뒤에 배치하세요. 참고: CSS3 명세에 따르면 ..

lang/css 2021.10.16

bootstrap dl-horizontal

http://getbootstrap.com/css/#type-lists bootstrap css 를 모두 사용하긴 그렇고 dl-horizontal 클래스 정의만 사용하고 싶을 때... 아래 css를 추가한다. dt { display: block; font-weight: 700; line-height: 1.42857143; } dd { display: block; -webkit-margin-start: 40px; line-height: 1.42857143; margin-left: 0; } @media (min-width: 768px) { dt { float: left; width: 160px; overflow: hidden; clear: left; text-align: right; text-overflow..

lang/css 2016.08.11

부트스트랩 +iconmoon

Customizing Bootstrap Icons using Gulp Create an Icon Font Using Illustrator & IcoMoon 부트스트랩에 프로젝트에서는 기본으로 제공되는 Glyphicons을 사용할 수 있는데요. Glyphicon 외 내가 직접 구성한 아이콘셋과 아이콘셋을 이용할 수 있게 제공되는 CSS를 이용해서 부트스트랩에서 사용할 수 있는 방법입니다. icomoon CSS을 다운로드 받으면 style.css 도 같이 다운로드 됩니다. 이 style.css 의 패턴을 참고해서 부트스트팹의 style.css를 최적화하면 사용이 가능합니다. 하지만 Customizing Bootstrap Icons using Gulp에서 안내하는 방법이 glyphicon.less 를 이용해서..

lang/css 2015.07.06

네비게이션 링크

네비게이션 링크 복수 페이지 사이의 관계를 링크로 표시하는 기능 네비게이션 링크를 확실하게 지정하면 사이트에서 이동이 편리해지고 사용성이 향상된다. WCAG1.0에서도 '우선도2'로 네비게이션 링크를 지정하게 규정하고 있다. rel속성값 및 내용 start : 시작페이지 next : 다음페이지 prev : 이전페이지 contents : 차례 index : 찾아보기 glossary : 용어집 copyright : 저작권보호 chapter : 장 sectioin : 절 subsecton : 항 appendix : 부록 help : 도움말 bookmark : 즐겨찾기 link 요소로 대체문서를 지정 대체문서 지정, 다른어어버전 표시 및 media 속성을 지정하면 다른 미디어에 적용할 버전을 표시할 수 있다. ..

lang/css 2009.04.24
반응형