퍼블리싱 공부하기 퍼블리싱 공부하기

분류 전체보기

• 비어있는 요소 숨기기 css

  tip 2022. 12. 1. 14:01

  [html] 여기 저기 이거는요 [css] li:empty{display:none;} p:empty{display:none;}

  Read More
• text-underline 간격 ::after 없이 띄우기(web)

  tip 2022. 11. 21. 11:02

  a:hover {text-decoration: underline; text-underline-offset: 2px;} * 다만 text-underline-offset 속성은 Internet Explorer, Firefox for Android, Opera Android 에서 지원되지 않는다. web에서만 쓰일 경우나 호버일 경우에만 쓰기(모바일은 hover 기능이 click으로 바로 되니까)

  Read More
• 모바일 <br> 태그 대신 한칸 띄어쓰기 css

  tip 2022. 11. 7. 16:59

  [css] @media only screen and (max-width: 767px) { br{ display: inline-block; content: " "; padding: 0 2px; } }

  Read More
• 텍스트 균등 분할/양쪽 배분 정렬 css

  tip 2022. 11. 7. 16:50

  See the Pen Untitled by minjungMom (@MinJungMom) on CodePen. * :after 만 쓰면 한쪽에 여백이 생기므로 :before 도 꼭 넣어주기

  Read More
• [접근성] 텍스트 숨김

  tip 2022. 11. 7. 10:14

  .blind{ overflow:hidden; position:absolute !important; width:1px !important; height:1px; padding:0; margin:-1px; clip:rect(1px, 1px, 1px, 1px); clip-path:inset(50%); border:0; } overflow: hidden > overflow된 콘텐츠 숨기기 position:absolute > clip 속성은 position 값이 fixed, absolute 일 때만 사용 가능하고 레이아웃에 영향이 안가도록 width: 1px, height: 1px > 스크린리더기가 읽을 수 있는 최소한의 사이즈 padding:0, border:0 > 상속되거나 적용될 수 있는 스타일 제거 mar..

  Read More
• 라디오/체크박스 만들기

  tip 2022. 11. 7. 09:51

  [html] 1. 라디오 스타일 라디오1 라디오2 라디오3 2. 체크박스 스타일 체크박스1 체크박스2 기타 [css] input[type=radio]{ -webkit-appearance:none; position: absolute; width: 24px; height: 24px; z-index: 9; margin: 0 0 0 0px; top: 0; } input[type=checkbox]{ -webkit-appearance:none; position: absolute; width: 24px; height: 24px; z-index: 9; margin: 0 0 0 10px; opacity: 0; } label{position: relative;z-index: 10; font-size: 16px; color..

  Read More
• 넘버링 된 제목 정렬하기

  tip 2022. 11. 4. 15:06

  See the Pen Untitled by minjungMom (@MinJungMom) on CodePen. 0~9 까지는 1, 2번 둘 중 아무거나 숫자의 넓이가 고정되어 있을 때는 1번 숫자 넓이가 고정되어 있지 않다면 2번

  Read More
• 선택자

  tip 2022. 11. 4. 14:36

  :nth-child(7n) > 7, 14, 21, 28 ... 번째 (7의 배수) :nth-child(n+20) > 20번째부터 그 이후에 전부 :nth-child(-n + 5) > 1번째부터 4번째까지 :nth-child(n+16):nth-child(-n+19) > 16번째부터 19번째까지 :nth-last-child(3) > 마지막에서부터 3번째 :nth-child(2n+1) / :nth-child(odd) > 홀수번째 :nth-child(2n) / :nth-child(even) > 짝수번째 :not(:frist-child) > 첫번째 자식만 빼고 :not(.class) > .class명 붙은 애들만 빼고 button[style*="display: none"] + p > 버튼이 display: non..

  Read More