목록Tip (11)
름름
1. padding - 부모박스의 높이가 제한적이지 않을경우. #box {width:500px; border:3px solid #ccc;}.al {padding:30px; text-align: center;} vertical-align: middle 2. line-height - 부모요소의 높이가 제한되어 있고, 한줄일경우 #box {width:500px; height:60px;line-height: 60px;border:3px solid #ccc; text-align: center; } vertical-align: middle - 부모요소의 높이가 제한되어 있고, 여러줄일 경우 #box {width:500px; height:60px;line-height: 60px; border:3px solid #cc..
html css img {vertical-align: top;} /*4px gab을 위한 처리*/ .innerborder {float: left; overflow: hidden;}.innerborder:hover img {margin:-5px;}.innerborder:hover {border:5px solid blue;} 1. img요소만큼 공간값을 가지기위해 float 지정.2. img에 margin을 -5px을 줌으로써 img를 감싼 a요소의 크기가 상하좌우 -5px씩 줄어듬3. a요소에 overflow:hidden을 주어 img 넘치는 부분을 가림.4. 줄어든 5px만큼 border값을 지정 내부요소에 마진값을 주면 감싼 요소는 그 마진값을 포함하여 넓이를 갖게된다.당근 음수마진값을 주면 외부요소는..
이미지 4px정도 여백은 영어에 아랫첨자가 있기 때문입니다. (EX: 영소문자 g 또는 j 등등)이와 같은 문제는 FF(파이어폭스)에서도 마찬가지이며 해결 방안으로는태그에 style img {vertical-align: top;}을 주어서 해결이 가능합니다. 출처: http://kreiz.tistory.com/entry/div-안의-img에-높이4px공백 [Monochrome]
항목 inline block inline-block 영역 컨텐츠 크기만큼 widthd와 height지정값 지정값이 없을시 부모의 가로값, 세로는 컨텐츠크기 지정값지정값이 없을시 너비 정렬 텍스트정렬에 영향을 받음 margin 과 paddingtable내부의 경우 vertical-align 텍스트정렬에 영향을 받음 박스모델 margin 좌우, padding, border, float margin, padding, border, float margin(auto x), padding, border, float 중첩요소 inline요소만 가능 inline과 block요소 모두가능 inline요소만 가능 특징 포지션이 텍스트와 유사하게 처리됨 양옆에 다른 요소가 올수없음 포지션이 텍스트와 유사하게 처리됨 엘리먼트..
PHPSchool 지앤미님의 글을 퍼왔습니다. http://phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=62075&cwin=#c_62183 송효진님의 댓글 처럼, 저 또한 에만 아이디를 준 후, document.getElementById('myform').a.value 식으로 접근 하는 방식이 좋은 듯 합니다. 원문 -------------------------------------------------------------------------------------------- 위와 같은 태그가 있다고 합시다. 위 태그는 XHTML 1.0 Strict 유효성을 통과할까요? 네. 통과합니다. 다 아시는지 모르겠지만, 저는 input 태그에..
a {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 300px;} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dol..
.box {background: orange;} ul {overflow: hidden; margin:0; padding:0;} li {float: left; list-style: none; width: 25%; position: relative;} li>a {padding: 5px 15px; display: block; text-align: center; color: #000; text-decoration: none;} li>a::before {content:""; width: 1px; height: 15px; border-left: 1px solid #000; position: absolute; top: 9px; left: -1px; } 버튼 버튼 버튼 버튼
ctrl + shift + 따옴표(') ~ 이 안에 커서를 넣고 ~ 위 단축키를 누르면 시작태그와 종료태그를 동시에 수정할 수 있다. ctrl + D 특정단어선택/단어를 드래그한후 ctrl+D를 입력하면 같은 내용이 선택된다. ctrl + enter 다음라인삽입 ctrl + shift + enter 이전라인삽입 ctrl + shift +J 들여쓰기기준으로 선택 ctrl + shift + L 2줄이상 동시입력/행다중선택
float 해제 1. 부모요소에 overflow:hidden *컨텐츠가 넘칠경우 잘림 *width만 지정한 상태에서 overflow: hidden;을 적용하면 컨테이너 박스가 내용물의 크기만큼 아래로 늘어나며, 이 때 박스 안에 있는 float된 요소의 높이까지도 같이 계산됨. 결국 박스가 float된 요소를 포함할 만큼 커지기 때문에 float을 제거하는 효과가 나타나게 된다. *IE6에서 오류 발생 시 #ct {overflow : auto ; zoom : 1 ; } 2. 부모요소에 content:"", display:block, clear:both *다음에 오는 블럭요소가 없을경우 사용, 의미없는 빈요소를 사용하기때문에 비권장 3. clear:both *다음에 오는 블럭요소가 없을경우 사용불가 4. ..
벤더 프리픽스(공급업체접두사) 웹 브라우저 공급업체 (마이크로소프트, 모질라, 구글, 애플, 오페라)에서 실험적인 기능이 필요할때 사용 가령 CSS3의 변환속성은 완벽하게 지원하지않으므로 벤더 프리픽스를 사용하여 변환효과를 각브라우져에 동일하게 출력할수 있다. 아래는 벤더프리픽스를 사용하지않아도 지원할수 있게 해주는 플러그인 아래 링크에서 다운받아 스크립트를 추가하여준다. http://leaverou.github.io/prefixfree/ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Prefix Free Colored by Color Scripter cs