웹 개발자 & 디자이너 PJW48의 생각보관창고 블로그입니다.
이 포스트는 HTML5에서 추가된 <meter> … </meter> 태그에 관한 내용입니다. 이 태그는 HTML5에서 추가된 유용한 태그 <progress> 포스트에 설명한 <progress> 태그와 마찬가지로 수치 막대를 표시하기 위한 태그입니다. 다만 다른 점이 있다면, <progress> 태그는 진행 상황을 막대로 표시하기 위한 태그이고, <meter> 태그는 진행 상황이 아닌 것 중 미터로 나타내기 적합한 수치(알려진 범위 내에서의 스칼라 측정 또는 … 더 보기 “HTML5에서 추가된 유용한 태그 <meter>”
이 포스트에서는 스크롤바의 모양을 바꾸는 CSS에 대해서 서술합니다. 다음 HTML 코드를 봅시다. <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> <title>Scrollbar CSS Sample</title> <meta http-equiv=”X-UA-Compatible” content=”IE=edge” /> <style type=”text/css”> /* Webkit (Chrome, Edge, Opera, Safari) */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background-color: #aaa; } ::-webkit-scrollbar-thumb { background-color: … 더 보기 “스크롤바 모양 바꾸는 CSS”
이 포스트에서는 웹 브라우저의 밝은/어두운 테마에 따라 다른 모양으로 표현되는 웹 페이지를 만들기 위한 CSS에 대해 서술합니다. CSS의 미디어쿼리에는 웹 브라우저의 테마(밝게/어둡게)에 따른 반응형 미디어쿼리도 있습니다. 근래의 웹 브라우저(특히 모바일 브라우저)에서는 밝은 테마와 어두운 테마를 선택하는 것을 지원하는데, 기본적으로 밝은 배경의 웹 페이지를 만들어 두고 웹 브라우저의 테마를 어둡게 했을 경우 그 테마에 맞춰 어두운 … 더 보기 “어두운 테마에서 다르게 표시되는 CSS 만들기”
이 포스트에서는 HTML의 6가지 구절 태그에 대한 내용을 다룹니다. HTML에서 쓸 수 있는 구절 태그는 어떤 구절 내에서 해당 태그로 감싼 내용에 어떤 효과를 주면서 그 의미를 분명히 하는 데 쓰입니다. HTML5에서 추가된 <mark> 태그도 같은 이유로 추가되었습니다. HTML5 전부터 쓰여 지금도 표준으로 쓰이는 6가지 구절 태그들은 다음과 같습니다. <em> 글에서 중요한 부분을 표시합니다. 기본적으로 … 더 보기 “HTML의 구절 태그 6가지”
이 포스트에서는 <blockquote> … </blockquote> 태그와 <q> … </q> 태그에 관한 내용을 설명합니다. 이 두 태그는 인용문을 표현하기 위해 사용하는 태그라는 공통점이 있습니다. 하지만 다른 점이 있는데, 이 두 태그의 차이는 요약하자면 <div> 태그와 <span> 태그의 차이와 비슷합니다. <blockquote> 태그는 이름이 block과 quote의 합성어라는 특징에 걸맞게 인용문을 통째로 하나의 블록으로 할당합니다. 반면에 <q> 태그는 인용문을 … 더 보기 “HTML의 <blockquote> 태그와 <q> 태그”
이 포스트는 HTML5에서 추가된 <details> … </details> 태그에 관한 내용입니다. 이 태그는 기존에 자바스크립트를 이용해서 구현하였던 내용 접기/펼치기 기능을 자바스크립트 없이 구현하기 위한 태그입니다. 블로그 등을 보면 ‘더 보기’ 단추가 있고 누르면 숨겨져 있던 내용들이 나오며 ‘접기’ 버튼을 누르면 내용이 다시 숨겨지는 기능이 있었는데 바로 이 기능을 자바스크립트 없이 구현하기 위해 이 태그가 추가된 것입니다. … 더 보기 “HTML5에서 추가된 유용한 태그 <details>”
이 포스트에서는 <span> 태그의 CSS로 <font> 태그를 대체하는 방법을 설명합니다. HTML의 유용한 태그 <span> 포스트에 설명한 바와 같이 과거에는 <font> 태그가 널리 쓰였으나 W3C에서 ‘HTML 문서에는 의미적인 기능을 부여한다’는 정책 기조를 수립함에 따라 HTML 4.01에서 <font> 태그를 표준에서 제외할 것을 예고하였고 HTML5부터 <font> 태그의 지원이 중단되었습니다. 이에 따라 기존의 <font> 태그는 비슷한 성격을 가진 <span> … 더 보기 “<font> 태그를 <span> 태그로 대체하기”
이 포스트는 HTML의 <span> … </span> 태그에 관한 내용입니다. 이 태그는 인라인 요소를 묶기 위한 태그입니다. 본래 글꼴 모양을 지정하기 위한 태그로 <font> … </font> 태그가 있었으나 크기의 미세한 지정이나 배경 글자색 지정이 불가능한 등 글꼴 모양 설정에 제약이 심하고 ‘HTML 문서에는 의미적인 기능을 부여한다’는 W3C의 기조와도 맞지 않아서 HTML 4.01 이후 권장하지 않는(deprecated) 태그가 … 더 보기 “HTML의 유용한 태그 <span>”
이 포스트는 HTML의 <ins> … </ins> 태그와 <del> … </del> 태그에 관한 내용입니다. 이름에서도 보다시피 <ins> 태그는 내용의 추가를 의미하는 태그이고 <del> 태그는 내용의 삭제를 의미하는 태그입니다. 얼핏 보면 오해할 수 있지만 <del> 태그는 내용 자체가 눈에 보이지 않게 하는 게 아니라 가로줄을 그어 삭제된 내용임을 표시하는 태그입니다. 이와 같은 기능을 하는 태그로 <s> 태그와 … 더 보기 “HTML의 <ins>와 <del> 태그”
이 포스트는 HTML의 <abbr> … </abbr> 태그에 관한 내용입니다. 이 태그 이름인 abbr은 abbreviation의 약자로 ‘축약어’를 의미합니다. 즉, 이 태그는 축약어를 쓸 때 사용하는 태그입니다. HTML5 표준이 제정되기 전에는 축약어는 <abbr> 태그로, 두문자어는 <acronym> 태그로 구분하여 사용하였으나, 두 태그를 굳이 구분하여 사용할 필요성이 부족하다는 지적에 따라 HTML5에서는 <abbr> 태그로 통합되었습니다. 우선, 이 태그에 필요한 CSS를 … 더 보기 “HTML의 유용한 태그 <abbr>”