FrontEnd/HTML , CSS7 [ CSS ] :empty 아티클을 읽다가 CSS 선택자 중에 :empty 가 있다는 걸 처음 알았습니다. 저도 항상 첫번째 예시처럼 코드를 작성하곤 했었는데, CSS로 훨씬 더 간단한 코드를 짤 수 있었더라구요. 1. const Card = ({ children, header }) => { return ( {header && {header}} {children} ); }; 2. const Card = ({ children, header }) => { const headerRef = useRef(); useEffect(() => { const hasContent = headerRef.current?.childNodes.length > 0; headerRef.current.style.display = hasContent ? "blo.. 2024. 1. 29. [ HTML ] 오픈그래프 (Open Graph) - meta og 태그 ✔️오픈그래프란? 웹페이지를 SNS로 공유할 때 보이는 미리보기를 설정합니다. ✔️왜 필요할까? 웹페이지의 공유 버튼 혹은 URL을 복사하여 SNS로 콘텐츠를 공유할 때, 콘텐츠의 요약내용이 SNS에 게시되는데 최적화된 데이터를 가지고 갈 수 있도록 설정해줍니다. 최적화된 데이터로 표시된다면 사용자에게 더 좋겠죠? ✔️태그사용법 네이버 블로그, 카톡 미리보기 설정 // 콘텐츠 제목 // 웹페이지 URL // 웹페이지 타입(blog, website 등) // 표시되는 이미지 // 웹사이트 이름(URL과 다름) // 웹페이지 설명(제목 아래에 표시) 트위터 미리보기 설정 // 트위터 카드 타입(요약정보, 사진, 비디오) // 콘텐츠 제목 // 웹페이지 설명 // 표시되는 이미지) 모바일 앱 미리보기 설정 -.. 2023. 12. 14. [ HTML ] favicon 만들기 간단하게 파비콘 만드는 사이트 https://favicon-generator.org Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons. www.favicon-generator.org 자세한 설명 https://doit-fwd.tistory.com/3 파비콘(favicon) 사용하기 "파비콘(favicon)"에 대해 들어보셨나요? favicon란 favorite + icon의 줄임말입니다. 우리가 특정 사이트를 즐겨찾기에 추가했을 때 함께 표시되는 아이콘이기 때문.. 2023. 12. 14. [ CSS ] text-wrap 보호되어 있는 글 입니다. 2023. 11. 11. 벤더 프리픽스 Vendor Prefix 란? 벤더 프리픽스 Vendor Prefix 란? 벤더Vendor 는 공급업체이고, 프리픽스Prefix는 접두사이다. 즉, "공급업체접두사"이다. 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사이다. HTML과 다르게 CSS는 아직 웹 표준이 정해지지 않았다. 따라서 우리는 CSS를 모든 브라우저에서 원활히 사용하기 위해 스타일 속성 앞에 프리픽스를 붙여주어야 한다. 실험적인 해당 기능들이 CSS 표준 권고안에 포함되거나, 완벽하게 제정된 상태가 되면 더는 사용할 필요가 없어진다. 브라우저 별 벤더 프리픽스 브라우저 벤더 프리픽스 IE / Edge -ms- Chrome -webkit- Firefox -moz- Safari -web.. 2023. 10. 31. [ HTML ] HTML 특수문자 Entities Character Entity Name Entity Number Description 여백 (Space) ! ! 느낌표 (Exclamation mark) " " 큰따옴표 (Quotation mark) # # 샵 (Number sign) $ $ 달러 (Dollar sign) % % 퍼센트 (Percent sign) & & & 앤드 기호 (Ampersand) ' ' 아포스트로피 (Apostrophe) ( ( 소괄호/왼쪽 (Opening/Left Parenthesis) ) ) 소괄호/오른쪽 (Closing/Right Parenthesis) * * 별표 (Asterisk) + + 더하기 (Plus sign) , , 쉼표 (Comma) - - 하이픈 (Hyphen) . . 온점, 마침표 (Period) / / 슬.. 2023. 10. 26. 이전 1 2 다음
