CSS 17 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. 티스토리 블로그 애드핏과 애드센스에 'ADVERTISEMENT' 광고 표시 부착 티스토리 블로그에 올리는 애드핏, 애드센스 광고에 해당 이미지나 글이 홍보를 목적으로 하는 내용이라는 표식을 부착하는 방법입니다. 외국의 일부 국가에서는 의무적으로, 관습적으로 혹은 자발적으로 해당 콘텐츠가 광고라는 것을 표시하는 것 같습니다. 국내의 특정 콘텐츠 마케팅 업체의 광고에도 이러한 표식을 부착하는 곳이 있습니다. 애드핏과 애드센스의 국내 광고는 표시하지 않습니다. 표시 문구는 'AD' 혹은 'ADVERTISEMENT'를 많이 사용합니다. 부착하면 장점보다는 단점이 많을 것 같습니다. 각자 판단하여 필요하신 분은 사용해 보세요. 단점은 너무 많으니까 나열할 필요도 없을 것 같습니다. 장점 중의 하나는 위 이미지에 표시한 것과 같이 'ADVERTISEMENT' 문구가 빠르게 로딩된다는 것입니다... 2021. 8. 15. 웹 파일 압축 서비스 사이트 압축 서비스라는 것은 파일에 들어 있는 공백(스페이스)를 제거하거나 반복되는 동일한 코드를 일정한 규칙에 따라서 단순화 시켜서 파일의 용량을 줄이는 것입니다. ※ 파일 압축은 관련 분야의 영어 단어로 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. 티스토리 북클럽 스킨의 포스트 커버 하단 여유 공간 축소 수정: 2020.08.16, 내용 자체에 오류가 많아서 다시 작성했습니다. 티스토리에서 제공하는 무료 스킨 "북클럽(Book Club)"을 사용하고 있습니다. 이 스킨에는 본문 페이지에 첨부된 이미지를 상단에 재배치하여 시각적인 효과를 주는 'post-cover' 영역이 존재합니다. 기본 높이가 340px이며, 영역 내부 하단에 약간의 여유 공간을 제공합니다. 아래 이미지는 모바일(767px 이하)의 post-cover입니다. [출처] 북클럽 데모 페이지 시각적으로는 보기 좋지만 내용이 중복되고 많은 공간을 차지하니까 많은 블로거가 이 영역의 높이를 줄여서 사용합니다. 이 높이를 수정해서 사용하다 보면 포스트 커버의 텍스트가 영역의 지정된 높이를 초과하여 하단의 다른 영역을 침범하여 가리는 오류가 발생합.. 2020. 5. 8.
