본문 바로가기

웹 퍼블리셔 기록/css

 (4)
:after 과 ::after 의 차이점은 바로 이것입니다. :after은 CSS2에서 , ::after은 CSS3에서 사용하는 것입니다. 즉, 가상요소(Pseudo-elements)는 CSS2에서는 : 가 하나만 표기되고 CSS3에서는 :가 두개 표기됩니다. CSS3에서 ::after로 표기되는 이유는 가상클래스와 가상요소의 차이를 분명하게 하기 위함이라고 합니다. (둘 다 앞에 : 가 붙어서 헷갈릴까봐 차이를 주기위함인 것같음) 가상클래스 :hover, :active, :checked, :last-child ...등등 가상요소 ::after, ::before, ::first-letter, ::placeholder ...등등 하지만 호환성을 위해 :after, :before 도 허용됩니다. 결론. 가상클래스와 가상요소가 헷갈리지 않는 다면 그냥 :after, :..
CSS 초보 팁 : z-index 값을 아무리 올려도 작동이 안돼요 제가 겪은 z-index가 작동하지 않는 한가지 케이스를 보여드릴게요. 부모와 자식 모두 position:absolute; 가 적용되어 있는 경우에는 자식의 z-index 값을 아무리 올려도 부모를 벗어나서 적용될 순 없습니다. 예를 들어, 만일 코드 구조가 이렇게 부모와 자식이 있는 상태에서, .parent{position:absolute; z-index:0;} .child{position:absolute; z-index:100;} CSS가 이렇게 적용이 되어있다면, child는 부모 속에 있는 요소이기 때문에 부모 밖으로 나갈 수 없는 것입니다. 음..지금와서 보면 참..이런 실수 왜했나 싶은데 1년전엔 .child에 z-index 값이 적용이 안되어서 99999까지 올리기도 했었죠..ㅋㅋ 책상 정리..
input checkbox CSS 설정 방법 저는 지금껏 input checkbox 체크 설정을 jQuery로 설정을 해왔는데 이번에 사수분이 input checkbox 는 CSS로 설정하는게 낫다고 해주셔서 한번 정리해봤습니다. (너무 기초적인 부분을 모르고 코딩했다는 사실이 부끄럽네요 ㅠㅠ ) 체크 박스의 체크 이미지는 폰트어썸의 아이콘을 사용하여 폰트어썸 CDN 을 첨부해줬어요. HTML에서 태그를 짤 때, input의 ID 이름과 label의 for 이름을 똑같이 연동 시켜줘야 기능이 작동하니 잊지마세요. input 태그는 안보이게 숨기고 label:before 가상객체로 CSS를 꾸며주는 방식이에요 input:checked + label:before 를 사용하면 CSS에서도 체크박스가 클릭된 설정이 가능합니다. 이렇게 input check..
select 옵션에 아이콘 넣는 방법 안녕하세요 오늘은 select 박스에 아이콘 넣는 방법을 알려드릴게요! 그 전에 먼저 소개할 사이트가 있습니다 https://fontawesome.com/ font awesome 이라는 사이트인데요 일부 아이콘을 무료로 제공해주기 때문에 퍼블리싱을 할 때 아주 유용하게 사용하는 사이트랍니다. 일단 여기 아이콘을 사용하도록 할게요 여기서 잠깐..! (...?????) 보통 오픈소스 아이콘을 사용할 때는 이런 태그를 복사해서 사용하지만 select 박스에 아이콘을 넣을 때는 이런 방식으로 적용하면 아이콘이 뜨지 않아요 우리는 font awesome 이 제공하는 다른 서비스를 사용하여 select 박스에 아이콘을 넣을 수 있어요 fontawesome 사이트를 맨 아래로 스크롤 하면 제일 하단에 Cheatshe..

티스토리툴바