IT/코딩 CSS 28 CSS로 '위 첨자'와 '아래 첨자' 입력 위 첨자: superscript 아래 첨자: subscript HTML 코드 한글위 첨자 한글위 첨자 한글아래 첨자 한글아래 첨자 CSS 코드 기본(디폴트) vertical-align: baseline; 위 첨자(superscript) vertical-align: super; 아래 첨자(subscript) vertical-align: sub; font-size를 'small'이나 'smaller' 값으로 지정하여 글자의 크기를 더 작게 만듭니다. px나 em 단위로 지정해도 되겠죠. Class 지정 방법 선택 .superscript { vertical-align: super; font-size: small; } .subscript { vertical-align: sub; font-size: small; .. 2021. 10. 17. CSS Selectors Level 3 Selectors Level 3 Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in an XML document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in perfor www.w3.org https://www.w3.org/TR/selectors-3/#adjacent-sibling-combinators 다른 클래스를 호출하기 위한 코드를 찾다가 자꾸 잊는 내용을 상기시키기 위한 책갈피입니.. 2021. 9. 1. position absolute의 height 설정 position: relative + position: absolute "position: relative" 객체는 document의 정상적인 흐름을 따르지만, "position: absolute" 객체는 그 흐름에서 튀어나와 분리됩니다. position 속성에 absolute 값을 지닌 child(자식) 객체에 top, bottom, left, right, height, width 값을 설정할 때 "position: relative" 값을 가진 가장 가까운 parent(상위, 부모) 객체를 기준으로 지정합니다. 바로 상위 객체에 position 속성으로 relative 값을 가진 객체가 없을 경우 찾을 때까지 더 상위 객체로 거슬러 올라갑니다. 만약에 없을 경우에는 - "document body"를 이.. 2021. 8. 31. SVG animateTransform element SVG scalable vector graphics vector-based graphics and animations in HTML Canvas syntax: transformations transformation 유형(함수) matrix perspective rotate scale skew translate attributes of animateTransform from: the initial(start) value of the attribute during the animation 애니메이션 속성의 시작 변수 to: the final(end) value of the attribute during the animation 속성의 종료 변수 by: the relative offset value of th.. 2021. 8. 22. 티스토리 블로그 애드핏과 애드센스에 'ADVERTISEMENT' 광고 표시 부착 티스토리 블로그에 올리는 애드핏, 애드센스 광고에 해당 이미지나 글이 홍보를 목적으로 하는 내용이라는 표식을 부착하는 방법입니다. 외국의 일부 국가에서는 의무적으로, 관습적으로 혹은 자발적으로 해당 콘텐츠가 광고라는 것을 표시하는 것 같습니다. 국내의 특정 콘텐츠 마케팅 업체의 광고에도 이러한 표식을 부착하는 곳이 있습니다. 애드핏과 애드센스의 국내 광고는 표시하지 않습니다. 표시 문구는 'AD' 혹은 'ADVERTISEMENT'를 많이 사용합니다. 부착하면 장점보다는 단점이 많을 것 같습니다. 각자 판단하여 필요하신 분은 사용해 보세요. 단점은 너무 많으니까 나열할 필요도 없을 것 같습니다. 장점 중의 하나는 위 이미지에 표시한 것과 같이 'ADVERTISEMENT' 문구가 빠르게 로딩된다는 것입니다... 2021. 8. 15. 구글 애드센스 광고 배너 상, 하단 마진 없애는 방법 .navigation + .google-auto-placed .adsbygoogle { margin: 0 auto !important; } 구글 애드센스 배너를 자동으로 설정하면, 블로그나 운영 사이트의 상단 메뉴바 혹은 헤더 바로 아래 배치됩니다. 배너 상단과 하단의 간격은 마진으로 10px입니다. --- 헤더 (혹은 메뉴바) --- 10px의 공백, margin 10px --- 애드센스 배너 --- 10px의 공백, margin 10px 이 형태인데 사이트 디자인에 상, 하단 공백을 없애고 싶을 경우 다음과 같은 CSS 코드를 추가합니다. .google-auto-placed .adsbygoogle { margin: 0 auto !important; } - 구글 애드센스 코드: 'google-auto-.. 2021. 7. 18. 웹 파일 압축 서비스 사이트 압축 서비스라는 것은 파일에 들어 있는 공백(스페이스)를 제거하거나 반복되는 동일한 코드를 일정한 규칙에 따라서 단순화 시켜서 파일의 용량을 줄이는 것입니다. ※ 파일 압축은 관련 분야의 영어 단어로 minify, compress를, 이미지 파일의 용량을 줄여서 웹 로딩 속도를 최적화 한다는 의미로 optimize를 사용합니다. 네트워크로 전송해야 할 데이터의 크기를 작게 만들어 보다 빠른 페이지 로딩을 도모하게 됩니다. HTML, CSS, Javascript와 같은 간단한 웹 페이지 구현을 위한 파일뿐만 아니라 PNG와 JPG 같은 이미지 포맷의 파일도 압축이 가능합니다. 텍스트로 이루어진 HTML, CSS, Javascript 파일을 압축하면 코드가 한 줄이 됩니다. 보기에 불편하기 때문에 다른 개.. 2021. 6. 8. CSS의 폭과 높이 단위, vw / vh / vmin / vmax viewport : 브라우저 윈도 창의 크기, 가변적 ※ CSS Viewport is defined as the visible area on a window screen which refers to the displays of the mobile devices. Adding CSS tag with viewport is an efficient way to improve the web pages to look on smaller screens. The ViewPort is not the same size as the original Webpage. It is not a standard but still tagged as a key approach for Responsive Web Design. In simp.. 2020. 9. 10.
