BLOG main image
분류 전체보기 (50)
아이폰 개발 이야기 (12)
스마트폰용 홈페이지 (3)
웹표준 개발 (8)
HTML5 (2)
Objective-C (2)
뉴미디어 기획 이야기 (10)
뉴미디어 뉴스 (12)
81,453 Visitors up to today!
Today 80 hit, Yesterday 88 hit
'2010/06'에 해당되는 글 5건
2010/06/29 10:56

아이폰 어플중에서 지도에 자기 좌표가 찍히고 주소가 나오는 어플들을 많이들 보셨을 텐데요.
오늘은 좌표값과 주소 구하는 방법에 대해서 알아보겠습니다.

이 기능은 참 많은 어플들을 통해서 활용이 가능할 것 같습니다. 
우선 작업목표를 정해보았습니다.

<좌표값으로 현재 주소를 검색하는 어플을 만들기 위한 순서>
1. 새 프로젝트 (Window-based Application)를 생성한다.
2. 새 프로젝트에 뷰를 하나 추가한다.
3. 추가한 뷰에 검색된 결과를 보여줄 화면(Label,Button등등)을 구성한다.
3. 현재 좌표값을 구한다.
4. 구해진 좌표값을 화면에 뿌린다.
5. 구해진 좌표값에 해당하는 주소를 구글맵에서 받아온다.
6. 받아온 결과를 화면에 뿌려준다.

막상 써 놓으니 음... 생각보단 간단하네요~!!
자~~ 이제 목표는 정해졌으니 하나씩 해보면 됩니다.ㅋ

이제 작업목표에서 정한 순서로  진행과정을 살펴보겠습니다..

시작해 볼까요~

1. 새 프로젝트를 생성합니다.
XCode에서 File->New Project->Window-based Application을 클릭하세요.
(아시는 분들도 많겠지만 혹시 모르는 분도 있을까 해서 아래 이미지 참조)



2. 새 프로젝트를 윈도우 베이스로 만들었지만 뭔가 보여줄 화면이 필요합니다.
화면용 파일을 하나 프로젝트에 추가합니다.
XCode화면의 Groups&Files 영역에서 마우스 오른쪽 클릭해서 Add->New File을 합니다.



3. 이제 화면도 만들었습니다.
Command+R 키로 그냥 한번 실행해봅니다. 아무것도 없습니다..
화면에 뭔가 만들어주어야 합니다. 다른 것을 사용해도 되겠지만 이번 작업에서는 단순하게 Label로 모두 처리하도록 합니다.

아래화면 참고해서 같이 만들어보죠.



참고로 화면에 구성된 Label들은 소스파일의 IBOutlet로 선언된 변수들과 연결해주어야 합니다.

4. Label과 아웃렛과의 연결 하셨다면 이제 좌표값을 구해보겠습니다.
좌표값을 구하기 위해서는 CoreLocation.framework을 현재 프로젝트에 추가해주어야 합니다.
추가했나요? 이젠 좌표구하는 부분 소스를 보겠습니다.

=============================================================================================

/*
viewDidLoad  이벤트에 CLLocationManager를 생성해서 실행줍니다.
그러면  #pragma mark - 이하 부분이 자동적으로 실행됩니다.
핵심 소스가 여기입니다.
*/

- (void)viewDidLoad {
 self.locationManager = [[CLLocationManager alloc] init];
 [locationManager startUpdatingLocation];
 locationManager.delegate = self;
 locationManager.distanceFilter = kCLDistanceFilterNone;
 locationManager.desiredAccuracy = kCLLocationAccuracyBest;
}

#pragma mark -
#pragma mark CLLocationManagerDelegate Methods
- (void)locationManager:(CLLocationManager *)manager didUpdateToLocation:(CLLocation *)newLocation fromLocation:(CLLocation *)oldLocation {
 
 if (startingPoint == nil)
  self.startingPoint = newLocation;
 
 NSString *latitudeString = [[NSString alloc] initWithFormat:@"위도 : %g°", newLocation.coordinate.latitude];
 latitudeLabel.text = latitudeString;
 [latitudeString release];
 
 NSString *longitudeString = [[NSString alloc] initWithFormat:@"경도 : %g°", newLocation.coordinate.longitude];
 longitudeLabel.text = longitudeString;
 [longitudeString release];

}

- (void)locationManager:(CLLocationManager *)manager didFailWithError:(NSError *)error {
 
 NSString *errorType = (error.code == kCLErrorDenied) ? @"Access Denied" : @"Unknown Error";
 UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Error gettingg location from Core Location" message:errorType delegate:nil cancelButtonTitle:@"Okay" otherButtonTitles:nil];
 [alert show];
 [alert release];
 
}
==============================================================================================


 
5. 좌표값을 받아서 구글맵에서 주소를 조회하는 부분을 보겠습니다.
1) 구글맵에 주소 조회 쿼리를 보내서 결과(XML)를 받아오는 기능을 구현합니다.
2) 받아온 결과(XML)을 파싱하는 기능을 구현합니다.

위에 1), 2)는 유기적으로 함께 구동됩니다.

==================구글맵에 주소 조회 쿼리 보내기=========================

-(IBAction)loadXMLData{
 self.xmlUrl = @"
http://maps.google.com/maps/api/geocode/xml?latlng=37.630478,127.090199&language=kr&sensor=true";
 xmlConnection = [[NSURLConnection alloc]
      initWithRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:xmlUrl]]
      delegate:self];
 
 if (xmlConnection == nil)
  NSLog(@"Connect error");
 else
  [UIApplication sharedApplication].networkActivityIndicatorVisible = YES;
 
 xmlParseData = [[NSMutableArray alloc] init];
 xmlValue = [[NSMutableString alloc] init];
 currectItem = [[NSMutableDictionary alloc] init];
 receiveData = [[NSMutableData alloc] init];
}

#pragma mark URLConnection delegate methods

- (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response {
 NSLog(@"Receive: %@, %@, %d",
    [response URL],
    [response MIMEType],
    [response expectedContentLength]);
}

- (void)connection:(NSURLConnection *)connection didFailWithError:(NSError *)error {
 NSLog(@"%@", [error localizedDescription]);
 [UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
}

- (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data {
 //NSString *str = [[NSString alloc] initWithData:data encoding:0x80000000 + kCFStringEncodingDOSKorean];
    //NSData *data1 = [str dataUsingEncoding:NSUTF8StringEncoding];

 [receiveData appendData:data];
}

- (void)connectionDidFinishLoading:(NSURLConnection *)connection {
 
 //NSString *str = [[NSString alloc] initWithData:receiveData encoding:0x80000000 + kCFStringEncodingDOSKorean];
    //NSData *data = [str dataUsingEncoding:NSUTF8StringEncoding];
 //NSXMLParser *parser = [[NSXMLParser alloc] initWithData:data];

 NSXMLParser *parser = [[NSXMLParser alloc] initWithData:receiveData];

    [parser setDelegate:self];
 
    [parser parse];
 
 
 [parser release];
 
 [[UIApplication sharedApplication] setNetworkActivityIndicatorVisible:NO];
 
 [xmlConnection release];
 [receiveData release];
}


================================조회 결과 XML을 파싱하여 화면에 보여주기================================

#pragma mark XMLParse delegate methods
//#pragma mark NSXMLParser delegate methods

- (void)parserDidEndDocument:(NSXMLParser *)parser {
 self.clickBtn;
}

- (void)parser:(NSXMLParser *)parser didStartElement:(NSString *)elementName namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName attributes:(NSDictionary *)attributeDict {
 if ([elementName isEqualToString:@"address_component"])
  elementType = etItem;

 [xmlValue setString:@""];
}

- (void)parser:(NSXMLParser *)parser didEndElement:(NSString *)elementName namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName {
 
 if (elementType != etItem)
  return;
 
 if ([elementName isEqualToString:@"long_name"]) {
  [currectItem setValue:[NSString stringWithString:xmlValue] forKey:elementName]; 
 } else if ([elementName isEqualToString:@"short_name"]) {
  [currectItem setValue:[NSString stringWithString:xmlValue] forKey:elementName];
 
 } else if ([elementName isEqualToString:@"address_component"]) {
  [xmlParseData addObject:[NSDictionary dictionaryWithDictionary:currectItem]];
 }
}

- (void)parser:(NSXMLParser *)parser foundCharacters:(NSString *)string {
 if (elementType == etItem) {
  [xmlValue appendString:string];
 }
}

좀 부족했지만 위 설명을 잘 수행한다면 다음과 같은 화면이 나오게 됩니다...(제가 사는곳입니다. ㅎㅎㅎ)



부족한 부분은 첨부된 소스 보면 이해가 될겁니다. 파일첨부합니다~!! 화이팅하세요~




 

 

저작자 표시 비영리 동일 조건 변경 허락
Trackback Address :: http://web2log.com/trackback/56 관련글 쓰기
angellake | 2010/07/27 01:32 | PERMALINK | EDIT/DEL | REPLY
감사합니다. 많은 도움이 되었구요....만약 반대로 주소값으로 좌표를 구하려면 어떻게 해야되나요??
현재 위치가 아닌 특정지역의 주소명을 가지고 반대로 좌표값을 구하는 방법이 있으면 좀 가르쳐 주세용~~
심정우 | 2010/07/28 00:43 | PERMALINK | EDIT/DEL | REPLY
특정 주소지에 대한 좌표값을 구하는 것은 역으로 생각하시면 됩니다.
좌표값을 보내서 주소를 받아왔던 것처럼 주소를 보내서 좌표를 받아오는 것이지요..^^
개념적으로는 같구요.. 단지 주소를 받아서 좌표를 리턴해주는 (구글,네이버,다음 등등) 서비스를 하는 곳에다가
원하는 주소값을 보내서 리턴받으시면 됩니다.. 소스가 오히려 더 많이 공유되고 있더라구요..^^
angellake | 2010/07/28 16:27 | PERMALINK | EDIT/DEL | REPLY
네~ 감사합니다...그러면 구글에서는 그런 서비스를 안해주고 구글 네이버 다음등의 api에서 하는건가요??
심정우 | 2010/07/28 23:27 | PERMALINK | EDIT/DEL | REPLY
구글에서 가능한걸로 알고 있지만 저도 테스트는 못해봤습니다..
그래서 한번 검색해봤는데.. 어떤 분이 잘 설명을 해두셨네요... 물론 XCode로 구현한 것은 아니고 PHP로 하셨네요..
참고하시면 좋을듯 싶습니다..

http://blog.naver.com/songws72?Redirect=Log&logNo=50077099849

^^ 별거아닌 포스트에 관심주시니 감사합니다.. 저도 아는게 짧아서 답변이 좀 어설픈 점 양해부탁드립니다..
우와 | 2010/08/03 04:24 | PERMALINK | EDIT/DEL | REPLY
멋져요~~ 퍼가고 싶은데 어떻게 퍼가는지 몰라서 즐겨찾기 등록해둘께요

삭제하지마세요 자주 놀러올께요
acid | 2010/09/08 21:07 | PERMALINK | EDIT/DEL | REPLY
http://maps.google.com/maps/api/geocode/xml?latlng=37.630478,127.090199&language=kr&sensor=true

이 주소에서 보여지는 xml 데이터는 저는 영어로 뜨는데...어떻게 한글로 받아오신건지 궁금합니다..ㅠㅠ

url에서도 보여지다시피 language=kr 이란 부분이 있긴 하나 ...저는 영어로 보입니다...ㅠㅠ
| 2010/11/10 11:31 | PERMALINK | EDIT/DEL | REPLY
비밀댓글입니다
Name
Password
Homepage
Secret
2010/06/25 15:32


요즘 잘나가는 앱들을 살펴보면  이쁜 배경에 이쁜 버튼 ..
정말 우리 나라 사람들은 디자인을 참 중요히 여기는 것 같습니다.

저만 해도 같은 기능이라도 기본 베이직 스킨보다는 이쁜 배경을 가진 앱을 더 선호하게 되더라고요.

그래서 오늘은
Tab Bar 를 커스텀 구현하는 내용을 포스팅 하도록 하겠습니다.
제가 지금 부터 하는 커스텀은 약간의 뺑기(?) 라고 할수 있어요. 눈 속임이랄까, 정말 탭바 버튼 하나하나에 커스텀을 하는게 아니고 배경 자체를 덮어서  오른쪽 클릭하면 배경 탭바이미지1를 보여주게하고  왼쪽 클릭하면 2 배경탭바 이미지를 보여주게하는 내용입니다.

탭바 전체를 덮어야하기 때문에 아래 와 같은 이미지 2개가 필요합니다. (버튼이 늘어날수록 물론 이미지는 더 필요하겠죠?


사용자 삽입 이미지

별로 어렵지 않습니다. 후다닥 만들어 보겠습니다.
프로젝트 새로 선택하셔서  Tab Bar Application 선택해서 적당한 프로젝트 명으로  만들어주세요. 저는 TabBar 라고 만들었어요.
그리고 탭바 배경이미지가 될 2개의 이미지를 리소스 폴더에 넣어주시고요.  ( 이미지는 소스파일 참고하세요 )

사용자 삽입 이미지


그리고 소스에 아래와 같이 프로그래밍 해주세요 . 설명 참고하시면 이해 가실거예요.

TabBarAppDelegate.h


#import <UIKit/UIKit.h>

@interface TabBarAppDelegate : NSObject <UIApplicationDelegate, UITabBarControllerDelegate> {
    UIWindow *window;
    UITabBarController *tabBarController;
    UIView *tabBarBg;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UITabBarController *tabBarController;
@property (nonatomic, retain) IBOutlet UIView *tabBarBg;

@end


TabBarAppDelegate.m


#import "TabBarAppDelegate.h"

@interface UITabBarController (private)   
- (UITabBar *)tabBar;

@end


@implementation TabBarAppDelegate

@synthesize window;
@synthesize tabBarController;
@synthesize tabBarBg;


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {   
   
 CGRect frame = CGRectMake(0, 0, 480, 49);  //탭바 아래쪽 위치 좌표

 tabBarBg = [[UIView  alloc] initWithFrame:frame]; 
 UIImage *tabBarBackgroundImage = [UIImage imageNamed:@"MENU1.png"];   //이미지를 변수에 저장

 UIColor *color = [[UIColor alloc] initWithPatternImage:tabBarBackgroundImage];  //변수에 저장된 이미지를 UIColor 형 타입으로 저장
 
 [tabBarBg setBackgroundColor:color];   //위에서 선언인 UIView 에다 이미지를 올리기
 [color release];
 [[tabBarController tabBar ] insertSubview:tabBarBg atIndex:0];   //탭바 atIndex 0번째에  위에 이미지 올린 UIView 집어넣음

     // Add the tab bar controller's current view as a subview of the window
    [window addSubview:tabBarController.view];
    [window makeKeyAndVisible];

 return YES;
}

// 탭바 선택할 때 호출되는 곳  (이 이벤트를 쓰기 위해서는 탭바를 delegate 로 지정해야해요 이건 아래쪽에 그림과 함께 설명해드릴게요)
- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController {
 
 NSInteger tabIndex = tabBarController.selectedIndex;  //현재선택된 탭바 index를  인트형 변수에 할당
 

 if (tabIndex == 0) {   //0번째 탭이 선택되면  이미지 를 MENU1.png로 변경

  UIImage *tabBarBackgroundImage = [UIImage imageNamed:@"MENU1.png"];
 
  UIColor *color = [[UIColor alloc] initWithPatternImage:tabBarBackgroundImage];
 
  [tabBarBg setBackgroundColor:color];
  [color release];
  [tabBarBackgroundImage release];
 


 }else { //그 외 선택되면  이미지 를 MENU2.png로 변경
  UIImage *tabBarBackgroundImage = [UIImage imageNamed:@"MENU2.png"];
 
  UIColor *color = [[UIColor alloc] initWithPatternImage:tabBarBackgroundImage];
 
  [tabBarBg setBackgroundColor:color];
  [color release];
  [tabBarBackgroundImage release];
 
 }

 }

- (void)dealloc {
    [tabBarController release];
 [tabBarBg release];
    [window release];
    [super dealloc];
}

@end

소스 자체는 어렵지 않죠? ^^
근데 소스 중간에 설명했듯이 didSelectViewController 이 이벤트를 사용할려면 tabBar가 gelegate로 지정되어 있어야 쓸수 있어습니다. 아래 와 같이  연결해주면 tabbar 가 gelegate로 지정이 됩니다.


사용자 삽입 이미지


그럼 실행해 볼까요?

사용자 삽입 이미지


참 쉽죠잉~~

소스파일 첨부합니다 ^^


저작자 표시 비영리 동일 조건 변경 허락
Trackback Address :: http://web2log.com/trackback/55 관련글 쓰기
Tracked from SuNoo.net | 2011/10/17 14:18 | DEL
여차저차 하여, 텝바 App 구현 하는 방법은 습득했다. 그러나.. 그렇게 하고 나면... 기본적으로 검은 배경에 흰 아이콘, 선택시 파란색으로 나타나기에, 너무 네이티브하게 제공된 느낌이 강해..
ryu | 2010/07/02 22:59 | PERMALINK | EDIT/DEL | REPLY
정말 쉽고 친절하게 설명 해주셔서 너무 감사합니다~!!
web2log | 2010/07/05 10:44 | PERMALINK | EDIT/DEL
도움이 되셨다니 다행입니다. 방문 감사드립니다.
박세진 | 2010/08/03 20:09 | PERMALINK | EDIT/DEL | REPLY
이야 예전에 구글링 할때는 외국사이트 밖에 없었는데

이렇게 좋은 한글 사이트가 있네요.

친절한 설명 감사합니다.
web2log | 2010/08/20 15:54 | PERMALINK | EDIT/DEL
방문 감사드립니다.
항해사 | 2010/08/18 18:10 | PERMALINK | EDIT/DEL | REPLY
좋은 정보 감사합니다 .

구현을 해 보았는데 메뉴를 3-4번 정도 바꾸면 어플이 죽어 버리는 현상이 발생 하더군요
혹시 그런 경험은 없으신지요 ?
해준아빠 | 2010/08/30 10:10 | PERMALINK | EDIT/DEL | REPLY
좋은 내용 감사합니다.
.zip 파일 받아서, 실행해 (ios4) 버튼 몇번 클릭하면

#18 0x0000240c in -[TabBarAppDelegate tabBarController:didSelectViewController:] (self=0x115890, _cmd=0x332eafc0, tabBarController=0x13f150, viewController=0x13f310) at /Users/YoungHoShin/Downloads/TabBar/Classes/TabBarAppDelegate.m:56
56 [tabBarBg setBackgroundColor:color];

이부분에서 죽었습니다.
저도 확인해 보겠지만. 우선 올려 봅니다.
이방인 | 2010/09/05 14:35 | PERMALINK | EDIT/DEL | REPLY
죽는 이유는 간단합니다.
메모리 문제 입니다.

코드 2줄만 제거 하면 됩니다.
기본적인 메모리 관리를 못한 것입니다.
ds1adr | 2010/11/21 16:17 | PERMALINK | EDIT/DEL | REPLY
앗 대박... ㅠ.ㅠ 몰라서 탭바를 흉내내서 탭바처럼 구현하곤 했었는데... ㅠ.ㅠ
감사합니다...

아. 그리고 죽는다는 분들은
[tabBarBackgroundImage release]; 만 제거 하시면 될 겁니다. ^^
alloc -> init로 생성한게 아니라서요. ^^
진s | 2011/02/09 19:03 | PERMALINK | EDIT/DEL | REPLY
감사합니다~ ㅎ_ㅎ.. 이 소스를 참고로 탭바 말고 버튼을 통한 것도 해봐야겠네요 ㅇ_ㅇ~
overthe | 2011/03/08 03:34 | PERMALINK | EDIT/DEL | REPLY
커스텀 탭바의 경우 private 함수를 이용해서 구현하면 리젝을 당한다고 하던데.... 위의 예제는 괜찮은지요.
호리에상 | 2011/10/13 11:55 | PERMALINK | EDIT/DEL | REPLY
위의 내용처럼 값을 처리 했는데
핑크색 위에 회색이 덧 씌어져 나오네요.....
회색부분은 탭바의 클릭시 나오는 화면인거 같습니다.
Denny | 2011/10/17 13:56 | PERMALINK | EDIT/DEL | REPLY
우와~! 찾고 있던 예제입니다^^ 퍼가욤!!ㅋ
Name
Password
Homepage
Secret
2010/06/16 09:53

매쉬업 서비스(mash up)를 만들어 보기에 적합한 환경이 갖춰지고 있습니다.
'mash-up'이라는 건 쉽게 말해 타사 서비스의 오픈된 프로그램 소스(API)를 이용해 새로운 짬뽕 서비스를 만드는 것을 말합니다.

예를들어 구글 지도 소스(API)를 이용해 특정 위치에다 사용자가 맛집 표시를 할 수 있게 하면서 그걸 자기 트위터로도 날릴 수 있게 하는, 뭐 그런 서비스를 구글이 아닌 제 3의 회사가 만드는 것이죠. 이러한 회사를 '써드파티(Third party)'라고도 합니다.

                                     <트위터 서드파티들의 생태계입니다. 30만개가 넘는다고합니다>

2005년과 2006년에 걸쳐 개방과 공유의 정신을 기본으로 하는 웹2.0 서비스의 '개념'이 한국을 강타했었는데, 매쉬업은 그 당시 구글맵을 위주로한 소수 사례 형태로 제시되었습니다.

국내에선 그 이후로 포탈을 중심으로 매쉬업 서비스들을 장려하고자 다양한 행사나 대회들을 시작했고 현재까지 진행해 오고 있습니다. 그런데 사실 영 신통찮았던 것이 사실입니다. 이거 기획해 보려고 해도 마땅찮고 개발해 놓은 작품들을 봐도 그랬습니다.

자체 활용도도 낮은 다른 포털 서비스의 API를 연동한다고 하는 거... 자체가 뭔가 갑갑한 일입니다. 웹2.0 서비스라는 것은 결국 사용자가 많아서 쌓이게된 '정보'가 가치있게 되는 어느 임계점을 넘어야 의미가 있는데 API이용이 가능한 중심 서비스 자체가 유의미한 사용자를 부어넣을 수 있는 힘이 딸린다면 갑갑하죠.

이러는 와중에 미국에서부터 웹2.0의 대표격이라 할 수 있는 페이스북과 트위터의 Third party들이 성공가도를 달리기 시작했습니다.

                             <대박을 친 아이폰 게임서비스인 위룰에서도 트위터로 트윗을 날릴 수 있죠>

앞서 설명한대로 API를 응용할 수 있는 트위터나 페이스북 같은 서비스가 서드파티 서비스에 탄탄하게 사용자를 모아준다는 점에서 이건 대단한 일입니다. 국내 사례로 비교해 보면 싸이월드가 뜨기 시작했던 2003년쯤부터 싸이월드가 API를 공개해 자사 회원을 이용한 다른 서비스를 개발하게 해 준것이나 마찬가지입니다. 스킨 정도나 팔아먹게 해 놓은 게 아니라 싸이월드 회원 뿐 아니라 다른 핵심 요소들을 자유롭게 활용할 수 있게 만들어 놓은 것이지요.

서드파티 서비스가 메인 서비스를 더욱 강화해 주어 함께 살아갈 토양을 만들어 냈다는 점에서 이들의 성공은 진실로 개념과 상상의 영역이었던 웹2.0 서비스를 체현해 낸 것이라고 할 수 있습니다.
즉, 이들은  말 그대로 'IT생태계'를 구축한 것입니다. 이 성공한 생태계로 말미암아 이제 드디어 매쉬업 서비스를 개발하기에 좋은 환경이 도래했다고 봅니다.

이 모든게 다 트위터와 페이스북 때문이다라고 말해도 모자라지 않습니다.

저작자 표시 비영리 동일 조건 변경 허락
Trackback Address :: http://web2log.com/trackback/54 관련글 쓰기
Name
Password
Homepage
Secret
2010/06/04 11:25

 

5. 가상요소와 가상클래스-2

3) first-line, first-letter 가상요소

<style type="text/css">
body {font-size:12px;}
h2 {color:#666;}
.line p:first-line {font-size:12px; font-weight:bold; color:#44C4DF; width:100%;}
.letter p:first-letter {color:#E7963D; font-size:22px; text-indent:4em; font-weight:bold;}
</style>

문자 그대로 이해를 하시면 가장 편할듯 하네요.
first-line은 문단의 첫번째 줄에 적용이 되는 것 이구요,
fist-letter는 첫 글자에 스타일이 적용되는 것 입니다.
문제의 IE6에서도 적용이 되네요~


<h2>first-line 가상요소</h2>
 <div class="line">

 <p>옛날에 금잔디 동산에 메기 같이 앉아서 놀던곳  물레방아 소리 들린다 메기야 내 희미한 옛생각 동산 수풀은 우거지고 장미꽃은 피어 만발하였다 </p>
 </div>
<h2>first-letter 가상요소</h2>
<div class="letter">
 <p>물레방아 소리 그쳤다 메기 내 사랑하는 메기야 지금 우리는 늙어지고 메기 머린 백발이 다 되었다 옛날에 노래를 부르자 메기 내 사랑하는 메기야</p>
</div>



4) before, after가상요소

<style type="text/css">
body {font-size:15px; line-height:150%;}
.cnt  p:before {content:"노래시작" ; color:red;}
.cnt  p:after {content:"노래끝" ; color:red;}
</style>

<div class="cnt">
  <p>옛날에 금잔디 동산에 메기 같이 앉아서 놀던곳  물레방아 소리 들린다 메기야 내 희미한 옛생각 동산 수풀은 우거지고 장미꽃은 피어 만발하였다
  물레방아 소리 그쳤다 메기 내 사랑하는 메기야 지금 우리는 늙어지고 메기 머린 백발이 다 되었다 옛날에 노래를 부르자 메기 내 사랑하는 메기야</p>
 </div>

문단의 처음과 끝에 가상컨텐츠가 적용되어있는것을 볼수있습니다.
IE6,7은 안되고 IE8부터 인식합니다.



저작자 표시 비영리 동일 조건 변경 허락
Trackback Address :: http://web2log.com/trackback/52 관련글 쓰기
christian Louboutin sale | 2011/11/11 14:18 | PERMALINK | EDIT/DEL | REPLY
동산에 메기 같이 앉아
Name
Password
Homepage
Secret
2010/06/03 10:26

국내 트위터 사용자가 대략 63만을 돌파했다고 한다. 그것도 선거 전후로 이틀만에 8만이 늘어났다고 하니 선거와 트위터의 연관관계가 없다고 그 누구도 말할 수 없는 상황에 이르렀다.

트위터 국내 가입자 63만 돌파  ( http://wikitree.co.kr/main/news_view.php?id=9558 )

미투데이가 네이버 등빨을 안고 100만을 돌파했다고는 하지만 청소년 층이 많은 미투데이와 청년 중장년층 위주의 트위터는 사용자층이 확연히 다르다는 점에서 트위터는 보다 더 사회적 영향력을 가지고 있다고 할 수 있다.


<트위터를 통해 선거를 독려하는 개그맨 김제동님입니다. 이밖에 다양한 연애인들의 트윗홍보가
인상깊었던 선거입니다.  (출처=김제동님 트위터) >


아침부터 트위터에는 선거 결과에 대한 자축으로 타임라인이 가득 채워져 있다. 트위터 사용자들은 높은 선거참여율을 만든 데에 대한 만족감, 여당의 선거 참패에 대한 기쁨을 표현하고 있다. 선거 전날과 당일날까지 타임라인에는 선거 촉구에 대한 트윗밖에 없었다 해도, 독촉 및 인증샷으로 채워져 있었다 해도 과언이 아니다. (물론 현 여당 성향의 트윗 유저도 있었을 것이나 그들은 단순히 선거 독려 수준의 트윗은 있었을지언정 자기 정치색을 표현하면서 선거를 독려하는 트윗은 거의 하지 않았던 것 같다)


<선거가 끝난 하루뒤에도 선거에 관련된 트윗들은 끝없이 올라오고 있습니다.>

아직 트위터 사용자 수가 전체 인터넷 사용자 수에 비해 한 줌 정도 밖에 되지 않더라도, 아이폰 사용자가 전체 핸드폰 사용자 수에 비해 이제 갓 80만을 넘은 수준이더라도 정부 여당은 그 파장이 어느정도인지를 생각해 보아야 할 것이다.

                 <화가 임옥상님은 20대 투표인증샷을 통해 트위터에 응모하면 판화 1000점을 선물하는 이벤트를 통해 
               투표를 독려했는데요,,본인의 사비를 털어, 10만명의 투표를 독려하려고 했다니,, 선관위보다 낫네요 ㅎㅎ>


아이폰은 고작 80만대로 대한민국의 무선인프라와 모바일 환경을 바꾸어 놓았다. 트위터 안에서의 선거 열풍은 그 미디어 성격으로 말미암아 80만 유저의 찻잔 속 태풍이 아니라 '온라인 상의 새로운 미디어 힘'으로 나타났다. 실제 데이터가 이들로 인해 어떻게 변하였을지 아직 알 수 없으나 이들의 활동이 실제로 이번 지방선거의 참여율을 높였으며 이들의 정치적 성향이 선거 결과에 영향을 미쳤음을 간과할 수 없을 것이다.


패한 쪽에 한 마디 하자면..
“ '트위터를 이용한 선거 운동'에 족쇄를 채웠던 그 시각과 이해 수준으로는
새로운 미디어 환경에서 지속적인 패배를 약속할 수 밖에 없다. ”


또한 이러한 실시간 SNS가 이번 선거를 통해
정치 환경에 새로운 견제 장치로 등장한 것임을 명확히 깨달아야 한다.

그리고 보다 더 근본적으로 '어떤 정치를 어떻게 해야하는지'에 대해 다시금 고민해야할 것이다.

저작자 표시 비영리 동일 조건 변경 허락
Trackback Address :: http://web2log.com/trackback/53 관련글 쓰기
Tracked from 블로그문화연구소'마실' | 2010/06/03 11:57 | DEL
어제 밤부터 트위터가 심상치 않았다. 해방구처럼 천안함 관련 의혹을 제기하는 동영상이 돌아다니기 시작했고 패러디 물이 쏱아져 나왔다. 투표에 참여하자는 독려가 시작되었고 김제동 씨의 방송프로그램 하차에 대한 분노가 폭발되었다. 또한 문수수님의 4대강사업 반대 분신공양은 여기에 불을 지폈다. 아침에 20대 투표를 독려하기 위한 이벤트가 봇물처럼 이루어졌는데 투표를 하고 인증샷을 올린 사람들에게 임옥상 선생이 판화 1,000점을 기부한 것을 비롯하여 작..
Tracked from get style (겟 스타일) | 2010/06/03 13:47 | DEL
6.2 지방선거 승리의 주역이 트위터인 이유! 근래에 보기드물게 흥미 진진하고 스릴넘치는 지방선거 개표방송을 본듯 하다. 6.2 지방선거 일주일전만 해도조선일보가 한국갤럽에 의뢰해 발표한 여론조사 에서는 서울시와 경기도지사 등의 주요 이슈지역에 대한 후보 지지율 여론조사 결과가 한나라당 측 후보들이 10%이상씩 앞서고 있다고 발표했다. 기사원문:http://news.chosun.com/site/data/html_dir/2010/05/17/201005..
'싸이월드는 과거완료고 트위터는 현재진행이다.' <출처: http://farm4.static.flickr.com/3436/3764259009_dd08c34c82_o.jpg> 혹, SNS(Social Network Service)에 능통한 사람들은 '이야기' 합니다. me2day는 10대들, Twitter는 30대들의 소통 공간이라고. 그럼 20대는 어디로 가야할까요? 새로운 SNS 가 생겨야 할까요? No.No.No 이 글은 me2day, twitt..
Tracked from Social Media Literacy | 2010/08/26 17:53 | DEL
중앙선거관리위원회가 지난 6월 지방선거 당시 트위터를 통해 “투표를 한 사람들에게 선물을 증정하겠다”며 젊은 유권자(선거인)들의 투표를 독..
Tracked from Social Media Literacy | 2010/08/27 07:56 | DEL
필자의 글에 대해 반론이 들어왔습니다. 선관위의 투표독려 트위터 처벌방침은 선거법 곡해한 것. -백수광부- 선관위가 경품을 주면서 투표를 독려..
황군 | 2010/06/03 11:50 | PERMALINK | EDIT/DEL | REPLY
선거에는 평소 관심이 없었는데~ 팔뤄들한테 선거에 관해서 얘기도 많이 듣고 하다보니 투표에 참석했지요~
높은 투표율엔 분명 트위터도 작용을 했을 것 같네요
web2log | 2010/06/03 12:20 | PERMALINK | EDIT/DEL
이번에 트친들의 투표 압력 수준은 굉장했습니다. 투표 안하면 타임라인에서 제거될 기세 ㄷㄷ 장단점이 있어 보였습니다.
초록은동색 | 2010/06/03 12:18 | PERMALINK | EDIT/DEL | REPLY
가장큰 원인은 역시 반여감정아니었을까요. 이번 선거의 주요 특징 중 하나가 트위터였다는 점도 부정할 수는 없을 것 같네용. 잘 읽고 가요~
web2log | 2010/06/03 12:23 | PERMALINK | EDIT/DEL
6.2선거 주요 특징: 노풍, 북풍, 마지막으로 트풍입니다. 주요 원인이 반여감정이었다는 데에는 동감합니다.
Name
Password
Homepage
Secret
prev"" #1 next