월드버텍 블로그

내일을 향한 준비~~

Author Archive

css3 여러가지 스타일을 마우스나 수치로 쉽게 생성할 수 있습니다.

http://westciv.com/tools/3Dtransforms/index.html
http://css3maker.com/ 

애니메이션을 스크립트로 만든 예제 사이트 입니다.
예제화면과 소스도 함께 공개되어 있습니다.
플래시를 위기에 몰릴만 하네요~

http://www.dhteumeuleu.com/

사파리에서 작동이 제대로 되네요~

DIV 안에 스크롤 만들기

Posted by jwjeong under Publishing

가로와 높이의 값이 고정된 DIV에 스타일 속성으로 스크롤을 만들 수 있습니다.

1. 가로 스크롤바 : overflow-x:scroll; overflow-y:hidden;

2. 세로 스크롤바 : overflow-y:scroll; overflow-x:hidden;

W3C에서 모바일화를 위한 10가지 가이드 지침 입니다.

– 하나의 웹을 위한 설계
– 웹 표준 준수
– 유해 요소 제거
– 장비 제한 주의
– 웹 네비게이션 최적화
– 그래픽과 색상 확인
– 가볍고 간결한 사이트
– 네트워크 자원 절약
– 사용자 입력 가이드
– 모바일 유저 배려

더 자세한 내용은  http://www.w3c.or.kr/Translation/mwbp_flip_cards/를 참조해 주세요.

<발표자 소개>

 강학주 소장(강팀장, @ebizstory)
(현) 이스토리랩(eStory LAB, 소셜미디어 & 웹서비스 전략연구소) 소장
        소셜미디어 마케팅 & 웹서비스 전략 컨설턴트
        방송통신위원회 이용자포럼 소셜미디어 자문위원
        소셜미디어 칼럼니스트(월간 신동아, 월간 The PR, 월간 웹, 한국정보화진흥원 등)

        SNS 콘텐츠 유통 플랫폼 마이픽업(http://mypickup.kr) 개발 및 서비스

     [최근 2년간 강의경력]
    ∙ MBC 인터넷을 가다 라디오/TV 1년 6개월 고정 출연
    ∙ 트위터, 거스를 수 없는 소통의 길-서울시청
    ∙ 트위터 사용자의 마음을 열어라-공군본부 정훈공보실)
    ∙ 문화부 홍보 전문가 뉴미디어 과정-문화체육광관부
    ∙ 사례로 배우는 소셜미디어 도입 기법-서울산업통상진흥원
    ∙ 소셜미디어와 신사업모델 접목-삼성에버랜드
    ∙ 소셜미디어 도입 전략과 가능성-SK와이번즈
    ∙ 소셜미디어 이해와 활용-제주대학교/진주산업대학교/전주대학교 등 다수 대학

 윤상진 님(깜냥, @ggamnyang)

 (현) IT전문 블로그 ‘깜냥이의 웹2.0 이야기!(www.ggamnyang.com)’ 운영
        블로그메타사이트 ‘블로그와이드(www.blogwide.kr)’ 운영
        경영학석사논문 ‘블로그를 활용한 바이럴마케팅이 구전효과에 미치는 영향’ 발표
        ‘태터앤미디어(www.tattermedia.com)’ 파트너로 활동중

        ‘미래 비즈니스 키워드, 소셜 웹 사용설명서'(2010년) 출간

 좌석 제한(100석)이 있습니다. 

사전 입금자 순으로 선착순 마감되오니 신청하시고, 입금을 서둘러 주세요~ 
참가비를 입금하실 때는 신청자명과 동일하게 해주세요.
현장 접수비는 1만5천원입니다. 이점 유념하시길 바랍니다..^^

 * 참고로, 한양대학교 교수학습개발센터에서 세미나 장소를 후원해주셨습니다.
이번 세미나의 후원을 원하시는 기업이나 단체가 있으시면 언제든 연락바랍니다~
기부 후원부터 물품이나 경품, 간식 등 그 어떤 후원이라도 괜찮습니다.

더 자세한 정보는 아래 사이트를 참조 하세요.

http://ggamnyang.com/903

익스플로어 8 : 1픽셀이 올라가는 현상

파이어폭스/사파리 : 제대로 적용된 화면

화면과 같이 브라우져에 따라 마진 값이 차이가 날 경우에는 css에서 조절 할 수 있다.

#navi {
margin-top:4px /*실제값, 파이어폭스 사파리등*/
*margin-top:5px; /*익스플로어용으로 적용될 값*/
}

포인트
1. 모바일 클릭이 쉽도록 메뉴 라인별로 클릭 가능하도록 영역 확보
2. 전체 모서리 라운딩 처리
3. 여러개의 백그라운드 이미지 활용하기

—  CSS  ————————————————————–

.hl{width:100%;
 background: <한번에 여러개의 백그라운드 이미지를 설정할 수 있습니다.>
 
url(../images/common/menu_arr_middle.png) repeat-y right top, <화살표 이미지 출력>
 url(../images/common/menu_bg_middle.png) 0 0; <전체배경이미지출력>
border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; <사방모서리 라운딩> }
 .hl .li1{overflow:hidden;}
.hl .li1 li{height:47px; padding:0 15px;}
.hl .li1 li a{display:inline-block; overflow:hidden; width:100%; white-space:nowrap; text-overflow:ellipsis; color:#444;  line-height:47px;  font-size:15px}

— HTML ————————————-

<div class=”hl”>
<ul class=”li1″>
<li><a href=”#”>메뉴명</a></li>
<li><a href=”#”>메뉴명</a></li>
</ul>
</div>

1. Apple에서 제공하는 Safari 브라우저를 설치 합니다.  -> http://www.apple.com/kr/safari/

2. 편집 -> 기본설정(Ctrl+) -> 고급탭 에서 “메뉴 막대에서 개발자용 메뉴 보기” 체크 박스에 체크하고 닫습니다.

3. 다시 사파리 브라우저에서 상단 메뉴바에 “개발자용”이라는 메뉴가 추가 된 것을 확인 할 수 있습니다.

4.  개발자용 > 사용자 에이전트에 들어가시면 데스크탑용 브라우저에서 모바일 브라우저까지 테스트 할 수 있도록 지원합니다.

2010년 7월 2일에 있었던
html5 오픈 콘퍼런스 자료 입니다.

아래 사이트 링크로 들어가시면 강연과 관련된 동영상 및 자료를 보실 수 있습니다.

http://www.webappscon.com/html5/

table 태그를 사용하면 기본적으로 셀패딩과 셀 스페이싱, 보더 값 때문에 늘 습관처럼 아래와 같이 주루룩 태그를 넣고 시작을 합니다.
<table  border=”0″  cellspacing=”0″  cellpadding=”0″>

늘 같은 내용을 반복해서 적어야 하는 번거로움을 덜기 원한다면 style에서 아래와 같이 설정을 해 줍니다.

———————————————–
<sytle>
Table {border-collapse: collapse;}
td {border: 0px solid; padding:0 0 0 0;}

</style>
———————————————–
css 파일에 저렇게 적어 주시면 테이블 선언시 아무것도 적어주지 않아도 된답니다.
<table>

모바일 웹 모음 사이트

Posted by jwjeong under Knowhow

모바일 웹 모음 사이트

모바일 웹 기획이나 디자인 하실 때 참고 하세요.

CSS iphone
http://www.cssiphone.com/

Mobile Awesomeness
http://www.mobileawesomeness.com/

mFWA
http://m.thefwa.com/

※ 익스에서는 제대로 안열려요. 파폭이나 사파리를 이용해 주세요. ^^

Subscribe to 월드버텍 블로그