이 포스트는 HTML의 <base> 태그에 관한 내용입니다. <base> 태그는 HTML5 표준이 정해지기 전에도 이미 표준으로 정해져 있는 태그입니다. 이 태그는 <head> … </head> 안에 쓰여 마치 <meta> 태그와 같이 작동하는 태그로, 페이지의 링크가 상대경로로 되었을 때 그 기준이 될 경로를 지정하고 다른 페이지로 링크할 때 기본적으로 그 링크의 대상이 되는 창 혹은 프레임을 어디로 할 … “HTML의 유용한 태그 <base>” 더 읽기
이 포스트는 HTML5에서 추가된 <time> … </time> 태그에 관한 내용입니다. <time> 태그는 ‘HTML 문서에는 의미적인 기능을 부여한다’는 W3C의 기조를 반영하기 위해 HTML5에서 추가된 태그 중 하나입니다. 이 태그의 용도는 문서 내용 안에 어떤 날짜나 시간을 나타내는 표현이 있을 때 그 부분에 사용하여 알맞은 날짜나 시간을 컴퓨터가 인식할 수 있게 의미적으로 나타내는 데 사용합니다. 이 태그의 … “HTML5에서 추가된 유용한 태그 <time>” 더 읽기
이 포스트에서는 오픈그래프 태그에 관한 내용을 다룹니다. 오픈그래프(Open Graph)는 웹 페이지를 소셜 미디어와 연동하기 위한 기법입니다. 사이트가 소셜 미디어(트위터, 페이스북, 인스타그램 등)로 공유될 때 오픈그래프 정보가 우선적으로 활용됩니다. 여기에는 제목, 설명, 대표 이미지, URL 등이 들어갑니다. 오픈그래프 정보를 웹 페이지에 삽입할 때는 <head> … </head> 안에 메타 태그(<meta>)의 형태로 삽입합니다. 예를 들면, 다음과 같습니다. <meta … “소셜 미디어 연동을 위한 오픈그래프 태그” 더 읽기
이 포스트에서는 <div> 등의 태그로 그리는 박스 영역의 크기를 잡을 때 그 기준을 정하는 CSS에 대해서 서술합니다. 박스 크기의 기준을 정하는 CSS 프로퍼티의 이름은 box-sizing이며, 이 프로퍼티는 CSS3에서 새로 추가된 프로퍼티입니다. 이 프로퍼티가 가질 수 있는 값은 initial과 inherit를 제외하면 다음과 같이 두 가지가 있습니다. content-box 내용 영역을 기준으로 크기를 잡습니다. 즉, 바깥 여백(margin)과 외곽선(border)과 … “박스 크기의 기준을 정하는 CSS” 더 읽기
이 포스트는 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 만들기” 더 읽기