본문 바로가기

메모장

CSS 핵정리 - 핵과 필터 사용에 대한 주의사항 핵과 필터 사용에 대한 주의사항 CSS는 언어적인 측면에서 상위 버전 호환성을 잘 고려해서 설계되었다. 브라우저가 특정 선택자를 이해하지 못할 경우 해당 규칙을 전혀 적용하지 않게 된다. 마찬가지로 특정 속성이나 값을 이해하지 못할 경우 해당 선언을 모두 무시해버린다. 이런 기능으로 인해 새로운 선택자, 속성, 값이 추가되더라도 구버전의 브라우저에는 별다른 영향을 주지 않게 된다. 이런 특성을 이용하면 구식 브라우저에서도 안전하게 동작하면서도 최신 브라우저를 위한 규칙과 선언을 사용할 수 있다. 새로운 버전의 브라우저가 나올 경우 기존에 필터를 써야했던 CSS가 제대로 동작하게 될 것이다. 구버전의 브라우저에서 문제가 있어서 고급 CSS 기능을 사용했다면 새로운 버전에서는 이런 문제가 해결될 것이다. 이..
[CSS] 텍스트 줄바꿈 처리 word-break, white-space 작업을 하다보면 텍스트가 정해진 width를 넘어가는 경우 어떻게 처리해야 하나 고민이 될 때가 있습니다. 그럴 때는 상황에 따라서 이 것들을 사용해서 해결해주면 좋을 듯 합니다. word-break word-break 는 말 그대로 단어를 자르는 겁니다. 기복적으로 줄이 넘어갈 때는 단어단위로 잘려서 넘어가게 되어 있습니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 word-break 를 사용해주면 줄바꿈이 가능하게 됩니다. .selector {word-break:break-all;} 위와 같은 속성을 주게되면 위의 그림의 아래 부분과 같이 단어 중간에서도 줄바꿈이 가능하게 됩니다. 위의 그림이 잘 이해가 가지 않는다면 이..
DIV를 남발을 하지말자 DIV 남발을 하지말자 TABLE 마인드에서 갓 DIV 마인드로 넘어오기 시작한 디자이너분들께서 실수하시는 부분 중 하나가, 바로 DIV를 남발하는 것입니다. DIV는 만병통치약이 아닙니다. 테이블의 단점 중 하나가 에 재차 이 들어가기 때문에, 겹테이블이 많아져서 페이지 로딩이 느려진다는 것 입니다. DIV도 예외는 아닙니다. DIV의 숫자가 늘어나면 자연적으로 페이지 로드가 느려집니다. 굳이 DIV를 쓰지 않아도 되는 곳에서 DIV 사용을 남발하는 것은 좋지 않은 습관입니다. 예를들어 보겠습니다. 올블릿 생성마법사 메뉴 1 메뉴 2 메뉴 3 이 소스에서 필요없는 부분은 어디일까요? 네, 바로 이 소스에 있는 모든 DIV 입니다. 굳이 ul을 div로 감싸지 않더라도, 굳이 H2 제목 태그를 div로 ..
자꾸 까먹는다....ㅡㅜ 다시 외워야지...OSI 7계층 모델 OSI 7계층 OSI(Open System Interface; 개방형 시스템 상호연결) 출현 배경 컴퓨터간의 통신에 있어 자원을 공유하고 처리하는 것이 서로 다른 데이터의 표현 형식과 교환 방식을 사용함으로 많은 혼란을 초래하게 되었습니다. 따라서, 다른 기종의 컴퓨터 시스템 사이의 원활한 상호접속을 위한 네트워크 구조가 필요하게 되었고 이와 같은 통신 분야의 표준화 추진을 위해 ISO(국제표준화기구: International Standard Organization)에서는 1977년부터 작업을 시작하여 OSI(개방형 시스템 상호연결: Open System Interconnection) 참조모델(Reference Model)을 만들었습니다. 정의 OSI 참조모델은 개방형(Open)이라는 말을 사용하는 것처..
CSS 폰트(font) 굵기(weight)와 자간(letter-spacing) 웹 표준 팁) 폰트를 굵게 하려면 태그가 아니라 css에서 font-weight 로 설정을 해 주는 게 좋습니다. 강조는 , 사용~ 폰트를 굵게 하려면 CSS에서 font-weight 속성을 사용합니다. 값은 숫자도 가능하지만, 세세하게 조정되는 폰트가 없기 때문에 보통 bold(800), normal(400) 을 사용하죠. 폰트 중에는 보통과 굵은 폰트를 따로 제공하는 경우가 있는데, 이 경우에는 자간을 맞춰 놓았기 때문에 굵게 만들어도 어색하지 않습니다. 예를 들어, '맑은 고딕'의 경우에는 '맑은 고딕 Bold', '나눔고딕'의 경우에는 '나눔고딕 Bold'를 제공하기 때문에 font-weight:bold 로 하더라도 폭 변화가 없습니다. '맑은 고딕'이 설치되어 있다면 아래 예제에서 굵게 하여도 ..
Customize Android Browser Scaling with target-densityDpi Customize Android Browser Scaling with target-densityDpi Webkit 사용 브라우저들 이미지 뭉개지는게 DPI 조정 때문이었구나. 메타 태그를 쓸 때 target-densityDpi를 device-dpi로 지정해주면 된다. 물론 이후의 가변폭을 위한 스케일링 같은건 자기가 알아서 해야한다. 자세한건 링크 참조.출처 : http://khrislog.net/post/3873961648/customize-android-browser-scaling-with
페이지 종류별 인클루드 방법(php, jsp, asp, html include) PHP JSP (추천:include directive)include directive include action include direcitve 는 translation phase 에서 include 된다. include action 은 request phase 에 include 된다. include directive 가 더 빠르다. 때문에 include 되는 파일이 빈번히 바뀌지 않는 한 성능 향상을 위해서 include directive 를 쓰는 것이 좋다. jsp 파일의 글자가 깨지면 아래줄을 최상단에 넣어 주면 된다. ASP (추천:절대경로)절대경로 상대경로 HTML 출처 http://hyeonseok.com/pmwiki/index.php/Main/Include ASP에서 인클루드 하는 방법 2가..
아이폰 관련 가로,세로 모드시에 선택적 CSS파일 가져올수 있도록 하는 자바스크립트 아이팟터치/아이폰 ( 4세대 미만 ) 에서는 보통 가로 320 px, 세로 480 px 입니다. 그러므로 CSS파일 2개를 제작해주셔야합니다. 하나는 가로 320 px 로 지정하셔서 헤더,미들,푸터 제작후 가로 480 px 로 지정하신후 제작하셔서 2개의 CSS로 다음,네이버,파란,트위터,구글 처럼 애플모바일기기 호환성을 높힐수 있습니다. 소스 상에서는 다음과 같은 자바스크립트로 인식하게 할수있습니다. 위처럼 작성하시면 문제가 될것은 없습니다. 나머지는 여러분들의 몫 입니다.
모바일 웹 사이트 개발 시 기본적 선언부분 출처 - http://w-rn.tistory.com/23 모바일환경을 위해 html,php 페이지 에 작업을 해주셔야할것이 있습니다. 선언시에는 PC와는 다르게 으로 선언해주셔야합니다. 동적인 HTML 페이지를 만들기 위해서 이죠. ^^* 선언 하셨다면 그 아랫줄에 이렇게 작성해주시기 바랍니다. 그다음부터는 HEAD, BODY를 작성하셔야 합니다. 다만 문제가 될것은 사이에는 반드시 가 추가되어야 합니다. 그리고 아이팟터치/아이폰 환경의 사용자들은 홈화면에 바로가기를 추가할수 있고, 아이콘을 나타내려면 와 같이 표시하셔야합니다. 정도의 사이즈로 나타내주시면됩니다. 자, 이제 body부분을 작성해야합니다. 가로,세로 모드를 구분하기 위해서는 새로바뀐 형식으로 작성하셔야합니다. 이제, 기초적인 페이지 준비는..
모바일 웹디자인 시 png에서 8bit, 24bit 차이와 용량을 줄이는 방법 출처 - http://blog.naver.com/khihaho?Redirect=Log&logNo=50003988002
[모바일웹] 모바일 UX 디자인에 대한 명쾌한 요약본 출처 - http://naebon.blog.me/150095762460 모바일UX디자인 실무 - Juan Sanchez 모바일 웹을 준비하려먼 개발도구도 잘 알아야되겠지만, 그 보다 먼저, 기획의 일련의 과정으로 사용자를 전적으로 배려한 UX디자인에 대한 의견이 정해져야 하겠습니다. 앱을 만들고 유튜브에 홍보 동영상을 올린다던지, 홍보용 트위터를 만드는 것도 좋지만 가장 큰 앱 홍보는 앱UX 가 아닐까 생각합니다. 윈도폰7의 UI특성을 반영한 UX디자인 폼입니다. 아이폰 등이 각각의 페이지를 슬라이드식으로 전환하는 반면, 윈도폰7은 옆으로 긴 화면을 좌우로 스크롤하는 페이지형태(Metro Design Concept - HUB style)를 지향합니다. HTML5이후 웹에서는 거의 사용되지 않는 Layer..
[Mobile] 모바일 웹 개발, 화면 확대 방지 viewport 출처 : http://htglss.tistory.com/66 모바일 웹을 개발하기 위해서는 일반 컴퓨터 환경과는 약간 다르기 때문에 고려해야 할 사항들이 몇가지 있습니다. 오늘은 처음으로 모바일 웹에 대해 이야기 하고자 하는데요. 모바일 웹이 일반 웹과 다른 것 중 가장 중요한 것은 접속하는 환경적인 차이가 너무 확연하게 크다는 것입니다. 이미 웹 표준이 대두되면서 크로스브라우징 문제가 많이 있었는데요. 우리나라의 인터넷 익스플로러 기반으로 개발된 많은 웹페이지가 다른 브라우져(파이어폭스, 사파리, 크롬, 오페라 등)에서 많이 깨지게 되는 현상입니다. 그래도 그나마 그것은 비슷한 컴퓨터 환경인데 모바일 환경은 그 차원이 달라집니다. 우선 OS부터에서 매우 다양하고, 마우스가 없으며 키보드가 제한적입니다...
CSS 높이(Height) 100% 맞추기(브라우저 창크기에 맞춰서) 높이 100% 첫번째 Hack을 사용한 100% 마추기 기본 소스 일단 DTD설정후 높이 100%라는것은 브라우저의 높이를 기준으로 하기때문에 container에 100%를 주면 전체 html의 높이는 gnb+ container + footer이 되어서 화면의 100%를 넘어선다 그럼 어떻게 잡아주는것이 좋을까? 먼저 DTD설정을 확인한다. (거의 필수) 본인은 DTD XHTML 1.0 Transitional 제작했다. (일단 많이 쓰이니깐..) 처음해줄것은 html과 body를 높이 100%를 주는것이다. Element같은경우 최상위의 높이를 기준으로 삼기떄문에 최상위인 html과 body에 높이 100%를 설정해준다 html, body {height: 100%; margin: 0; padding:0;..
CSS로 이미지파일 필요없이 라운드 테이블,DIV 만들기 예제만 봐도 충분히 알수 있다.... 맨처음 도대체 어떤 원리인가 했는데... 내가 이해한 바로는...픽셀하나하나로 장난치는 것뿐이라는 거... 어렵지 않다...ㅋㅋ 이미지 없이 라운딩 박스 표현하기! 이미지 없이 라운딩 박스 + 보더 표현하기!
mms 동영상 다운로드 방법(Net Transport 사용) 출처 - http://blog.naver.com/knowsky?Redirect=Log&logNo=90003396346 인터넷을 사용하다 보면, http://~ 대신 mms://~로 시작하는 동영상자료가 있다. 이 mms://~ 영상을 다운로드 받으려고 하면, 좀처럼 다운로드가 되지 않는다. 이에 대한 해결책으로써 Net Transport라는 프로그램을 써서 다운로드 받는 방법을 설명하고자 한다. 1. Net Transport 다운로드 http://www.xi-soft.com/download.htm 이 사이트에 접속하면 다운로드를 받을 수 있다. 여기서는 90일간 무료사용 가능한 프로그램을 다운로드 받을 수 있다. 2. 프로그램을 install 다운로드 후 NXSetup_multi.zip 을 압축해제하고,..
html 문서 안에 다른 html 문서 삽입하기 1. 확장자 .htm, .html안에 삽입시 사이에 코드 삽입 2. 확장자 .jsp 사이에 코드삽입 -> top2.html을 인클루더 시켜 원본 파일에 삽입
위로
아래로

티스토리툴바