이 포스트는 HTML5에서 추가된 <ruby> … </ruby> 태그에 관한 내용입니다. 이 태그는 글 내용에 넣는 태그로, 글자 혹은 단어에 덧말을 붙이는 태그입니다. 한자문화권에서 한자 위에 독음을 작은 글씨로 써서 붙이는 경우가 있는데 바로 이러한 표현을 구현하는 태그입니다. 현재도 일본어에서는 한자를 음독과 훈독을 둘 다 하는 특성 때문에 한자 위에(세로쓰기는 한자의 오른쪽에) 히라가나 혹은 가타카나를 조그맣게 … “HTML5에서 추가된 유용한 태그 <ruby>” 더 읽기
웹 페이지를 만들 때 스크롤이 가능하게 하면서도 스크롤바를 숨겨야 할 경우가 있습니다. 모바일 기기에서는 스크롤바가 평소에는 보이지 않다가 스크롤 중에 희미하게 보이지만 데스크톱에서는 오른쪽에 자리를 차지하고 있는데, 이 때 overflow: hidden;으로 CSS를 지정하면 스크롤바는 숨겨지지만 스크롤이 되지 않습니다. 다만, 모종의 방법을 사용하면 스크롤바가 숨겨진 상태에서도 스크롤이 가능하게 구현할 수 있습니다. 스크롤바를 숨기고 웹 페이지를 스크롤할 … “스크롤바가 숨겨진 상태에서 스크롤되는 웹 페이지 만들기” 더 읽기
이 포스트는 HTML5에서 추가된 <progress> … </progress> 태그에 관한 내용입니다. 이 태그는 네이티브 앱에서 흔히 볼 수 있는 진행 상황 표시 막대를 표시하기 위한 태그입니다. 설치 프로그램 등을 보면 설치 진행 상황이 막대로 표시되는 것을 볼 수 있을 것입니다. 이러한 진행 상황 막대를 웹 페이지에서 구현하는 역할을 합니다. 물론 <div> … </div> 태그에 스타일시트를 입히는 … “HTML5에서 추가된 유용한 태그 <progress>” 더 읽기
이 포스트는 HTML5에서 추가된 <picture> … </picture> 태그에 관한 내용입니다. 이 태그는 기기의 환경에 따라 이미지를 다르게 표시하기 위해 고안된 태그입니다. 반응형 CSS 만들기 포스트에서 CSS에 미디어쿼리를 지정하여 기기의 환경에 따라 다른 모양으로 표시되는 페이지를 구현하는 방법을 서술한 바 있습니다. 본문 내 이미지에도 미디어쿼리를 이용하여 다른 이미지를 표시하는 기능이 있습니다. 일단, 다음 코드를 봅시다. <picture> … “HTML5에서 추가된 유용한 태그 <picture>” 더 읽기
이 포스트에서는 HTML5에서 추가된 <figure> … </figure> 태그에 관한 내용입니다. 이 태그는 HTML5에서 본문 내용 안에 첨부자료(사진, 그래프 등)를 삽입하기 위한 태그입니다. 이 태그 안에 첨부자료를 삽입하는 태그를 넣고 추가적으로 설명문(caption)을 넣어서 씁니다. 신문 등을 보면 본문 중간에 사진이 있고 그 밑으로 사진의 설명문이 있는 것을 볼 수 있는데 <figure> 태그가 바로 이런 형태를 구현하기 … “HTML5에서 추가된 유용한 태그 <figure>” 더 읽기
이 포스트에서는 모바일의 가로화면 또는 세로화면에 따라 다른 모양으로 표현되는 웹 페이지를 만들기 위한 CSS에 대해 서술합니다. 반응형 CSS 만들기 포스트에서도 설명한 바와 같이 CSS에 미디어쿼리 기능이 있습니다. 반응형 CSS에는 브라우저의 최소폭에 따라 다른 CSS 코드를 지정해 줄 수 있었습니다. 미디어쿼리에서는 최소폭 뿐만 아니라 다른 여러 조건을 지정할 수 있는데 그 중 웹 페이지를 표시할 … “모바일의 가로세로에 따라 달라지는 CSS 만들기” 더 읽기
<a> … </a> 태그로 버튼을 만들 때 다음과 같은 경우를 생각해 볼 수 있을 것입니다. <a href=”#” onClick=”user_defined_function();”>Button</a> 이와 같이 링크는 #으로 처리하고 클릭하면 미리 정의된 자바스크립트 함수를 실행하게 하는 방식이 있습니다. 이 방식의 경우 문제점이 하나 있는데, 버튼을 누르고 나면 위의 주소 표시줄 끝에 # 표시가 생길 수 있다는 점입니다. 이 상태가 되면 순간적으로 … “<a> 태그로 만든 버튼 누를 때 # 표시 뜨지 않게 하기” 더 읽기
이 포스트에서는 반응형 웹 페이지를 만들기 위한 CSS에 대해 서술합니다. CSS에 미디어쿼리 기능이 있습니다. 같은 웹 페이지라도 인쇄하기 위한 레이아웃은 화면에 표시하기 위한 레이아웃과 다르게 해야 할 필요가 있고, 화면도 기기에 따라 해상도가 천차만별이기 때문에 다양한 해상도에서 레이아웃을 다르게 하기 위해 다양한 환경 조건에 따라 모양을 다르게 할 수 있는 기능을 제공합니다. CSS에 미디어쿼리를 적용하는 … “반응형 CSS 만들기” 더 읽기
이 포스트에서는 CSS로 롤오버 버튼을 만드는 방법을 포스팅합니다. 예전에는 롤오버 버튼(마우스를 대면 모양이 바뀌는 버튼)을 만들려면 보통의 버튼 이미지와 롤오버 버튼 이미지를 준비해 놓고 자바스크립트를 써서 마우스를 대면 롤오버 버튼 이미지로 변하게 하는 방식을 사용했습니다. 하지만 CSS를 이용하면 간단한 텍스트 버튼의 경우는 자바스크립트 없이 CSS만 가지고도 롤오버 버튼을 만들 수 있습니다. 이것은 CSS를 이용하여 링크에 … “CSS로 롤오버 버튼 만들기” 더 읽기
이 포스트에서는 HTML5에서 추가된 <mark> … </mark> 태그에 관한 내용입니다. <mark> 태그는 비주얼적인 태그이면서도 특이하게도 HTML 4.01에서는 없었다가 HTML5에서 새로 생긴 태그입니다. 비주얼적인 태그는 HTML 문서에서 배제하는 추세임을 감안해 본다면 특이한 사례라는 생각이 들 수도 있겠습니다. 하지만 <mark> 태그가 추가된 이유는, 이미 글자를 굵게 하기 위한 태그로 <b>가 있음에도 <strong>이 따로 존재하는 이유와 같습니다. 즉, … “HTML5에서 추가된 유용한 태그 <mark>” 더 읽기