본문 바로가기

Tech-tips/iOS Theme Bible

iOS 테마 강좌 - Info.plist 파해치기(테마 폰트 스타일 적용)

iOS 테마 강좌 Info.plist 파해치기


윈터보드(Winterboard)를 이용하면 iOS전반에 적용되는 택스트 파일의 스타일을 지정할 수 있습니다. 이는 윈터보드 없이 구현 할수 없는 것으로, 윈터보드의 주요한 기능중 하나입니다. 이 기능은 테마폴더 안에 위치하는 Info.plist 라는 xml 문서로 설정이 가능한데, 문서는 xml이지만 내용물은 pure CSS이므로 초보자도 문제 없이 설정 할 수 있습니다.


info.plist의 기본적인 모습. 위에 헤더와 푸터부분이 있어야 인식이 됩니다. info.plist를 만들기 위해서는 예제로 첨부된 파일을 사용하세요.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">

<plist version="1.0">

<dict>

<key>BadgeStyle</key>

<string>color: #ffffff;

font-weight:100;

</string>

</dict>


Info.plist


Info.plist에서 스프링보드에 스타일을 적용하기 위해서 사용되는 프로그램 언어는 CSS입니다. 프로그램 언어중에서 가장 조팝이라고 불릴정도로 쉬운 언어이므로 겁먹지 마시고 간략하게 설명후 넘어가도록 하겠습니다.


여기서 CSS 이름의 뜻을 알고 넘어가면 다음의 설명이 약간 쉬워 질'수'도 있습니다. (아님말고)

CSS는 Cascading Style Sheet의 약자입니다. Cascade의 사전적의미는 '떨어져 내리는' 이라고 표기 되어있습니다. 즉 CSS는 위에서 부터 순차적으로 적용이 되는 언어이기 때문에 CSS라고 표기를 합니다. 그러니까 위에 특정 값을 설정 했더라도 맨아래에 다른 설정값을 쓰게 되면 그 요소를 따라가게 되어있습니다. 'CSS는 언제나 제일 마지막 값이 적용된다' 제일 중요한 것이므로 알아두시기 바랍니다.


Info.plist에서 사용되는 명령어의 구조는 다음과 같습니다.

<key>스타일이름</key>

<string>

스타일요소:속성,또는 수치;

</string>


스타일을 지정하는 이름은 반드시 <key>로 둘러 싸야합니다. 스타일 요소는 CSS와 입력방법이 동일한데, 스타일 요소는 복수로 설정이 가능하며, 한 스타일 요소의 설정이 끝나면 반드시 세미콜론(;)을 뒤에 작성하여 명령이 끝났음을 선언해야 합니다. 특정 스타일(box-shadow, text-shadow등)은 속성 조차도 복수로 지정할 수 있습니다.


스프링보드상에서 info.plist의 스타일 속성에 적용을 받는 요소는 다음과 같습니다.


  • info plist 속성

  • info plist 속성


DockedIconLabelStyle: 독에 있는 아이콘이름의 스타일을 설정하는 값

UndockedIconLabelStyle: 홈화면에 있는 아이콘의 스타일을 설정하는 값

TimeStyle: 상태바의 시계 스타일을 설정하는 값

OperatorNameStyle: 케리어 이름(이미지 케리어 제외)의 스타일을 설정하는 값

CalendarIconDateStyle: 캘린더에서 요일 부분 스타일을 지정하는 값

CalendarIconDayStyle: 캘린더에서 날짜 부분 스타일을 지정하는 값

BadgeStyle: 뱃지의 스타일을 지정하는 값

FontName- : 특정 폰트를 지정해서 바꿀 수 있음

FontName-.Lock Clock: 잠금화면 폰트 바꾸기

IconAlpha: 아이콘의 투명도를 설정


FontName 속성의 경우, <string>으로 둘러쌀때 CSS 명령어가 아니라 원하는 폰트의 이름을 적어주어야 합니다. 폰트 이름은 파일 자체의 이름이 아니라 시스템 폰트정보에서 나타나는 이름을 사용해야 합니다. 쓸수 있는 시스템 폰트에 대해서는 다음 포스팅을 참고하세요 - iOS 시스템 폰트 리스트


현재는 쓰이지 않는 명령어


ComposeStoreIcons - 아이콘 자동스킨을 차단하는 옵션. 현재는 사용되지 않음. iOS 3.x까지 사용됨.


CSS쌩기초용 간단 설명


색상 지정방법

CSS는 16진수 HEX코드나 rgb,또는 rgba를 지원합니다. HEX코드 같은 경우에는 #FF0000 같이 표기가 되며, 이것은 곧 Red와 같습니다. red나 blue 같이 일반적인 색상은 그냥 이름만 입력해도 자동으로 인식이 됩니다. 그렇지 않고 특수한 색상은 HEX 코드를 입력해줘야 합니다. rgb는 rgb(255,0,0) 이렇게 표기를 하면 red와 같습니다. 그래픽 프로그램에서 255가 최고 수치고 0이 최저수치로 나타내는 색상표기를 하면됩니다. rgba는 rgb에 alpha 속성이 추가 된것으로 rgb(255,0,0,1)은 red와 같습니다. 맨 마지막 수치는 1부터 0까지 있으며 0은 완전 투명입니다.


테두리 지정방법

테두리는 8개의 스타일을 지원합니다.

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.


dotted,dashed,soild,double,groove,ridge,inset,outset을 border 명령어 뒤의 속성에 지정을 해줘야 합니다.


사용할 수 있는 CSS 명령어


font-family: 해당요소의 폰트를 지정합니다. 폰트는 운영체제에 설치 되어있는 폰트만 사용 할수 있습니다. <시스템 폰트 리스트> 참고

font-weight: 폰트의 굵기를 설정함

background: 배경 색상이나 모양, 이미지 등을 설정합니다.

background-color: 배경색상

background-image: 배경이미지

background-repeat: 배경 반복 여부

background-position: 배경위치


border: 테두리를 설정합니다.

border-style: 테두리 스타일

border-width: 테두리 폭

border-style: 테두리 스타일

border-color: 테두리 색상


padding: 경계에서 안쪽의 여백을 설정합니다.

margin: 경계에서 바깥 쪽의 여백을 설정합니다.

opacity: 투명도를 설정합니다.

text-shadow: 글자에 그림자를 넣습니다. (복수의 값을 적용 가능)

color: 택스트 색상을 지정합니다.

text-align: 문단 정렬

text-decoration: 밑줄이나 점선, 취소선등을 설정함

text-transform: 대소문자중 어느것을 사용 할지 결정

text-indent: 들여쓰기

letter-spacing: 자간

line-height: 문단 높이

word-spacing: 단어 간격

font-style: 이텔릭, 두껍게 설정.

font-size: 글자 크기 설정

font-variant: 폰트 크기 변경없이 소문자를 대문자로 교체

outline: 요소에 외곽 선을 추가

-color

-style

-width


사용할 수 있는 CSS3 명령어


-webkit-border-image: 테두리에 이미지를 적용할수 있습니다. file;//로 시스템이미지 경로를 끌어올 수 있습니다.

box-shadow: 택스트를 둘러싼 부분에 그림자를 적용 합니다. (복수의 값을 적용 가능)

border-radius, -webkit-border-radius : 경계의 둥글기 정도를 설정합니다.

-webkit-linear-gradient: 그래디언트 색상 적용 (명령어 뒤에 prefix를 붙여서 함께 사용) 예시) background: -webkit-linear-gradient(red, blue);

-webkit-transform: 비틀기, 회전등등 해당 요소의 모양을 변형 시킬수 있음

-webkit-transition: 전환시에 효과 적용

-webkit-animation: 애니메이션 기능


사용할 수 있는 비표준 명령어


-webkit-mask-image: 특정 요소를 마스크로 사용 할수 있음


팁. font 속성을 이용해서 한번에 같이 적용 할수도 있습니다.


font:italic bold 12px/30px Georgia,serif;

→ 이텔릭 굵게 (폰트크기/문단 높이) 폰트 이름;


font-family 활용 방법

font-family 속성을 이용하면 영문폰트와 한글 폰트를 별도로 지정할 수 있습니다.

font-family: "영문폰트", 한글폰트; (영어에는 영문폰트만, 한글에는 한글 폰트만 적용 됩니다.)


재미로 쓰는 속성

direction:rtl;

unicode-bidi:bidi-override;

※글자를 거꾸로 뜨게 만듭니다. 예시) 톡오카카


※추후에 각 속성에 대한 예시를 올리도록하겠습니다.