Post

# 어도비 브라켓 다운로드 : http://brackets.io  



Ctrl + q : 브라켓 종료

Ctrl + w : 현재 파일 닫기

Ctrl + f : 검색

Ctrl + h : 검색 후 변경

Ctrl + g : 줄 이동

Ctrl + l : 줄 선택

Ctrl + d : 줄 복사
Ctrl + / : 선택된 줄 주석처리
Ctrl + e : 선택된 단어 편집

Ctrl + b : 선택된 단어 검색 선택

Ctrl + 마우스왼쪽 클릭 : 복수 커서 생성

Ctrl + z : 실행 취소



Post

훔.. 에디트플러스에서 문서양식 편집하는건 줄합치기,공백없애기 정도뿐이었는데, 이런 편리한 기능 사용법을 이제서야 알게 됐네요 ㅋㅋ
자주 쓰이진 않더라도 꽤 유용하게 쓰일듯한 기능인 것 같아요 ^^

http://eknote.tistory.com/1150

Post

http://blog.naver.com/sharkray1?Redirect=Log&logNo=130075124480



참고로 아래화면은 EditPlus v.3.31의 설정 화면입니당~

Post

Post


출처 : http://social.answers.microsoft.com/Forums/ko-KR/answersieko/thread/fca1ff1e-e522-4b6c-89a4-755a8fc1e545

언젠가부터 IE8에서 개발자도구를 실행하면 윈도우 작업표시줄에는 분명히 개발자도구가 실행돼 있는데 창 자체는 보이지가 않더군요 ㅠㅅㅠ
윈도우7이라 익스플로러를 아예 삭제할 방법도 못찾겠고 아무리 다시 설치를 해봐도 마찬가지고..

그러다가 오늘 다시 검색해보니 해결책이 있었네요... 쩝..

http://social.answers.microsoft.com/Forums/ko-KR/answersieko/thread/fca1ff1e-e522-4b6c-89a4-755a8fc1e545

위의 주소에 있는 글을 참조하시면 되구요, 저처럼 컴맹이신 분께는 조금 더 부연설명을 드릴께요-

  1. 위 주소에서 [답변]글의 내용 중 굵은 글자 부분을 복사해서 메모장을 열어 붙여넣기 한다.
  2. 아무 위치에 (아무래도 바탕화면이 제일 편하고 무난하게죠~?) aaa.reg파일로 저장한다.
    파일명은 자유, 파일형식은 모든파일(*.*)
  3. 실행중인 익스플로러를 모두 종료한 뒤, 저장한 reg파일을 찾아 더블클릭하여 실행시킨다.
    레지스트리에 추가하겠냐는 질문이 나오면 [예]를 선택하고 [확인]을 누르면 완료~

 

이렇게 한 뒤에 익스플로러를 실행시켜서 개발자도구를 다시 열어보세요~ 혹시나 마찬가지라면 위 작업을 두세번 반복해서 해주시면 아마도 해결되실듯.. ^^; 저도 세번째 반복해서야 제대로 됐어요 ㅋ

Post


http://accessibility.kr/pmwiki/pmwiki.php/Main/SurveyForTheDisabled2009

시각장애인을 비롯한 여러 장애인들을 대상으로 조사한 웹 사용 실태.
비장애인인 나도 웹 사용이 불편하다고 느낀적이 한두번이 아닌데 장애인들은 정말 얼마나 불편할지 상상이 안되네요..

링크된 글 하단에 있는 여러 기타 의견들을 하나하나 읽어보면 구체적인 문제점들이 여럿 나옵니다.
앞으로 웹퍼블리싱을 할때 무조건~!! 기억하면서 세심하게 작업해야겠다고 다짐했어요-
실제로 장애인들이 웹을 사용하는 것을 볼 기회가 있다면 좀더 기억에 남고 도움이 될것 같네요

ps. 이렇게 장애인을 위한 웹을 만들자는 생각으로 글을 쓰면서도,
      지금 이 블로그조차도 장애인을 포함한 여러 환경을 제대로 고려하지 않고 만들어져 있을것 같다는 생각이 드네요.. 쩝 -ㅅ-;;;;;;

Post

네이버에서 진행한 IE6퇴출 이벤트에 이어 다음에서도 이벤트를 진행하고 있네요 ㅎ
아직도!!! 익스플로러6버전을 사용하고 계신분들께서는~ 필히 이번 기회에 브라우저를 업그레이드해서
보안도 지키고 더 좋은 기능들도 사용하시고 더불어 이벤트에도 참여하시면 정말!!! 좋을것 같네요~~ ^ㅅ^

이벤트페이지 : http://search.daum.net/search?w=tot&q=%40%EC%9D%B5%EC%8A%A4%ED%94%8C%EB%A1%9C%EB%9F%AC6%EC%9D%B4%EC%A0%9C%EA%B7%B8%EB%A7%8C


Post


W3C(World Wide Web Consortium) 산하 WAI(Web Accessibility Initiative)에서 발표한 웹 콘텐츠 접근성지침입니다~
(번역문 출처 : 웹표준 핵심가이드북 XHTML+CSS/제우미디어)


1. 인지성(Perceivable) - 정보와 사용자 인터페이스 요소는 사용자가 인지할수 있도록 표시되어야 한다. 
  • 모든 텍스트가 아닌 콘텐츠에, 사람들이 원하는 인쇄,점자,음성,기호 또는 간단한 언어 등과 같은 형태로 대체텍스트를 제공해야 한다.
  • 시간을 바탕으로 한 미디어에 대한 대안을 제공해야 한다.
  • 정보와 구조의 손실 없이 콘텐츠를 다른 방식(예를 들면 더욱 간단한 형태)들로 표현할 수 있어야 한다.
  • 사용자들이 보다 쉽게 보고 들을 수 있는 전경에서 배경을 분리한 콘텐츠를 만들어야 한다.


2. 운용성(Operable) - 사용자 인터페이스 요소와 탐색은 운용 가능해야 한다.

  • 키보드로 모든 기능을 사용할 수 있도록 해야 한다.
  • 읽기 및 콘텐츠를 사용하는 사용자에게 충분한 시간을 제공해야 한다.
  • 알려진 방법으로 발작을 일으킬 수 있는 콘텐츠를 디자인하지 않아야 한다.
  • 사용자가 탐색하고, 콘텐츠를 찾고, 그들이 어디에 위치하는지를 알 수 있도록 도와주는 방법을 제공해야 한다.


3. 이해성(Understandable) - 정보와 사용자 인터페이스 운용은 이해할 수 있어야 한다.

  • 텍스트 콘텐츠를 판독하고 이해할 수 있도록 만들어야 한다.
  • 웹페이지의 탑재와 운용을 예측 가능한 방법으로 제작해야 한다.
  • 사용자의 실수를 방지하고 수정할 수 있도록 도와야 한다.



웹접근성과 관련된 유용한 자료 및 사이트

 

 


 
장애인 차별 금지 및 권리 구제 등에 관한 법률

 
  • 제21조(정보통신·의사소통에서의 정당한 편의 제공)
    행위자는 장애인에게 전자정보 및 비전자정보를 동등하게 접근,이용할 수 있는 필요한 수단을 제공

  • 시행령 제14조(정보접근·의사소통에서의 정당한 편의 제공의 단계적 범위 및 편의의 내용)
    누구든지 신체적,기술적 여건과 관계없이 웹사이트를 통하여 원하는 서비스를 이용할 수 있도록 접근성이 보장되는
    웹사이트

 


마지막으로, 웹접근성 향상 캠페인 사이트~ ^ㅅ^ http://www.wah.or.kr/campaign/ 


 

Post

네이버에서 익스플로러 8 업그레이드 이벤트를 진행하고 있답니다-
제일 큰 이유는 아마도 크로스브라우징 개발에 여러 문제가 있어서가 아닐까 싶은데 ㅋ
어쨌든 이왕 하는거 좀더 크게 광고해서 빨리빨리 IE6,7이 사라졌으면 좋겠어요 ㅠㅅㅠ
이 글을 보시는 분 중에 익스플로러 6이나 7 또는 그 이하 버전을 사용하는 분이 계시다면
조금 귀찮으시더라도 한번만 시간 내셔서 모두모두 업그레이드 해주시면 감사하겠습니다~ 꾸벅 ^ㅅ^

이벤트페이지 :  http://campaign.naver.com/goodbye-ie6

Post

ㅠㅅㅠ IE6,7 사용자 여러분~ 이 글을 보시면 개발자 몇백명 살린다고 생각하시고 브라우저 업그레이드 좀 해주세요~
아래 내용 보시면,, IE6,7은 보안상의 문제로도 많이 안좋다고 하잖아요~~ ㅎ
아, 그리구 제 생각엔,, 익스플로러 6은 웹디자이너보다는 개발자(특히 퍼블리셔!!)에게 곤욕스러운 브라우저라고 생각됩니다만.. ^^a


Post

웹서핑 중 발견한 "(웹디자이너를 위한)포토샵단축키 정리"를 가지고 "웹퍼블리셔를 위한 포토샵단축키 정리"를 만들어봤습니다 ㅋ
(이미지 원본 출처는 기억나지가 않네요 ;; 혹시 출처 아시는 분 계시면 알려주시면 감사하겠습니다~ ^^;)

간혹 이미지 슬라이스는 디자이너가 하고 퍼블리셔는 말그대로 코딩만 하는 퍼블리셔분들도 계시다고 하는데
저는 개인적으로 제가 직접 이미지를 잘라서 코딩하는게 훨씬 편하고 좋더군요 ㅎ

저는 주로 포토샵을 사용해서 이미지를 자르는데, 사실 포토샵보다 이미지레디가 이미지 슬라이싱하기에는 더 편리하다고 합니다.
지금은 CS4를 사용해서 이미지레디가 어디로 사라졌는지 찾을수가 없어서 사용해보질 못했는데,,
어쨌든 저처럼 포토샵을 사용해서 이미지 슬라이싱을 하시는 분들은 꼭! 알고 계시면 작업시간이 많이 단축될거라고 생각이 돼요~ ^^


적색표시의 키는 단일키로 사용하는 것들이고, 청색표시의 키는 Ctrl과 같이 사용하는 것들입니다.
(포토샵 단축키는 영문입력자판으로 해서 사용하는 건 아시죠~?)

Post

참고,출처 : http://www.lightsphere.com/dev/articles/design_for_iphone.html
                http://html.nhndesign.com/blog/category/90




처음으로 모바일용 페이지를 작업하면서 알게 된 내용들입니다.
제 경우엔 아래 네가지 사항이 필수사항이었는데,
모든 모바일용 페이지에서도 아래 사항들이 전부 꼭 필요한 사항들인지는 잘 모르겠네요 ^^;;

아무튼,, 본인은 사용하지도 않는 스마튼폰 때문에 며칠동안 맘고생,몸고생은 혼자 다 했네요 ㅠㅅㅠ
(억울하면 너도 스마트폰 사든가~~라고 말하시면 상처받아요 ㅋㅋ 가난해서 스마트폰은 커녕 터치폰도 제대로 못써본 1人~)
' 자랑이다.. -ㅅ-;;; '

추가로 알아내는 내용들이 있으면 계속 업데이트할께요~
혹시 제가 적은 내용 중에 잘못되거나 더 알아야 할 내용들을 아시는 분 계시면 댓글로 알려주시면 정말정말 감사하겠습니다~~
아시는 분은 짧게라도 댓글 달아주시면 제가 더 검색해보고 공부할테니까 절대로 그냥 지나치심 안돼요~~ ㅎㅎ




  • 별도의 css를 따로 만드는 것을 권장.


  • ★ meta태그로 장치의 해상도 설정에 대한 내용 추가.

      <meta name="viewPort" content="initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scale=no;" />


  • ★ css에 전체 기본스타일로 아래내용 추가.

       * {-webkit-text-size-adjust:none;}

       (이건, 무슨 의미인지 잘 모르겠네요 ^^; 다른 모바일페이지들에 공통적으로 사용된게 있길래 무작정 긁어다 썼는데..)



PC에서 모바일브라우저 테스트하기

[파이어폭스]
부가기능 설치 : https://addons.mozilla.org/ko/firefox/addon/59 , https://addons.mozilla.org/ko/firefox/addon/967
MIME-TYPE 설정 : https://addons.mozilla.org/ko/firefox/addon/1345

[사파리]
브라우저 기본설정에서 개발자용 메뉴 보기 체크.
웹사이트 이용 : http://iphonetester.com



참고 모바일페이지

http://m.news.naver.com , http://m.daum.net


Post


IE6 장례식 사이트 : http://ie6funeral.com/

오는 3월 4일, 미국에서 IE6의 장례식을 거행한다고 합니다~ (ㅋㅋ 일케 반가운 소식이~~)
이 장례식은 구글과 유튜브에서 더이상 IE6를 지원하지 않겠다고 해서 기획이 되었다고 하는데,
참가 희망자가 예상보다 많아서 식장을 일반 사무실에서 레스토랑으로 변경했다고 하네요 ㅋ
누군가(사람은 아니지만ㅎ)의 장례식이 이렇게도 많은 사람들의 기쁨이 될줄이야~
암튼 저도 뉴스를 보자마자 넘 기뻐서 바로 포스팅합니당

IE6, 하루빨리 한국에서도 깨끗이 잠드시길~~!!

Post

Post

크로스브라우징을할 때 각 버전별 익스플로러로 확인을 하기가 가장 골치 아픈 일 아닐까 싶네요 ^^a
전에는 Multi Explorer라는 프로그램을 사용해서 각 버전의 익스플로러를 따로 따로 설치했었는데
개인적으로 사용해보니 이 프로그램이 사용성으로 보아서는 훨씬 더 편한듯 합니다~

IE 5.5부터 6,7,8까지 확인할 수 있구요 원래의 익스플로러를 동시에 실행시켰을때 간혹 오류메시지가 뜨면서 종료되기도 합니다..
홈페이지에는 자바 애플릿과 6버전(OS사용자계정)에서의 플래시가 작동되지 않기도 한다고 써있네요
그리고 역시, 실제 익스플로러와 100% 똑같은 렌더링을 하지는 못한다고 하구요

그렇지만, 그나마 이런 프로그램이라도 없으면 OS를 여러개 설치해서 확인하든지 아님 컴퓨터를 여러대 사용해서 확인하든지 하는수밖에 없겠죠;;
암튼 여러가지로 속썩이는 익스플로러랍니다 -ㅅ-a


제작사 홈페이지 및 프로그램 다운로드 ☞ http://www.my-debugbar.com/wiki/IETester/HomePage

Post

CDK(CSS Design Korea)에서 "CSS의 역할을 이해하기 쉽게 간단히 정리하자면"란 제목으로 달린 글들 중
lunaticdream님,1UP님,나니님의 글에 넘 공감이 가고 재미있어서 함 퍼왔어요-
(허락받고 퍼올려고 했는데 -ㅅ-a 아무리 찾아봐도 허락받을 글을 남길 방법을 모르겠어서..)


lunaticdream //

어떤 사람의 몸매 -> HTML
그사람의 옷차림,헤어스타일 -> CSS
그사람의 전체적인 스타일 -> HTML + CSS

.몸매와 옷차림이 좋아 전체적인 스타일이 좋은사람은 킹카등극
.몸매가 좋으면 옷매무새가 살고 옷을 골라입는것에 따라 몸매의 결점을 커버가능
.몸매(키 등)를 바꾸려면 뼈를깍는 고통과 시간이 소요
.옷차림이나 헤어스타일은 손쉽게 변경가능
.몸매는 표준이 존재한다 -> HTML구조의 표준화
.양말을 귀에걸면 안된다 -> 적절한 CSS의 사용

올여름 해운대의 승자가 되려면
몸매를 업계표준(권상우)화 시키고 죽이는 옷과 악세사리를 걸쳐주는것이 중요하다.


1UP //

머리좀 길러서 을 부리고 싶은 고등학생입니다.
하지만 저는 안타깝게도 고지식한 선생님들이 많은 학교를 다니고 있죠.
아무래도 학교에서는 찍히지 않기 위해 머리를 최대한 짧게 보이는 꼼수를 부리면서 살고 있어요.
한때는 대들었다고 애들이 뭐라 그런 적도 있습니다ㅜ..
결국 이리저리 피해다니는게 답이다 싶더라고요, 에효.. 힘들어요...

이렇게 이중 생활을 하면서 살다보니 어느날 새로운 선생님들이 오신다는 얘길 들었습니다.
그래서 이제는 좋아질꺼라 기대했습니다만..뭐, 별반 다르지 않더라고요.

다른학교 선생님들은 수업도 빨리 끝내주고, 많이 풀어주던데...ㅜㅜㅜ 무지 부럽습니다.

           # 부연설명 : 멋→CSS / 고지식한 선생님들→IE6 / 학교→대한민국 / 꼼수→CSS핵 / 새로운 선생님들→IE7 ...

나니 //
추가하자면, 새로 부임한 선생님은 IE7, 그렇다면 교생은 IE8?

Post



http://resistan.com/savethedeveloper/
↑↑↑
(위 링크로 가시면 각 웹브라우저의 최신버전 링크주소가 있습니다.)


완전 공감가는 말.. ㅋ 브라우저 업그레이드가 정말 여러 사람(웹프로그래머,웹퍼블리셔 등등)을 살린답니다~
모두모두 웹브라우저 업그레이드에 동참해 주세요

Post

출처 : http://ajaxian.com/archives/css-evolution


테이블코딩을 하던 때에는 디자인이 다 나오기 전까진 코딩을 시작할 수 없었는데..
디자인이 나오기 전에 코딩을 먼저 시작할 수 있다는 것을 보여주는 완전 멋진 이미지입니다 ㅎㅎ

먼저 내용을 잘 구조화시켜 작성한 뒤 css로 레이아웃을 잡고 디자인을 입히는 과정이예요-

Post

맑은고딕체로 제작된 한 사이트에 들어가보니 글자가 매우 뿌옇게 보여서 눈이 아프더군요 -ㅅ-;

맑은고딕체의 글자가 뿌옇게 보임

cleartype font 설정으로 글자가 깔끔하게 보임



윈도우의 바탕화면 글꼴속성과 관련해서 설정을 바꾸어주면 해결이 된답니다.


1. 바탕화면에서 마우스오른쪽을 누르고 속성을 선택합니다.

2. 디스플레이 등록정보 창에서 화면배색 탭을 선택 후 효과 버튼을 누릅니다.

3. 위에서 두번째 항목인 화면글꼴의 가장자리를 다듬는 데 다음 방법 사용에서 ClearType을 선택 후
   확인>확인을 눌러 설정을 마칩니다.

Post


출처 : 웹표준 교과서 | 디지털미디어리서치 - 마시코 타카히로 저


1. 수정과 관리가 용이
웹페이지를 제작할 때 (X)HTML로 올바르게 구조화하고 CSS로 시각표현을 통일하여 제어하면 페이지 제작 부담이 크게 줄어든다.


2. 웹 접근성 향상
올바른 (X)HTML과 CSS로 다양한 브라우징 환경에 대응하는 접근가능한 웹페이지를 만들 수 있다. 또한 장애인과 노인을 배려한 웹페이지를 만듦으로써 결과적으로 모든 사람에게 높은 접근성을 제공할 수가 있다.


3. 검색엔진 최적화(SEO) 대책
검색엔진의 Crawler는 (X)HTML소스를 거의 액면 그대로 해석하기 때문에 적절하게 구조화되고 깨끗하게 정리된 소스일수록 검색로봇이 잘 검색할 수가 있다. 문서구조가 명확한, 예컨대 타이틀(h1~h6요소) 사용법, 텍스트 강조(strong요소) 등 웹표준에 기반을 둔 적절한 마크업이 된 웹페이지는 '인간뿐만 아니라 검색엔진에게도 친절한 페이지'가 되는 것이다.


4. 파일 용량 축소와 서버 저장공간 절약
소스를 효율적으로 작성하면 파일 크기를 줄이고 서버 저장공간을 절약할 수 있다. 동시에 화면표시에 걸리는 시간도 줄고 서버의 부담도 덜 수가 있다. 따라서 여러가지 경제적인 효과를 얻게 된다.


5. 하위호환성과 상위호환성 확보
올바른 (X)HTML과 CSS로 페이지를 제작하면 오래된 브라우저에서도 컨텐츠가 적절하게 표시되고 상위호환성과 상호운용성이 확보 된다.
▲ top