일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Today
- Total
- ie7 inline
- display:inline-block
- CSS
- css로 줌인 효과 주기
- CSS3 효과
- zoom:1
- CSS 효과주기
- css3
- float 깨짐
- transform 효과
- 속성 ease
- ie7 핵
- 레이아웃 잡기
- String 객체
- css 줄바꿈
- 속성 scale
- transform 전환효과
- zoomin 효과
- 코딩 예제
- html 줄바꿈
- Object 객체
- 한빛미디어
- Number 객체
- Array 객체
- html br
- HTML
- 모던 웹을 위한 JavaScript + jQuery 입문
- footer 고정
- Date 객체
- Math 객체
목록메모장 (19)
마크업개발 메모장
줄바꿈 하는데 br 아니면 span을 주로 사용했었는데 css로 훨씬 간단하게 줄바꿈을 할 수 있다!! 바로 요 div { white-space : pre-line; } 방법을 사용하면 가능하다!white-space 이건 공백 문자를 어떻게 처리할지 결정하는 속성이다. 속성 값으로는normal : 기본 값으로 연속하는 공백을 하나로 처리한다.nowrap : 연속하는 공백을 하나로 처리하고 줄바꿈을 하지 않는다.per : 연속하는 공백을 원본 그대로 표시하고 줄바꿈도 한다. 원본 그대로 표시한다. 영역에서 벗어날 수 있다.pre-line : 연속하는 공백은 하나로 취급하고 줄바꿈을 한다. width에 맞춰진다. pre-wrap : 연속하는 공백을 원본 그대로 표시하고 줄바꿈도 한다. width에 맞춰진다...
ie7을 맞춰보자~ block속성을 inline-block으로 작업한 후 ie7에서 확인해보면 깨진다. 그래서 찾아봤다. 방법이 있긴 있었다!! 바로 요것~! div {display:inline-block; zoom:1; *display:inline;} ie7에서는 inline속성을 inline-block으로 바꿀순 있지만 block속성을 바꿀순 없다.그래서 block속성을 inline-block으로 바꾸기 위해 핵을 써야한다.ie7 핵 *display:inline;으로 block을 inline 속성으로 바꾸고 block 성질도 가져야하니 zoom:1로 hasLayout이라는 고유한 성질(레이아웃)을 부여해준다.고로 inline이지만 레이아웃을 가지다 보니 inline-block성질이 되는 것이다. zo..
footer를 하단에 고정하는 방법을 검색하면 여러가지 방법이 나오는데테스트 해본 결과로 이 방법이 제일 좋은것 같다. footer를 absolute로 주는 방법!! 예제소스보러가기!! 0311 내용 추가) 직접 작업해보니 생각해봐야 할 부분이 있다. 1. 이 코드에서는 #content가 position:absolute 면 안된다. position은 header와 footer에만 사용하고 content는 default로 가는게 좋다. 어쩔수 없이 content에 position을 사용해야 한다면 absolute와 relative 2개의 클래스를 만들고 작업하는게 좋을듯 하다. 그리고 content가 absolute일때는 이 방법이 아닌 다른 방법으로 footer를 붙여야 한다. 2. #content와 #..
CSS3 animation으로 이미지를 상하로 움직이기!!!소스보러가기 !! 추가 설명)animation: myfirst 0.7s linear 1s infinite alternate; @keyframes myfirst { 0% {opacity: 1.0; top:15px;} 100% {opacity: 1.0; top:0px;}} 여기에서 myfirst라는 것은 애니메이션 이름임.키프레임에서 애니메이션 이름을 동일하게 사용해주면 해당 애니메이션이 작동하게 됨.애니메이션 이름은 사용자가 정할 수 있음. w3schools 상세 설명 보기