웹 개발자 & 디자이너 PJW48의 생각보관창고 블로그입니다.
이 포스트에서는 <div> 등의 태그로 그리는 박스 영역의 크기를 잡을 때 그 기준을 정하는 CSS에 대해서 서술합니다. 박스 크기의 기준을 정하는 CSS 프로퍼티의 이름은 box-sizing이며, 이 프로퍼티는 CSS3에서 새로 추가된 프로퍼티입니다. 이 프로퍼티가 가질 수 있는 값은 initial과 inherit를 제외하면 다음과 같이 두 가지가 있습니다. content-box 내용 영역을 기준으로 크기를 잡습니다. 즉, 바깥 여백(margin)과 외곽선(border)과 … 더 보기 “박스 크기의 기준을 정하는 CSS”
이 포스트는 HTML5에서 추가된 <ruby> … </ruby> 태그에 관한 내용입니다. 이 태그는 글 내용에 넣는 태그로, 글자 혹은 단어에 덧말을 붙이는 태그입니다. 한자문화권에서 한자 위에 독음을 작은 글씨로 써서 붙이는 경우가 있는데 바로 이러한 표현을 구현하는 태그입니다. 현재도 일본어에서는 한자를 음독과 훈독을 둘 다 하는 특성 때문에 한자 위에(세로쓰기는 한자의 오른쪽에) 히라가나 혹은 가타카나를 조그맣게 … 더 보기 “HTML5에서 추가된 유용한 태그 <ruby>”
이 포스트에서는 아파치 코르도바 프레임워크를 소개합니다. 코르도바 프레임워크는 Node.js 플랫폼을 기반으로 한 프레임워크로, 웹앱을 스마트폰 플랫폼으로 내보내서 하이브리드 앱으로 만드는 데 쓰입니다. 즉, NW.js 프레임워크 소개 포스트에서 소개한 NW.js와 비슷한 프레임워크입니다. NW.js와의 차이점은 NW.js의 경우 데스크톱용 하이브리드 앱을 만드는 데 쓰이는 반면 코르도바는 모바일용 하이브리드 앱을 만드는 데 쓰인다는 점입니다. 모바일용 하이브리드 앱을 만들기 위한 … 더 보기 “아파치 코르도바 프레임워크 소개”
자바 프로그램 실행 옵션 받기 포스트에서 실행 옵션을 받아 처리하는 자바 프로그램 예제를 포스팅하였습니다. 파이썬에서도 자바처럼 실행 옵션을 받아 처리하는 프로그램을 만들 수 있습니다. 다음 코드를 봅시다. #!/usr/bin/python3 import sys for i, str in enumerate(sys.argv): print(“%d: %s” % (i, str) ) 자바보다 코드가 짧고 간단해진 것을 볼 수 있을 것입니다. 여기서는 sys 모듈을 불러와서 sys.argv … 더 보기 “파이썬 프로그램 실행 옵션 받기”
다음과 같은 자바 코드가 있다고 가정을 해 봅시다. public class ArgsTest { public static void main(String[] args) { if ( args.length == 0 ) { System.out.println(“No arguments.”); } else { for ( int i = 0; i < args.length; i++ ) { System.out.format(“%d: %s\n”, i, args[i]); } } } } 이 코드를 보면 2번째 줄에서 … 더 보기 “자바 프로그램 실행 옵션 받기”
웹 페이지를 만들 때 스크롤이 가능하게 하면서도 스크롤바를 숨겨야 할 경우가 있습니다. 모바일 기기에서는 스크롤바가 평소에는 보이지 않다가 스크롤 중에 희미하게 보이지만 데스크톱에서는 오른쪽에 자리를 차지하고 있는데, 이 때 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 만들기”
