❤️ CSS3 기본 설정 초기화 * {margin: 0; padding: 0; box-sizing: border-box;} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr..

💖 CSS 미디어 쿼리(Media Query) 미디어 쿼리는 단말기의 유형, 화면 해상도, 뷰포트 너비 등에 따라 사이트의 스타일(CSS)을 적용할 수 있습니다. 해상도 320px 이상 또는 768px 미만 -> 스마트폰 해상도 768px 이상 또는 1024px 미만 -> 태블릿 해상도 1024px 초과 -> PC 1. , , , 기타 다른 HTML 요소에 media 특성을 사용해 특정 매체만 사용하도록 할 때 사용합니다. 2. CSS @media, @import @규칙을 사용해 특정 조건에 따라 스타일을 적용할 때 사용합니다. 3. 모든 최신 브라우저에서 미디어 쿼리가 동작하지만, 만약 IE 8이하에서 동작해야하는 경우라면 polyfill 라이브러리를 사용합니다. @media only | not 미디어..

구글 API를 진행하면서 텍스트 줄 바꿈과 텍스트 (...) 자르기를 진행해 보았다. 내가 알던 CSS3지식을 더해 줄 수 있는 정리를 진행하고자 글을 작성하기로 하였다. 🎁 CSS3를 이용한 텍스트 처리에 대해 알아보도록하자! 🎁 ⭐ white-space p {white-space: nowrap;} white-space 속성은 내부에서의 자동 줄 바꿈 여부를 나타내는 값을 지정합니다. 이 속성은 상속됩니다. 🪄 white-space 속성값 📌 normal : 기본값으로 글자 줄이 자동으로 바뀝니다. 콘텐츠가 요소의 너비를 초과할 경우 다음 줄로 바뀝니다. 📌 nowrap : 줄 바꿈이 실행되지 않습니다. 즉, 콘텐츠가 다음 줄로 바뀌지 않습니다. 📌 pre : 줄 바꿈과 기타 공백이 유지됩니다. 이 가..

내가 만들 사이트의 썸네일과 제목을 설정하는 것을 인강에서 배웠다. 하지만 정확한 이론을 알지 못하고 따라한 것이기에 이번 기회에 더 깊게 배울 수 있도록 공부하기로 하였다. 🎁 하나하나 천천히 뜯어보고 알아보자! 🎁 💖 OG (Open Graph) 란? 해당 콘텐츠의 요약 내용이 "SNS에 게시되는데 최적화된 데이터"를 가지고 갈 수 있도록 설정하는 것 미리보기가 가능한 정보를 노출해준다 = 미리보기 화면 생성 오픈그래프 (OG, 오픈 그래프 프로토콜) 는 어떤 HTML문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜 🔊 (오픈 그래프) 프로토콜 프로토콜(Protocol)은 ..

회사 업무를 진행하다 디자인된 화면과 어울리지 않는 스크롤바를 커스텀을 하였다. 차후 이 지식이 나에게 도움이 될 것 같아 글을 작성하였다 🎁 스크롤 바 커스텀을 진행하여 나만의 홈페이지를 완성시키자! 🎁 💖 스크롤바 스타일 커스텀(Scrollbar Style Custom) 스크롤바 스타일에 대한 웹표준은 존재하지 않습니다. webkit 브라우저(크롬, 오페라, 사파리)에 한해서 가상요소를 사용하여 커스텀을 해줍니다. 스크롤바와 관련된 가상요소는 여러가지가 있지만 주로 사용하는 아래 3가지가 있습니다. ::-webkit-scrollbar : 스크롤바 전체 영역에 대한 설정 ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정 ::-webkit-scrollbar-track : 스크롤..

📢 문제 발생! 모바일에서 a태그 클릭시 하이라이트 효과 꾹 눌렀을 때 또는 터치했을 때 영역 색상을 변경할 수 있다. 💻 지원하는 브라우저 chrome1.0+, edge, poera 7.0+, safari 1.0+, samsung internet 💖 -webkit-tap-highlight-color 문법 -webkit-tap-highilght-color : unset; (기본) -webkit-tap-highlight-color : transparent; (지우기) -webkit-tap-highilght-color : 색상 🌱 안드로이드 인 경우 outline : none; -webkit-tap-highilght-color : transparent; 🔊 a 태그 외 div에서는 css 적용이 안됩니다!