Language/Html-Css
Language/Html-Css
CSS - 가상 선택자 ':', '::' 종류, 차이
가상 선택자 가상 클래스(pseudo class) 미리 정의되어있고 눈에 보이지 않음 :link :visited :focus :hover :active :checked :enabled :disabled :empty :first-child :last-child :nth-child() // even, odd, 1,2,3,... :first-of-type :last-of-type :nth-of-type() :nth-last-of-type() :not(선택자) 가상 요소(pseudo element) css로 element를 추가 - 렌더링 후 개발자모드를 통해 확인할 수 있지만 실제로 문서에 존재하지 않음 ::before ::after ::first-letter ::first-line ::selection 업뎃예정
마크다운 배지 만들기
스킬표시에 많이 사용하는 아이콘 만드는 방법 사이트 https://shields.io Shields.io: Quality metadata badges for open source projects Love Shields? Please consider donating to sustain our activitiesYour BadgeStaticUsing dash "-" separator/badge/ - - Dashes --→- DashUnderscores __→_ Underscore_ or Space → SpaceUsing query string parameters/static/v1?label= &message= &color= Colo shields.io https://simpleicons.org Simple ..
highlight.js - 코드
highlight.js 코드를 여러가지 테마를 사용하여 예쁘게 꾸며줄수 있다. 사이트 바로가기 highlight.js Version 10.7.2 This is a patch release. The only change is that deprecation messages are throttled and shown only once. highlightjs.org 스타일 영역을 클릭하면 스타일이 바뀐다. 원하는 스타일을 찾았다면, 반영 소스에 넣어주면 된다. 'atom-one-light'을 넣어보자, 위 소스 중 맨위에 있는 css에 스타일명을 적어 준다. 이외방법 'Get Version'을 들어가면 다른 방법으로도 반영하는 가이드와, 다운로드 해서 서버에 올료 사용하는 방법도 안내되어 있다.
웹접근성 - caption css 처리
웹접근성 table 요소의 caption은 display:none하면 안된다. 코드 caption { overflow:hidden !important; position:relative; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; border:0 !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; }
100% 레이아웃 잡는 방법
100% 레이아웃 기본적으로 제일 많이 사용하고 있는, 컨텐츠가 없어도 푸터가 하단에 고정되는 100% 레이아웃 잡는 방법 스크린샷 코드보기 css html, body { width:100%; height:100%; margin:0; padding:0; } header { position:relative; z-index:2; width:100%; height:80px; } .container { position:relative; z-index:1; min-height:100%; margin:-80px auto -200px; padding:80px 0 200px; } footer { clear:both; position:relative; z-index:2; width:100%; height:200px; }..
