Cherryopatra

[부산] 폴라렉스 뷔페 / 덕천 폴라렉스/부산뷔페

cherryOpatra — Wed, 22 Feb 2012 10:35:51 +0900

[부산] 폴라렉스 뷔페 / 덕천 폴라렉스/부산뷔페

부산 덕천에 위치한 폴라렉스 뷔페를 다녀왔습니다.
뉴코아 건물에 위치하는데 생각보다 넓고 깔끔했습니다.

저는 뷔페를 오면 조금씩 여러 종류의 음식을 담아서
맛보고 맛있는 것만 먹어서
한 접시에 엄청담았답니다^^

스테이크는 구워달라고 하면
즉석해서 구워줍니다. 주문 후 5분 후에 찾아가면 됩니다.
스테이크는 많이 익히면 질기니까 살짝 익혀달라고 하세요~

샐러드 소스도 종류가 많아서 입맛대로 고르시면 됩니다.
피자도 3종류 정도되고,
깨죽, 호박죽 등 죽도 많습니다.
스시류 종류도 생각보다 많았는데
저는 새우가 제일 맛있더라구요ㅎㅎ

장어 덮밥 맛은 그냥 so...so..
장어가 부드럽긴한데,
막 그렇게 맛있진 않았어요

이건 이름이 기억이 안나는데
식감이 쫄깃 했던걸로 기억납니다.
의외의 맛이었어요.

스파게티도 즉석해서 만들어줍니다.
넣고 싶은 재료를 접시에 담아주면 바로 만들어줍니다.
저는 개인적으로 크림을 좋아해서 크림스파게티만
먹다보니 토마토스파게티는 찍지 못했네요.

다른 종류는 많았는데 과일이 종류가 별로없었습니다.
그 중 파인애플이 맛있어서 파인애플만 먹었습니다.
설탕을 발랐는지 정말 달콤했습니다.

후식으로 빵종류가 많았지만
다른건 별로 끌리지 않고, 호두파이만 맛있어보여서
그것만 살포시 담았습니다.
하얀 요거트는 새콤하고 상큼해서 인기가 많아서. 재빨리 담았죠~
콘프러스트는 보장된 맛이니까 후식으로 조금씩 주워 먹을 겸 담았습니다.

아이스크림이 대박입니다~
그냥 먹어두 맛있고 퍼먹어도,
외관상은 별로였지만 아메리카노에 살짝 적셔먹어도
맛있었습니다.
굿굿~

이용요금이 평일 점심하고 저녁이 만원이나 차이가 나네요.
평일에 가려면 되도록 점심에 가는게 좋을 것 같습니다.
가격면과 음식의 질을 고려해봤을 때
저는 더파티 프리미엄이 좀 더 괜찮은 것 같네요.

이 날은 친구가 워킹홀리데이 때문에 싱카포르로
떠나기전 마지막으로 보는 날이었습니다.
더파티와 폴라렉스 중 고민하다가 폴라렉스로 왔는데,
나름 만족스러운 식사를 했습니다.

식사후
무사히 잘 갔다오라고 치즈케익을 준비해서 송별해주었습니다.
친구가 조심히 잘 다녀왔으면 좋겠네요
^^
"잘다녀와잉 "

[부산] 동래 오렌지 카운티

cherryOpatra — Fri, 17 Feb 2012 14:45:01 +0900

[부산] 동래 오렌지 카운티

부산 동래에 위치한
오렌지 카운티 를 다녀왔습니다.
동래 지하철 역에서 3~4분 거리에 위치해있습니다.

일층은 카페 & 대기실이 있었습니다.
2~3층에서 고기를 먹을 수 있는데
제가 갔을 때는 2층만 오픈되어 있었습니다.

전 디너타임에 가서 14,300이었는데
부가세 포함 15,730을 지불하였습니다.
이용 시간이 2시간인게 좀 아쉬웠습니다.

음식은 대부분 맛있는 편이었습니다.
롤도 괜찮고, 샐러드 소스가 좀 묽었지만
먹을만은 하더라구요.

채소는 신선했습니다.
상추와 깻잎말고도 각종 야채와 파겉절이가 준비되어 있었습니다.
제가 제일 좋아야는 무쌈도 있었어요.

단호박이랑 팽이버섯을 고기와 함께 계속 구워먹었어요^^
참기름 장이나 양념소슨느 묽어서 별로 맛이 느껴지진
않았습니다

고기중에는 불고기가 가장 맛있었습니다~
오리 양념은 아무맛이 느껴지지않아서..
양념에 무엇을 넣었길래 無맛이 나는지 궁금했습니다.

그래도 생각보다는 괜찮았습니다.
기대를 너무 안하고가서 그런가??
다음에는 가서 기억해 둔 맛있는 것만 골라서 먹어야겠습니다.
한번쯤은 가봐도 좋은 곳 같습니다.

[음악재생] 음악파일 조작/addEventListener()

cherryOpatra — Mon, 13 Feb 2012 16:22:25 +0900

[음악재생] 음악파일 조작/addEventListener()

HTML5에는 음악 파일을 재생할 수 있는 <audio> 태크가 추가되었습니다.
형식은 다음과 같습니다.

<audio
   src="재생할 파일"
   preload="자동으로 읽어 들일지 여부(auto/metadata/none)"
   autoplay="자동 재생 여부"
   loop="반복 여부"
   controls="플레이어 표시 여부"
>
   audio 태그를 지원하지 않을 때 표시할 내용
</audio>

iPad 및 iPhone(iOS 4이상)에서 실행하면 플레이어가 표시되며, 재생 버튼 누르면 음악이 재생됩니다.
하지만 iPhone OS 3.x 이하 버전에서는 먼저 플레이어가 실행된 후 바로 재생을 시작합니다.

Android 1.6dms < audio > 태그를 지원하지 않기 때문에 MP3 파일을 다운로드하는 링크가 표시됩니다.

자바스트립트로도 음악 파일을 처리할 수 있습니다.

먼저 아래와 같은 형식으로 음악파일을 읽어 들여야합니다.

var audio = new Audio("test.mp3");

[재생], [정지], [처음부터] 버튼을 클릭 시 Audio 객체를 조작하도록 하기 위해 <input> 태그의 onclick 이벤트에 자바스크립트 코드를 직접 입력합니다.
[처음부터] 버튼 클릭 시에는 currentTime 속성을 '0'으로 설정하여 처음부터 재생 기능을 구현합니다.

재생 위치를 감시하기 위해 addEventListener() 메서드로 timeupdate 이벤트를 감시하도록 합니다.
이때, 현재 재생중인 위치는 currentTime 속성으로, 음악 파일의 총 재생 시간은 duration 속성으로 확인할 수 있습니다.

audio.addEventListener("timeupdate",function(e){
$("info").innerHTML=audio.currentTime + "/" + audio.duration;
});

소리 조절을 volume 속성을 이용합니다.

function changeVolume(v){
   var new_v=audio.volume+v;
   if (0 <=new_v && new_v <= 1.0){
      audio.volume = new_v;
   }
}

Android 1.6에서는 재생할 수 없지만 Android 2.x나 iPhone/iPad에서는 원하는 타이밍에 음악을 출력할 수 있습니다.
적절하게 잘 활용해 사용해보세요.

[그래픽 처리] 반사/box-reflect

cherryOpatra — Mon, 13 Feb 2012 15:00:56 +0900

box-reflect 속성을 이용해 반사효과를 주거나, 그림 혹은 글자를 반전 시키겠습니다.

-webkit-box-reflect:위치[거리px -webkit-gradient()];

box-reflect 속성의 '위치'에 지정할 수 있는 값

값

의미

above	위
below	아래
left	왼쪽
right	오른쪽

위치, 거리와 더불어 그라데이션 요소를 지정하는 -webkit-gradient() 메서드를 추가할 수 있습니다.
이것을 지정하면 반전한 그림이나 글자에 그라데이션 효과가 적용됩니다.

그림자의 위치는 아래로 하고 8px 거리로 반사효과가 나타납니다.
위에서 아래로 그라데이션이 나타납니다.

[그래픽 효과] 그라데이션(gradient)/color-stop()

cherryOpatra — Mon, 13 Feb 2012 12:25:21 +0900

[그래픽 효과] 그라데이션(gradient)/color-stop()

그라데이션에 대해 앞에서도 다룬적이 있지만 여기서 다른 방식으로 한번더 다루어 보도록 하겠습니다.
CSS3에서 그라데이션 사각형을 만드려면 background 속성(혹은 background-image 속성)에 gradient() 메서드로 값을 지정합니다.

-webkit-gradient(
linear,
시작위치, 종료위치
from(처음색), to(마지막 색));

시작 위치와 종료 위치는 top, bottom, left, right를 조합하여 지정합니다.
아래 코드는 왼쪽 위에서 오른쪽 아래로 그라데이션을 적용 시 코드조합입니다.

.box1{
     background:
        -webkit-gradient(linear,
             left top,
             right bottom,
             from(red), to(white));
}

만약 위에서 아래로 그라데이션을 적용하려면 left top과 left bottom을 지정하면 됩니다.

color-stop() 메서드를 이용해 색을 지정해보겠습니다.

color-stop(위치, 색)

'위치'는 그라데이션 색을 0~1 사이의 어디에 배치할지를 지정합니다.

[그래픽 처리] 둥근 모서리/border-radius

cherryOpatra — Mon, 13 Feb 2012 11:53:02 +0900

[그래픽 처리] 둥근 모서리/border-radius

이전에는 사각형의 모서리를 둥글게 하기 위해서 그림파일을 이용할 수 밖에 없었습니다.
하지만 CSS3에서는 border-radius 속성 값을 지정하는 것만으로도 구현할 수 있습니다.
형태는 아래와 같습니다.

-webkit-border-radius : 15px;

위의 코드를 실행하면 사각형의 모서리가 둥그렇게 바뀝니다.
'box1'은 그냥 빨간 사각형을 둥글게하였습니다.
'box2'는 둥근 모서리 효과를 주고 그라데이션까지 주었습니다.
그라데이션 효과는 다음 파트에서 좀더 자세히 다루겠습니다.
'box3'도 똑같이 둥근 모서리 효과를 주었습니다. 그리고 그림자를 추가하였네요.

[그래픽 처리] CSS3 애니메이션/HTML5 애니메이션/animation-timing-function

cherryOpatra — Mon, 13 Feb 2012 11:32:58 +0900

[그래픽 처리] CSS3 애니메이션/HTML5 애니메이션/animation-timing-function

CSS3는 애니메이션 기능을 제공합니다.
속성 지정만으로도 간단하게 애니메이션을 구현할 수 있습니다.

● 애니메이션 관련 속성

속성

의미

animation-duration	애니메이션의 동작 시간 (ex) '1s', '0.5s'
animation-iteration-count	애니메이션의 동작 회수('infinite' 지정시 무한 반복)
animation-name	애니메이션의 이름
animation-timing-function	애니메이션의 타이밍

● animation-timing-function 속성에 지정할 수 있는 값

속성

의미

ease	시작과 종료를 부드럽게
linear	일정
ease-in	서서히 시작
ease-out	서서히 종료
ease-in-out	서서히 시작하여 서서히 종료
cubic-bezier(x1,y1,x2,y2)	3차 베지에 곡선의 P1과 P2를 (x1,y1,x2,y2)로 지정

애니메이션을 사용하기 위해선 애니메이션 정의를 해주어야합니다.
이를 @keyframes 라고 합니다.

  @-webkit-keyframes 'anime1' {
        0% { -webkit-transform : rotate (0deg); }
        50% { -webkit-transform : rotate (90deg); }
        100% { -webkit-transform : rotate (0deg); }
  }

애니메이션 동작 정도에 따라 회전각도를 지정해 줍니다.
위의 코드상으론 50% 동작시 90도 회전해 있을 것입니다.

애니메이션을 지정하는 방법은 다음과 같습니다.

div.anim {
     -webkit-animation-name: 'anime1';
      -webkit-animation-duration: 2s;
      -webkit-animation-timing-function: ease;
      -webkit-animation-iteration-count : infinite;
}

아래의 코드를 실행해본 결과 특수문자 '♥'와 '↑'가 시계방향으로 90도 회전하다가 다시 제자리로 돌아왔습니다.
속성 지정결과 부드럽게 무한으로 10초간 동작합니다.

[그래픽 처리] CSS3/글자 그림자/그림 그림자/box-shadow/text-shadow/변형

cherryOpatra — Mon, 13 Feb 2012 10:43:14 +0900

[그래픽 처리] CSS3/글자 그림자/그림 그림자/box-shadow/text-shadow/변형

CSS3를 통해 글자와 그림에 그림자, 반투명, 회전, 애니메이션 등의 다양한 효과를 넣을 수 있습니다.

[1] 그림자

box-shadow 속성을 이용하면 블록 요소에 그림자를 추가할 수 있습니다.
'-webkit-' : iPhone/iPad/Android용 표준 브라우저의 렌더링 엔진에서 동작하고자 할 때 사용
'-moz-' : Firefox에서 동작하고 싶을 때 사용

-webkit-box-shadow:[inset](X방향)(Y방향)(번짐효과) #(그림자의 색);

첫 번째 인수인 'insert'생략이 가능한데, 지정하게 되면 그림자를 블록의 안쪽에 렌더링할 수 있습니다.

'insert' 다음에는 X방향 거리(수평 오프셋), Y방향 거리(수직 오프셋), 번짐 효과(blur), 그림자 색을 지정합니다.
아래의 코드는 <div> 태그로 지정한 블록에 그림자를 추가한 프로그램입니다.
'sbox' 배경색을 'orange'로 지정하였습니다.
'#CC9999'색으로 X,Y 방향 5px shadow를 주고 10px blur 효과를 주었습니다

만약 글자에 그림자를 추가하려면 text-shadow 속성을 이용합니다.
box-shadow와 비슷한데, text-shadow는 ' -webkit-'를 지정하지 않하도 됩니다.

box-shadow 속성은 그림파일에도 그림자를 추가할 수 있습니다.
아래 코드는 그림 파일에 흰색 테두리를 지정해 주었고 연두색 그림자를 추가하는 프로그램입니다.

[2] 변형

CSS3의 transform 속성을 이용하면 그림이나 글자의 각 요소를 손쉽게 변형시킬 수 있습니다.

-webkit-transform: 조작

transform 속성에 지정할 수 있는 조작

형식

의미

rotate(deg)	회전 (단위는 deg로 각도 지정, 10deg혹은 -10deg등)
scale(sx[,sy])	X축[,Y축]으로 확대/축소(단위는 배율. 1혹은 0.5 등)
skew(ax[,ay]	X축[,Y축]으로 비틀기(단위는 deg로 각도를 지정)
translate(x[,y])	X축[,Y축]으로 이동(단위는 px)
matrix(a,c,b,d,tx,ty)	변형 행렬로 조작을 지정

다음 코드는 그림 파일에 그림자를 추가하고 회전시키는 프로그램입니다.
rotate(deg) 를 사용하였습니다.

이와 같이 그래픽 처리를 통해 그림자와 글자에 그림자를 넣고 변형까지 자유롭게할 수 있습니다.
이 외에도 CSS3에는 애니메이션 기능이 있으므로 이 기능에 대해서도 다음에 알아보도록 하겠습니다.

[그래픽 처리] 애니메이션/setInterval()

cherryOpatra — Fri, 10 Feb 2012 16:41:57 +0900

[1] 공 튀기기 애니메이션

공이 캔버스의 모서리에 도달하면 반대 방향으로 움직이는 애니메이션 입니다.

setInterval() 메서드를 이용하여 100일리초(msec)마다 drawBall() 함수를 호출하도록합니다.

setInterval(drawBall, 100);

그리고 drawBall() 함수에서 화면을 초기화한 후 공을 렌더링합니다.
렌더링 처리에서는 우선 fillRect() 메서드로 캔버스의 배경을 흰색으로 한 후 arc() 메서드로 빨간 공을 렌더링합니다.

공의 이동은 dir_x/dir_y(공의 이동양과 방향을 지정하는 속성)만큼 공의 좌표를 증가시켜서 구현하는데, 이동 후의 좌표가 캔버스를 벗어날 경우에는 dir_x/dir_y에 '-1'을 곱하여 반대로 이동 시킵니다.

   ball.x += ball.dir_x;
   ball.y += ball.dir_y;
   if (ball.x < 0 || ball.x > 300) {ball.dir_x*= -1;}
   if (ball.y < 0 || ball.y > 300) {ball.dir_y*= -1;}

[2] 변형과 반투명 효과를 사용한 애니메이션

투명도를 지정하는 globalAlpha 값을 조절하여 하나의 막대만 반투명하게 렌더링합니다.
anim() 함수가 호출될 때마다 변수 ci 값이 1씩 증가하여,
이 변수의 값에 따라 하나의 막대만 진하게 렌더링하게 되어 결과적으로 막대가 회전하는 것 처럼 보입니다.

[그래픽 처리] 변형 행렬의 저장과 복구/회전/save()/restore()/rotate()

cherryOpatra — Fri, 10 Feb 2012 14:34:33 +0900

[그래픽 처리] 변형 행렬의 저장과 복구

[1] save(), restore()

save()메서드와 restore()메서드의 형식은 다음과 같습니다.

context.save()

context.restore()

이 메서드들은 모두 스택(stack) 구조를 이용하고 있기 때문에 원하는 곳에서 원하는 횟수만큼 이용할 수 있습니다.
스택을 탑에 비유를 해보면, save() 메서드로 벽돌을 쌓고 restore() 메서드로 벽돌을 꺼내는 것에 해당합니다.

save(), restore() 메서드로 저장/복구되는 정보는 다음과 같습니다.

● 변형 행렬
● 렌더링 스타일
● 현재의 패스

[2] rotate()

rotate() 메서드는 도형을 회전시키는데, 아래의 형식을 가지고 있습니다.

context.rotate(angle)

인수로 지정하는 angle은 각도를 나타내는데, 단위를 '라디안'으로 나타낸다.
각도를 라디안으로 변환하는 계산식은 다음과 같다.

var rad=deg*Math*PI/180;

먼저 빨간 사각형을 먼저 렌더링한다.
행렬의 상태를 저장하고 이동 및 45도 회전을 지정하여 파란 사각형을 렌더링한다.
렌더링 후 행렬의 상태를 복구하여 90도 회전시킨 초록 사각형을 렌더링한다.