Internet World/HTML/CSS 썸네일형 리스트형 파이어폭스의 줄바꿈 처리 Firefox line break 정말 오랜만에 쓰는 포스트이네요. 어제이지요? 어제 파이어폭스의 새로운 버전인 파이어폭스4가 세상에 나왔습니다. 출시 한지 얼마 되지 않아 엄청난 다운로드를 기록해서 이슈가 되었는데요. 더 빨라지고 더 좋아졌다고는 하는데 그것은 얼마만큼 써 봐야 알 수 있는 이야기 같습니다. 오늘 할 이야기는 최근에 있었던 파이어폭스의 줄바꿈에 대한 이슈에 대해서 입니다. 일전에 포스트 했던 [CSS] 텍스트 줄바꿈 처리 word-break, white-space 의 내용에서 이야기를 했던 내용이긴 한데요. 궁금하시면 먼저 대강 살펴보시고 오시는 것도 좋을 것 같습니다. 일을 하다보면 여러가지 상황을 고려해야 하는데, 정말 상식적으로 이해가 안가는 상황까지 고려해야 하는 경우가 있습니다. 저의 이번 경우는 설문 만드는 .. 더보기 Webkit 기반의 Safari나 Chrome에서 iframe의 스크롤바 제거 요즘에 국내에도 아이폰이 개통되고 또 이번에 아이폰4 또한 나오게 되면서 국내에서도 애플의 인지도가 많이 높아지고 있습니다. 또한 맥을 쓰시는 분들도 많고 그로인해 Webkit 기반의 브라우저인 사파리를 사용하시는 분들 또한 많아졌습니다. 빠르다고 소문이 나있는 사파리와 크롬을 다들 써보셨을 텐데요. iframe을 사용할 때 이상하게 크롬과 사파리에서는 스크롤바가 나오는 현상을 보실 수 있었을 것입니다. 분명히 iframe에 overflow:hidden; 이라는 속성을 주었는데도 스크롤바는 사라지지 않는 것을 볼 수 있습니다. 그래서 검색을 해보았습니다. 그랬더니 이런 결과가 나왔는데요. I have an iframe on www.mydomain.com that points to support.mydom.. 더보기 HTML5 요즘 이슈를 일으키며 큰 주목을 받고 있는 HTML5, 웹의 새로운 전환점이 될지도 모르는 HTML5는 도대체 무엇일까요? 여기에 플래시와 HTML5를 비교하는 데이터가 나와있습니다. HTML5 와 플래시의 행보가 기대되는데요. 둘중에 어떤 것이 살아남게 될지... 개인적인 생각으로는 모션이 정말 강조된 부분에는 플래시를, 꼭 그렇지 않은 곳에는 HTML5가 주류를 이루지 않을까 싶네요. 아무튼 가장 중요한 것은 브라우저 지원현황. 으윽....... 하지만 현재의 대세는 HTML5. 계속 관심이 가는 군요. 더보기 [HTML5/CSS3] 트위터 실패 고래 요즘 많은 분들이 트위터를 사용하고 있습니다. SNS의 대표적인 서비스인데요. 일반 개인도, 유명인도, 기업도 트위터를 통해 다른 사람들과 소통하려고 하고 있습니다. 트위터는 기존의 방식과는 조금다른 완전 개방적인 구조를 가지고 있고, (보호 설정을 하지 않는다면) 팔로잉이라는 조금은 색다른 방식으로 여러 사람들이 네트워크로 연결이 되는데요. 그리고 이름을 통해 해당하는 사람을 부를 수도 있습니다. 아무튼 조금만 적응하게 되면 사용하기 쉬운 방법과 스파트폰을 통한 어플리케이션의 확대로 더 많은 사람들이 이용하고 있는데요. 그래서 그런지 트위터에 접속할 때 많이 느리거나 접속에 실패하는 경우가 종종 있습니다. 트위터를 좀 검색해야 할 때 그러면 조금은 난감한데요. 트위터에 접속이 되지 않을 때는 이런 화면.. 더보기 CSS3 지원하는 브라우져 열심히 썼다가 죄댜 날려먹었습니다. ㅜㅜ 새로운 기술은 우리의 삶을 더 편안하게 해줍니다. 특히 기술 부분에서의 새로운 것은 만드는 사람들로 하여금 더 쉽고 편하고, 사용하는 사람에게는 더 많고 더 멋진 경험을 할 수 있게 해줍니다. 그래서 저는 항상 새로운 것을 좋아합니다. 새로운 것 그것 뭐 적응하는데도 힘들고, 모두 지원하지도 않는데 왜 사용하느냐는 사람들도 있지만, 저는 그 단점들 보다는 새로운 것이 주는 효율성 기능성 등의 많은 혜택이 더 많다고 생각하기에 저는 새로운 것을 좋아합니다. HTML5 CSS3 도 마찬가지 입니다. 지금은 모든 브라우저에서 지원하지는 않지만, 사용함으로 인해서 정말 많은 효율성을 얻을 수 있었습니다. 예를 들어 한개를 가지고 크그에 따라 움직이는 박스를 만들 수 있었.. 더보기 [HTML5] HTML5 로 만든 사파리 Welcom 동영상 사파리4를 인스톨하고 처음 실해했을 때 나오는 Welcome 영상입니다. HTML5로 만들어 졌다고 하는데요. http://www.apple.com/safari/welcome/ 사파리4를 설치해야 보실 수 있습니다. 더보기 [HTML] DTD DOCTYPE 과 HTML5 HTML 문서의 표준을 지정하기 위해 선언해주어야 하는 DTD DOCTYPE 그것이 무엇일까요? DTD 는 Document Type Definition 문서의 타입을 정의하는 것 입니다. 보통 독타입에는 몇가지가 있는데요. Strict - W3C가 의도했던 문서 타입 (엄격한 규격) Strict 타입은 W3C가 스타일시트 사용을 장려하기 위해 단계적으로 사라질 표현(presentation)에 관한 태그와 속성을 배제한 문서 타입입니다. 제작자는 가능하다면 strict 타입을 사용해야 한다는데요. Transitional - 기존에 만들어진 문서들과의 호환성을 위해서 만들어짐 (과도적인 규격) 과거의 모든 문서들을 Strict DTD에 맞게 바꾸려면 엄청난 변화가 필요하므로 그 중간 단계로 Transitio.. 더보기 [HTML/CSS] 늘어나는 박스 만들기 HTML과 CSS를 이용하여 늘어나는 박스를 만들어 보았습니다. 원리를 간단히 설명 드리자면, 최대로 늘어나고자 하는 크기의 큰 이미지를 만들고 div 앨리먼트를 여러겹으로 겹쳐서 늘어나는 부분의 둥근 모서리가 들어나게 하는 방식 입니다. 말로 아무리 설명해봐야 이해가 잘 안되지요. 그렇다면 직접 한번 볼까요? 여기에 내용이 들어갑니다. 이렇게 두겹으로 마크업을 해주면 두 방향으로 늘어나는 것을 해결 할 수 있습니다. 예를 들어 "좌우" 나 "상하" 같은 두방향 말입니다. padding 을 이용하여 안에 있는 앨리먼트를 약간 밀어내어 모서리의 둥근 배경이 보이게 하는 방식입니다. div.box_v {width:400px; background:url(box_v.gif) no-repeat left top; .. 더보기 인풋박스(input) 기본입력 설정 ime-mode 인터넷에서 서식을 작성하다 보면 인풋박스( )에 글을 쓸때, 한글을 쓰려고 하면 영문이 나오고, 영문을 쓰려고 하면 한글이 나오고 해서 좀 답답할 때가 있을것이라 생각합니다. (저만 그런건가?) 아무튼, 그럴때 사용자를 조금만 더 생각한다면 답답하지 않고 사용하게 편할 수 있을 것 같습니다. 사용자를 배려하는 웹사이트 ㄱㄱ 출발!! 아주 간단합니다. 인풋박스를 가리키는 스타일에 "ime-mode"라는 속성을 주면 되는데요. 아래의 표를 참고하면 되겠네요. inactive default 로 영문모드 active default 로 한글모드 auto 한/영 중 선택된 모드 disable 영문만을 사용할 수 있는 모드 구체적인 사용방법은 이렇습니다. 이런식으로 주면 되는데요. 뭐 어차피 스타일이기 때문에 이왕이.. 더보기 [HTML5] HTML5 Canvas and Audio Experiment 애플의 CEO 스티브잡스가 강조하던 HTML5 를 이용하여 제작된 페이지 이다. http://9elements.com/io/projects/html5/canvas/ 인터넷 익스플로러를 제외한 파이어폭스, 사파리, 오페라, 크롬 등의 최신버전에서 모두 지원한다. 이런 것 들을 보면 정말 플래시의 설자리는 좁아지는 것 같다. 더보기 이전 1 2 다음
