본문 바로가기

css관련기록

a:focus, button:focus outline: 3px solid #ed77ac; 키워드 접근시 영역에 보더값을 줘서 좀더 선명한 선을 나타낸다 더보기
ie6과 ie7에서 li영역 표시는 되는 부분 보기와 같이 상단에 여백 영역이 생기는 경우가 생겼다 background로 줄 이미지를 띄우려고 임의로 html에 . 영역을 잡고.. 그안에 값으로 백그라운드 이미지를 포지션으로 띄웠는데.. ie7 과 ie6은 위와 같이 li부분을 영역으로 표시해버린다.. 임의로 생성한 li 영역을 지우고 보니 정상적인 영역으로 표시되었다.. 더보기
text-aling:center 부모에 자식을 text-align:left후 중앙 정렬 .Middlebg {background:url("../images/sns/Weekly_Middlebg.jpg") left top repeat-y; text-align:center; width:100%; float:left;} .contFont {width:630px; letter-spacing:-1px; text-align:left; margin:0 auto; line-height:18px;} 위와 같이 상위에 text-aling:center;를 잡은 상태에서 하단에 글자를 text-align:left; 후 width값을 지정후 margin:0 auto로 중앙 정렬을 했다. 내용 자체를 중앙 정렬하는것도 일이구나..;;; 더보기
ie 6 버그 *zoom:1; 상단에 p값에 float을 주고 하단에는 dl 값에는 .sns01 {overflow:hidden; display:block;} 값으로 밀어 넣었다. 모든 브라우져들은 말처럼 상단에 float값의 영향으로 display:block 값이 먹은 하단의 dl값이 위로 올라가 붙는다.. 그런데 ie6에서만 특별나게.. 그 값이 안먹고 위에 이미지처럼 튀어 나온다... dl부분을 블록형성을 한 다음이기때문에 튀어나오면 안되는게 정상이다.. ie6 오류인거 같다... sns01 {overflow:hidden; display:block;*zoom:1; } 찾았으나 다른 방법을 찾았으면 좋겠다.. 더보기
table 에 css border 태그 입히기 #contents tr.Tline th {border-right:solid 1px #9fd0de;} tr 에 클래스를 주고 th나 td에 값을 주면 된다 더보기
ie6에 영역값에 대해서.. ie6에 영역값에 대해서.. ie6에서 정확하게 콘텐츠 영역에 값을 나눠서 width값을 주면 자꾸 틀어진다.. 아마도 영역 값 랜더링이 다른듯 싶다.. 다른 브라우져에서는 다 정상적으로 출력 width 값 부분을 따로따로 줘야했는데.. 그렇게 않하고 한쪽에 width 값 자체를 빼버렸다.. 그러니깐.. 적용이 되는 신기한..-_-;; 더보기
익스플로러 랜더링 모드 http://hsmtree.kr/t/205 더보기
크로스 브라우징 할때의 브라우저별 버그들 float의 방향과 같은쪽으로 margin을 주면 ie6에서는 더블마진이 발생한다. – 아예 다른방향으로 마진을 주는게 정답이지만..해결방법은 float부분에 display:inline;을 쓴다. ie6에서 position:relative;가 홀수일때 absolute한 놈의 마지막 가장자리 1px이 늘어난다. – relative를 짝수로 쓴다 =ㅁ=; ie6의 문자 중복 버그. 연속으로 float된 놈 사이에 display:none;이나 input type=”hidden”이나 주석 등이 포함 되면 문자의 끝부분이 반복되는 버그. – 숨겨진놈 전의 float부분에 display:inline;을 쓴다. ie는 haslayout이라는걸 갖는다. – 항상해제하는 법을 기르자! 해제하는 법은 하단에 기술 하겠다... 더보기
xp에서 갑자기 ie7에서 내용이 안 보일때 uft-8로 제작된 소스인데.. 제가 크로스브라우징을 위해.. 가상xp를 설치했거든요 (본래 OS는 윈도우 7) 그런데 xp에서 익스플로러 7을 테스트 하다가.. 갑자기 익스플로러 화면에 아무것도 뜨지 않더군요.. 소스는 분명 그대로 있어서.. 특별히 문제될게 없어보였는데.. 아무것도 보이지 않아서.. 이것저것 건드리다보니.. 상단에 --------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------ 이부분을 지웠더니.. 엑박 표시는 .. 더보기
이미지 자를때.. 참고사항 이미지 자를때 나에 경우는 정확하게 사이트에 맞추어서 슬라이스를 하는 편이다.. 이번에 안전보건공단 지킴이를 작업하면서 버튼 부분에 이미지를 코딩하다보니 ie6,7에서는 이미지에 아래가 잘려 나오는 경우를 보았다.. 처음에는 코딩에 문제인줄 알고 이것저것 만져봤지만.. 결론은 이미지가 정확히 슬라이스 된게.. 익스 6 7 버전에서 구현될때 약간 잘려서 나오는듯 싶다.. 나중에 좀더 문제가 생기면 한번더 생각해봐야겠다. 더보기
ul li와 p를 통해서 들여쓰기할때 ul li와 p를 통해서 글자들을 나열할때.. 들여쓰기 조정을 위해.. 를 자주 써주었다.. 결론은 다른 브라우져.. 특히 ie6, 7에서 태그가 먹지 않는 증상이 자주 발생했다.. 이때 p값으로 되어있는 글들을 전부 ul li값으로 변경하고 text-indent로 해결을 하긴 했지만.. 확실한 답은 아닌듯 싶다.. 들여쓰기가 이렇게 어려운줄 몰랐다..-_-; 다음에는 크로스브라우징을 생각하고 제작해야겠다.. 더보기
colgroup 에 width 값 안먹는 증상 출처 : http://stspace.tistory.com/319 caption 에 position값이 먹어 있으면 크롬, 사파리에서 colgroup 이 적용되지 않는다.. caption 값에 position값을 없애기 위해 display:none 같은 경우 보조기기에서 읽지 못한다고 한다.. (해본적 없습;;) 적용값은 이렇게.. width:0; height:0; padding: 0px; margin: 0px; visibility: hidden; 더보기
핵에 대해서 크롬 적용 핵 @media screen and (-webkit-min-device-pixel-ratio:0) { .qwer { margin-top:-27px } } 파폭 적용 핵 .qwer, x:-moz-any-link, x:default {margin-top:-30px;} - 파폭 전용 핵이나 ie7 까지 영향 받음 ie 6 전용 핵 .qwer {margin:10px; _margin:5px} ie 7 전용 핵 *:first-child+html .qwer {} ie 8 핵 (ie6,7도 인식) .qwer {margin:10px; margin:5px\9} 더보기
ie6 png 추가 태그 ie6 파이어폭스 web Developer를 통해서 경고 안 뜨는거 확인 ------------------------------------------------------------------------------------------ IE6 PNG background없애기 Designer/UX / 2008/02/21 19:10 방법1 : ------------------------------------------------------------------------------------------------------------- 방법2 ---------------------------------------------------------------------------------------.. 더보기
파이어폭스, 크롬에서도 IE처럼 플래시 투명배경 처리 방법 파이어폭스, 크롬에서도 IE처럼 플래시 투명배경 처리 방법 더보기
address 태그에 대해서 address 태그를 쓸 경우 생겼던 오류.. div안에 address 태그를 써서 주소 부분을 처리 하려고 했었다.. 일반 html 파일에서는 당연히 div 영역안에 address영역이 잡혔지만 *.inc (공통영역) footer 편집을 위해 붙여넣었을때는.. 영역이 감싼 div와 address 영역이 따로 잡히는 이상한 경우가 발생했다.. address 부분이 html5로 인식되어 독립 영역으로 인식이 되어..div안에 감싸져 있는 상태인데도. div를 벗어나 따로 독립영역이 형성되었다. div로 변경하고 class 로 처리를 하였지만.. 좀더 자세한 자료를 찾아봐야할듯 싶다.. address 태그 ADDRESS 태그 - block level element 브라우저 (ie6,7,8,9, firefox.. 더보기
중앙정렬을 위한 방법 중앙 정렬을 위해 margin:0 auto를 주지만.. 만일 상단과 중단 하단(1200px)에 width height 값이 다 따로 적용 되는 경우가 있다 따로 적용 되므로 중앙정렬을 시켜도 막상 화면상으로 보이는 정렬은 약간 밀린듯하게 보여진다 이때는 따로 잡은 영역값에 padding- right 값을 임의로 [예]100px 주고 전체값을 1100px 을 준다.. 전체 값이 지정이 잘못되면 마우스로 창에 크기를 줄였다 늘렸다 할때 중앙정렬값이 변화가 생기니.. 그점 유의 하자.. 예] 중상단 1200px 하단1000px 이렇게 잡히면 하단에 구조는 창이 움직일때 따라 움직이는 경우가 발생한다.. 더보기
select 관련 내용 select문 링크 거는 법 병원소개 병원 인사말 병원소개 하워드이념 연혁 하워드사람들 협력병원및 기관 채용안내 구비서류 select문은 중앙정렬이 안된다고 한다.. 중앙정렬을 위해서는.. 임의로 표를 주는 수 밖에 없다고 한다.. 더보기
mailto 태그 이 메 일 : > 참 조 : > 숨은 참조 : > 메일 제목 : 본문 내용 : 메일 내용을 입력하세요!! [출처] mailto 태그 확실하게 사용하기 |작성자 무적쥔장 mailto의 사용법 기존의 의 사용법은 모두 알고 있지만, 옵션 기능이 있습니다. . &cc= 를 추가하면 참조인에 주소가 들어갑니다. . &bcc= 를 추가하면 숨은 참조가 들어갑니다. . &subject= 를 추가하면 제목이 들어갑니다. . &body= 를 추가하면 내용이 들어갑니다. ex) 확장 이메일 [출처] mailto의 다양한 기능|작성자 후다닥 더보기
글자 자르기 (ellipsis, text-overflow, white-space nowrap) 테이블에서 글자 자르기시에 유용한 팁 .hideextra { white-space: nowrap; overflow: hidden; text-overflow:ellipsis; } Column 1Column 2 this is the text in column one which wraps this is the column two test 위와 같은 코드가 있을 경우 글자를 올바르게 자르기 위해서는 테이블의 기본 속성중에 Cell 속성을 사용자의 정의에 따르도록 하기위해 테이블 레이아웃 속성을 fixed로 해준다. This trick here is using the esoteric table-layout:fixed rule This CSS ought to work against your sample HTML:t.. 더보기
플래시 폰트 오류 플래시 링크를 자바스크립트로 걸 경우...라이브러리 션 스크립트에 URL 확인과 폰트체 확인 그리고 액션 프래임에 이미지값 주소 확인. loadfont.swf 플래시 파일을 생성해서 따로 글자 폰트 지정해서 사용 플래시에서 폰트 추가로 공유가 가능.. 폰트.swf 오류시 배경에 액션 효과는 나타나지만 폰트는 보이지 않음... 더보기
iframe 값 적용 모바일 페이지 더보기
모바일 asp select문 인클루드 모바일 asp select문 인클루드 strBodyhtml = ftnHtmlLoad("/sub/Sub_l.html") dicParams.RemoveAll dicParams.Add "optForeword", 더보기
플래시에 자바스크립트 링크값 쉽게 확인 방법 플래시에 자바스크립트 링크 걸때 링크값 확인 방법 곰플레이어를 설치 - 플래시 swf 파일 실행 - 링크값 실행 - 클링후 윈도우창이 위와 같이 떴다가 바로 없어진다. 캡쳐후 링크값 확인하면됩니다 참조 - 제이쿼리 관련 블로그 http://www.ncube.net/2190 더보기
창 크기 조절해주는 스크립트 팝업창이나 새창으로 뜬 페이지는 마우스로 조절할 수 가 있는데 다음과 같은 태그를 쓰면 창 크기가 고정되어서 사용자가 마우스로 조절 할 수가 없습니다. 문서의 안에 삽입합니다. 괄호 안의 숫자는 창의 크기입니다 원하는 창의 크기를 써 넣으면 됩니다. 더보기
익스 8 버전별 틀어지는 현상 익스 8 버전으로 코딩 작업을 하는데.. 틀어지는 현상이 자주 발생한다.. 그중 제일 황당했던건.. 같은 익스 8을 사용하는데.. 컴퓨터에 따라서 틀어져버리는 현상이다.. 이때는 각 블록에 width 값과 height 값을 확인해서 제대로 맞추어서 적용을 다시 시켜주고.. float 값을 다시 한번 확인해본다.. 절대로.. 포기하지마라... 답은 있다.. 현명한 질문에는 그에 대한 답도 현명한 셈이다.. 이건 내가 익스 8 버전 이건 프로그래머쪽 익스 8 버전 더보기
파폭, 익스 모두다 제대로 가운데 정렬하기 우리가 보통 가운데 정렬할 때 쓰는 것은 margin:0 auto; 파폭에서는 제대로 되지만 익스에서는 margin:0 auto; 가 먹지 않는다고 합니다. 일종의 IE 버그 그래서 해결한게 text-align:center; 이렇게 해결하시면 되는데 문서 및 레이아웃까지 가운데 정렬이 되므로 그안에 들어가는 레이아웃에는 text-align:left; 를 따로 주셔야 합니다. 파폭과 익스 동시에 가운데 정렬 지원되는 방법은 1 body { text-align:center; } 2 #wrap{ 3 width:900px; 4 margin:0 auto; 5 text-align:left; /* 이부분은 텍스트를 왼쪽으로 정렬시키는 역할 */ 6 } 더보기
table 오류 div태그로 감싸고 블럭 적용을 해도 상단 태그에 값을 안준 상태에는 하단 background 에 영향을 주어서 같이 감싸주는 오류가 나타난다. 더보기
charterset이 utf-8로 되어 있으면 플래시는 6.0버전에서 나오지 않습니다 알아두자... charterset이 utf-8로 되어 있으면 플래시는 6.0버전에서 나오지 않습니다 반나절 삽질하다.. 성덕희 팀장이 알려주신 방법... 다행스럽게도 이걸로 해결 됐습!! 더보기
li 게시판 기록 안녕하세요 선생님,,, 2012. 01. 02 안녕하세요 선생님,,, 2012. 01. 02 안녕하세요 선생님,,, 2012. 01. 02 더보기