css 썸네일형 리스트형 파이어폭스의 줄바꿈 처리 Firefox line break 정말 오랜만에 쓰는 포스트이네요. 어제이지요? 어제 파이어폭스의 새로운 버전인 파이어폭스4가 세상에 나왔습니다. 출시 한지 얼마 되지 않아 엄청난 다운로드를 기록해서 이슈가 되었는데요. 더 빨라지고 더 좋아졌다고는 하는데 그것은 얼마만큼 써 봐야 알 수 있는 이야기 같습니다. 오늘 할 이야기는 최근에 있었던 파이어폭스의 줄바꿈에 대한 이슈에 대해서 입니다. 일전에 포스트 했던 [CSS] 텍스트 줄바꿈 처리 word-break, white-space 의 내용에서 이야기를 했던 내용이긴 한데요. 궁금하시면 먼저 대강 살펴보시고 오시는 것도 좋을 것 같습니다. 일을 하다보면 여러가지 상황을 고려해야 하는데, 정말 상식적으로 이해가 안가는 상황까지 고려해야 하는 경우가 있습니다. 저의 이번 경우는 설문 만드는 .. 더보기 [HTML/CSS] 늘어나는 박스 만들기 HTML과 CSS를 이용하여 늘어나는 박스를 만들어 보았습니다. 원리를 간단히 설명 드리자면, 최대로 늘어나고자 하는 크기의 큰 이미지를 만들고 div 앨리먼트를 여러겹으로 겹쳐서 늘어나는 부분의 둥근 모서리가 들어나게 하는 방식 입니다. 말로 아무리 설명해봐야 이해가 잘 안되지요. 그렇다면 직접 한번 볼까요? 여기에 내용이 들어갑니다. 이렇게 두겹으로 마크업을 해주면 두 방향으로 늘어나는 것을 해결 할 수 있습니다. 예를 들어 "좌우" 나 "상하" 같은 두방향 말입니다. padding 을 이용하여 안에 있는 앨리먼트를 약간 밀어내어 모서리의 둥근 배경이 보이게 하는 방식입니다. div.box_v {width:400px; background:url(box_v.gif) no-repeat left top; .. 더보기 [jQuery] jQuery를 이용한 레이어 팝업 jQuery를 이용하여 레이어 팝업을 작업해 보았습니다. 접근성에는 약간 안맞는 것 같지만 여러모로 쓸모는 많은 것 같습니다. 뜨는 창을 position:absolute; 와 left:50%; top:50%; 를 이용하여 가운데 배치하였고 jQuery를 이용하여 앨리먼트의 높이와 넓이를 가져와서 컨텐츠의 크기가 어떻게 되어도 항상 가운데에 위치하게 작업하였습니다. 다만 안쪽에 들어오는 컨텐츠에 width 값을 고정을 준다면 더 안정적으로 돌아갈 것 같습니다. jQuery의 fadeIn() 과 fadeOut() 을 이용하여 좀더 예쁘게 꾸며보았습니다. 더보기 [jQuery] CDN : Contents Delivery Network for jQuery (제이쿼리 코드 서버) - 라이브러리를 불러와 사용하는 법 jQuery는 정말 좋은 라이브러리 같습니다. 위의 그림에서 볼 수 있듯이 작은 용랼으로 CSS3를 준수하고 크로스브라우징을 거의 완벽하게 구현해줍니다. CSS 스타일링을 비롯해 약간의 애니메이션까지 구현할 수 있으니 정말 금상첨화 입니다. 일단 이러한 jQuery를 사용하기 위에서는 문서상단에 이 라이브러리를 불러와야 하는데요. 물론 파일을 받아서 자신이 사용하고자 하는 서버에 올려 사용할 수도 있지만. CDN(Contents Delivery Network)이란게 있더라구요. 그래서 오늘은 jQuery CDN Host 에 대해 알아볼까 합니다. 1. jQuery CDN http://code.jquery.com/jquery-1.4.2.min.js (Minified version) http://code.j.. 더보기 인풋박스(input) 기본입력 설정 ime-mode 인터넷에서 서식을 작성하다 보면 인풋박스( )에 글을 쓸때, 한글을 쓰려고 하면 영문이 나오고, 영문을 쓰려고 하면 한글이 나오고 해서 좀 답답할 때가 있을것이라 생각합니다. (저만 그런건가?) 아무튼, 그럴때 사용자를 조금만 더 생각한다면 답답하지 않고 사용하게 편할 수 있을 것 같습니다. 사용자를 배려하는 웹사이트 ㄱㄱ 출발!! 아주 간단합니다. 인풋박스를 가리키는 스타일에 "ime-mode"라는 속성을 주면 되는데요. 아래의 표를 참고하면 되겠네요. inactive default 로 영문모드 active default 로 한글모드 auto 한/영 중 선택된 모드 disable 영문만을 사용할 수 있는 모드 구체적인 사용방법은 이렇습니다. 이런식으로 주면 되는데요. 뭐 어차피 스타일이기 때문에 이왕이.. 더보기 [jQuery] jQuery를 이용한 자주묻는질문(FAQ) jQuery를 이용하여 자주묻는질문(FAQ)를 동적으로 구성하여 보았습니다. 마크업을 할 때는 항상 어떤 앨리먼트로 마크업을 할까 하는 고민을 하게 되는데, 딱히 완벽한 정답은 없는 것 같습니다. 이번에는 definition list 를 사용해보았습니다. 의미를 따져보면 이런 의미인데 괜찮지 않을까요? 그렇게 해서 에 질문을, 에 답변을 해서 마크업을 했습니다. 그리고 jQuery의 sildeDown() 을 이용하여 보여지는 것을 나타냈습니다. 더보기 [CSS] 텍스트 줄바꿈 처리 word-break, white-space 작업을 하다보면 텍스트가 정해진 width를 넘어가는 경우 어떻게 처리해야 하나 고민이 될 때가 있습니다. 그럴 때는 상황에 따라서 이 것들을 사용해서 해결해주면 좋을 듯 합니다. word-break word-break 는 말 그대로 단어를 자르는 겁니다. 기복적으로 줄이 넘어갈 때는 단어단위로 잘려서 넘어가게 되어 있습니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 word-break 를 사용해주면 줄바꿈이 가능하게 됩니다. .selector {word-break:break-all;} 위와 같은 속성을 주게되면 위의 그림의 아래 부분과 같이 단어 중간에서도 줄바꿈이 가능하게 됩니다. 위의 그림이 잘 이해가 가지 않는다면 이.. 더보기 CSS 기본기 선택자 CSS에서의 선택자의 종류는 다양하다. 하지만 주로 사용하게 되는 선택자는 3가지로 압축할 수 있다. 우선 간략하게 이야기하자면, 태그명, 클래스명 그리고 아이디를 들 수 있다. 우선 태그명은 해당 태그명을 가진 모든 앨리먼트를 선택할 때 유용하게 사용된다. 예를 들면, p {margin:0; font-size:13px;}위와 같이 사용하게되면 p라는 태그명을 가진 모든 앨리먼트에 margin과 font-size가 적용된다. 이 방법은 CSS를 초기화 할 때 사용하기 좋다. 두번째로는 클래스명인데 이 것이 가장 많이 사용하는 방법인 것 같다. 우선 다음과 같이 태그에 클래스명을 주고 또 다음과 같이 선택자를 사용해 접근할 수 있다. .selector {border:1px solid #FAA;}위와.. 더보기 이전 1 다음
