demun(대문블로그)

퍼블리셔/css2011. 2. 21. 06:00

이미지를 처리하는 방법의 결론은 좀더 빠르고 , 가벼운 이미지를 사용하는것입니다. 거기에 접근하는데에 무리가 없어야 한다는 점이죠. 또한 .png 확장자를 이용할때는 ie 6 때문에 투명배경을 사용하지않고 배경색을 입혀서 사용합니다. 배경색을 사용하지 않았을때 ie6 에서 보여지는 것을 예제로 보겠습니다. 아래 이미지중 위의것은 이미지를 만들때 배경색을 입혀서 만든것이고 , 아래것은 배경을 투명하게 해서 만든것입니다. 그리고 ie 6 으로 본것입니다. 물론 다른 브라우져는 똑같이 보여집니다. 이는 많이 사용하는 둥근 버튼의 경우에도 적용됩니다. 한가지 예로 제 블로그에 사용되는 이미지에는 모두 배경색이 적용된다음 그 위에 이미지가 그려진 것입니다. 위의 3자가 만들어진 것을 포토샵으로 보시면 도움이 되실..

퍼블리셔/css2011. 2. 21. 06:00

이미지를 처리하는 기법으로는 여러가지 방법이 있는데 하나 하나 짚어보겠습니다. 우선 저장할때 처리하는 방법을 먼지 짚어보겠습니다. 이미지는 용량문제로 .gif 파일을 주로 이용합니다. 이미지 파일을 크기를 떠나서 선명도가 좋기로는 아래와 같습니다. .gif < .jpg < .png 하지만 선명도가 좋으면 좋을수록 용량이 커지는 단점이 있지요. 그래서 .gif 파일을 많이 이용합니다. 또 한가지 투명한 PNG 파일은 ie6 에서 배경이 회색으로 보인다는 단점이 있습니다. 이또한 해결하는 방법으로는 자바스크립트를 이용하곤 합니다. 마찬가지로 투명한 PNG 파일이 ie6 에서 배경이 회색으로 보이는것을 방지하기위해 자바스크립트를 포함하면 그만큼 무거워지는것은 당연한 일이지요. 참고링크 IE6 에서 투명배경을 ..

퍼블리셔/css2011. 2. 19. 14:36

float 는 띄우다라는 뜻입니다. 왼쪽으로 정렬, 오른쪽으로 정렬 , 아니면 none. 이런식으로 블럭을 왼쪽이나 오른쪽으로 정렬할때 사용합니다. 이와 비슷하게 position 속성도 있는데요. 이번에는 float 에 대해서 알아보고 IE 는 버그가 있어 다르게 나오는데 이또한 해결법을 알아봅니다. 그럼 속성은 어떻게 되고 어떻게 사용할까요? 아주 간단합니다. 아래처럼 사용합니다. float:left; /* 왼쪽으로 정렬 */ float:right; /*오른쪽으로 정렬 */ float:none; /* float 영향을 받지 않음 */ 이처럼 사용법은 무척간단합니다. 그럼 어떨때 사용할까요? 예를들어 아래처럼 블럭이 있다고 가정합니다. text_box1 text_box2 text_box3 text_box..

퍼블리셔/css2011. 2. 18. 12:15

이글은 어느 분이 질문으로 하신글에 대한 답변 성격이 강합니다. 질문의 요지의 아래와 같습니다. 하나의 div 안에 두개의 div가 존재하고 그중하나는 왼쪽으로 정렬하고 나머지 하나는 오른쪽으로 정렬하는것입니다. 왼쪽으로 정렬하는것은 logo 부분이되고 오른쪽으로 정렬하는 것은 blogMenu 부분이 됩니다. 여기서 logo는 왼쪽으로 blogMenu 부분은 오른쪽으로하고 blogMenu 에서 li는 다시 왼쪽정렬을 해주어야 한다는 점입니다. 질문에 대한 답으로 사진을 올렸었습니다. 참고하세요. 이렇게 말로 하면 이해가 안되니 우선 코드를 보면서 문제를 풀어보도록 하겠습니다. 코드로 보면 아래와 같습니다. 로고부분 네비게이션 부분 즉 해더안에 로고부분을 왼쪽으로 네비게이션 부분을 오른쪽으로 사용한다는 것..

퍼블리셔/css2010. 10. 9. 08:45

며칠전에 이미지에 그림자 효과를 주었습니다. 글을 작성하고도 시간이 없어 발행을 못하네요^^ 그런데 더 지나 좋은 효과를 봐서 따라해 봤습니다. 마우스를 갖다대면 이미지가 커지는 형식이죠. 제블로그에서 이미지에 마우스를 갖다 대어보세요. 어떤 효과가 나는지??? 아무런 효과가 나타나지 않는다면 당신은 익스플로러??? 크롬이나 오페라, 사파리는 정상작동합니다. 각 브라우져마다 어떻게 보여지는지 동영상으로 담아봤습니다. 이미지가 흐려서 안보이시면 원본을 보세요. 여기입니다. 어떤가요 재대로 보이시나요? 예제로 이미지를 하나 삽입해보겠습니다. 마우스를 갖다 대어보세요. 현재 탈렌트 김지수씨가 뺑소니 혐의로 실시간 검색어 순위에 올랐군요. 그래서 김지수 사진을 한장 올려보겠습니다. 마우스를 올려보세요. 이미지가..

퍼블리셔/css2010. 7. 27. 07:33

어떨때 id 에 배경을 주면 배경색이 지정이 안될때가 있습니다. 스타일을 지정할때는 앞뒤 안보고 막 지정을 하다보니 그냥 넘어가곤 했는데요. 이유를 찾아봤더니 다 이유가 있더군요.ㅎㅎㅎ 무슨말이냐??? 예를들어 아래와 같이 마크업을 했을경우. ... ... ... 이럴경우 일반적으로 ul 은 float 로 가로 정렬을 합니다. test 에 배경색을 지정할때 float 된 ul 만을 가지고 있을경우 높이가 0 이기 때문에 배경색이 적용이 안된것처럼 보입니다. 이럴경우 overflow로 해결을 해야합니다. 즉 예를들면 아래와 같습니다. #test1{ background:#ddd; overflow:auto; } 위와같이 하면 배경색이 지정이 되는것을 볼수 있습니다. 물론 다른 방법으로 해결을 할수도 있지만 o..

퍼블리셔/css2010. 7. 23. 06:00

CSS3는 HTML5와 더불어 최신 웹 브라우저들이 함께 채용하고 있는 스타일 표준입니다. CSS3는 HTML5와 크게 관계 있는 부분은 없지만 현대적 웹 기술에 있어서 꼭 알아야할 웹 기술 요소입니다. CSS3는 현재 표준작업중이고 선택자에 대한 부분은 거의 완료되었다고 합니다. 실전 HTML5 가이드에 보면 많은 실전 가이드가 나오는데요. 그중에 이왕이면 많은 브라우져가 지원하고, 간단하게 스킨에 적용할수있는거 몇가지만 테스트격으로 한번 적용해봤습니다. HTML5와 CSS3에 보면 정말 다양한 속성들이 있는데요......조금 다른 이야기지만 이전에 포터블 브라우져를 만들때 플러그인을 따로 제작하거나 적용해서 제작하곤 했는데요. html5와 css3만 지원된다면 어지간한 플러그인은 필요없을 정도로 대단..

퍼블리셔/css2010. 6. 8. 06:00

일반적으로 알려진 속성값은 어디에서든지 쉽게 접하기 때문에 실수가 없지만 간혹 잘 알려지지 않는 값들이 있습니다. 이 값을 그냥 지나치기에 스킨수정이나 레이아웃등을 바로 잡기 힘들때가 있습니다. 그런 것들을 모아봤습니다. 이번 시간에는 마진병합입니다. 1. 마진 - margin 마진은 한 요소에서 외부의 여백을 말합니다. 여기서 외부란 요소의 테두리(border)를 경계로 바깥을 말합니다. 흔히들 외부 여백을 주기위해 마진을 사용하곤 합니다. 여기서 우리가 알아두어야 할것은 바로 마진 병합입니다. 블록 속성을 가진 요소들 사이에 수직상의 마진을 가지고 서로 만나는 경우, 이웃한 수직 마진 사이에 병합이 발생합니다. 이때 병합이란 투명한 마진들 사이에 가장 큰 값에 흡수되듯 다른 작은 마진 값들은 무시됩니..

퍼블리셔/css2010. 5. 27. 09:00

잘 되다가도 IE 를 만나면 레이아웃이 깨지거나 안맞을 때가 있습니다. 그래서 정리해봤습니다. 비공개글인데 그냥 공개합니다. 따로 더 정리하려고했는데. 자꾸 글이 뒤로 밀리는바람에 걍 송고함^^; IE (ie 6.0)의 margin 버그. float 와 margin 이 방향이 같을때 margin이 두배로 나오는 현상이 있을때가 있습니다. 예를들어 float:left margin-left:10px 라고하면 왼쪽으로 margin이 20px 로 나올때가 있습니다. 마찬가지로 float:right; margin-right:10px; 라고해도 같은 현상이 나올때가 있습니다. 이럴때 해결방법 display:inline 를 추가해주세요. IE에서 letter-spacing:-1px; 적용시 br 태그 버그 스타일에서..

퍼블리셔/css2010. 5. 24. 09:00

일반적으로 목록(리스트)를 사용할때 ol, ul, li 또는 dd, dl 을 사용합니다. 그중에서도 스킨에 잘 적용하는 방법중에 하나가 리스트에 블릿(blit)을 배경이미지로 처리를 합니다. 배경이미지 뿐만 아니라 목록의 여백을 처리할때는 주의할점이 있습니다. 어떨때는 브라우져마다 여백의 차이가 있더라구요. 왜 안되는지 모를때도 있었지요.ㅎㅎㅎ 브라우져마다 여백의 차이가 있기때문에 속성을 초기화시켜줘야 한다는 점입니다. 즉 를 사용한다면 ul{ margin:0; padding:0; list-style:none; } /* 이렇게 ul 에서 초기화해주고 li 에서 배경을 적용해줘야 합니다. */ li{ background:url(./images/list.gif) no-repeat 0 0; padding-le..