728x90 300x250 SMALL Front-end/HTML78 css 말줄임효과 붙이기 보통 최신게시물 보기 코딩시에텍스트가 공간을 넘어가게 들어올경우 잘라주고 말줄임표시를 해주는 방법 12345678.reduced { text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100px; overflow:hidden;} ▷ text-overflow : 글자가 지정한 공간을 넘어갈경우 처리하는 방식을 설정해줄수 있다. clip : 기본값ellipsis : 말줄임표로 처리 / 부모요소의 너비가 auto일 경우 적용할수 없다.ingerit : 부모요소와 동일 ▷ white-space : 줄바꿈, 들여쓰기, 공백처리 방식을 선택할수 있다. normal : 기본값 공백이 여러개여도 1개로 처리한다.nowrap : 공백이 여러개여도 1개.. 2019. 1. 28. 컨텐츠 세로가운데 오도록하는 코딩방법 대상 요소가 한줄일 경우부모요소 text-align : center; line-height : height값; 자식요소 : margin:0 auto; line-height:height값; display:table 사용방법부모요소 : display:table;자식요소 : display:table-cell, text-align:center; vertical-align:middle; position:absolute; 사용1 : 흔하게 사용되지만 영역이 없어지기 때문에 반응형 할 때 사용하기 불편하다 부모요소 : position:relative;자식요소 : position:absolute; top:50%; left: 50%; margin-top:-(height값 절반); margin-left:-(width값 절.. 2019. 1. 25. ie조건부 주석처리::익스플로러 버전별로 코딩따로하기 (크로스 브라우징) 크로스 브라우징의 가장 애물단지가 익스 하위 버전이 아닐까?그나마 요즘에는 7,8은 거의 포기하지만 7,8까지 맞출 때는 정말 스트레스받는다. 보통 웬만한 브라우저들은 다 맞는다. 그러나 익스 하위버전들이 문제임만약 다 맞췄는데 익스 하위 버전만 문제라면 이거 맞추다가는 다른 브라우저들이 안맞는다. 이럴때 사용할 수 있는게 ie조건부 주석처리!! 12345 이 코드를 헤더 부분에 추가해준다.그러면 익스8 이하버전에서는 니 브라우저 업데이트좀 하라는 얼럿창이 나오게 된다. 그러나 최신익스플로러는 지원하지 않는다는 단점이 있다. 그래서 사용해줄수 있는게 조건부주석처리 js를 이용하는 방법이다. https://github.com/Unk/IE-Checker 위 사이트에서 스크립트를 다운받는다. ie-checke.. 2019. 1. 16. float:left 설정시 영역사라짐 방지하는 방법 float을 사용하면 영역이 없어지는데 이런 상황을 해결하는 방법은 여러가지가 있다. 방법1 똑같이 float를 사용한다. 영역이 사라진 영역에 float을 해주면 영역이 나타난다. 그러나 모든 영역에 float이 들어가 버리게 된다. 방법2 clear:both를 사용한다. 예전에는 이렇게 많이 썼는데 요즘에는 사이트가 점점 복잡해지면서 이건만으로는 해결하기 힘든경우가 많다. 방법3 부모요소에 display:inline-block를 사용한다. 하지만 이렇게 되면 성질이 바뀌게 된다. 방법4 부모요소에 overflow:hidden을 사용한다. 쉽게 사용할수 있지만 지정한 영역을 넘어설때는 사용하지 못한다. 방법5 부모 태그에clearfix라는 css를 만든다. css를 만들어줘야 하는 번거로움이 있다. 1.. 2019. 1. 15. 이전 1 ··· 12 13 14 15 16 17 18 ··· 20 다음 728x90 반응형 LIST
