#CSS

모바일 페이지에서 상단의 버튼이 있는 경우, 버튼의 총 넓이가 넓으면 스크롤이 들어가게 된다.이때 스크롤을 움직여야 보이는 버튼을 클릭 후 상세페이지에 들어갔을 때,상세페이지내에 스크롤 값을 수정하여 버튼이 보이게 하면 된다.(이걸 풀어쓰기가 너무 힘들었다ㅠ0ㅠ) 위와 같이 메뉴7은 스크롤을 움직여야 보이는데, 스크립트를 이용하면 바로 스크롤이 이동되서 보이게 된다. 그리고 이번에 코딩하면서 white-space 에 대해 다시 한번 알게되는 시간이었다. 상세 옵션을 정리하면 아래와 같다.기본값 : normalinitial : 기본값으로 설정inherit : 부모 요소의 속성값을 상속 받는다.normal : 새로운 줄 (공백 1개만 표시) / 공백과 들여쓰기 (공백 1개만 표시) / 줄바꿈 (자동 줄바꿈)..

CSS 텍스트 중앙(수직,수평) 정렬 보통 텍스트 중앙 정렬 하는 방법으로 text-align:center; 또는 vertical-align:middle; 방법이 있는데, 가변적으로 쓸때는 잘 안될때도 있다. 특히나 가로 수직 정렬은 텍스트가 2줄로 떨어질 수 있는 상황이 있을 수 있어서 더더욱 어려운데 마침 구글링 하다보니 좋은 방법이 있었다! 여기서 관건은 transform: translate(0, -50%) / transform: translate(-50%, -50%) 이 부분이다! 아쉬운 부분은 tranform 을 써야해서 ie10부터 가능하다. 그래도 모바일에선 유용하게 쓸 수 있으니 알아두면 좋을 듯하다.

모바일에서 높이 100%로 고정하기 위해 쓰는 방법! 전체 감싸고 있는 태그에다가 아래와 같이 style을 주면 된다. 1. width:100%; min-height:100vh 2. width:100%; height:calc(100%)

각종 css3를 자동으로 만들어주는 사이트 http://www.css3maker.com/css3-animation.html 참고 사이트 http://daneden.github.io/animate.css/ css3 animation - css3 animation을 적용하기 위해선 속성 변화를 주기 위해 키프레임 생성! (접두어 써야함)animation-name: 애니메이션이름 animation-duration : 진행시간(2s,3s...) animation-iteration-count : 반복횟수(infinite:무한반복) animation-timing-function : 속도형태 animation-direction : 방향지정 animation-play-state : 애니메이션 진행상태 animation..

ios에서 레이어팝업 시 overflow-x:scroll 안되는 문제에 대해서 업무하면서 레이어팝업으로 창을 띄우고, 그 안에 table이 width가 길어서 overflow-x:scroll로 처리를 했는데, 레이어팝업으로 띄운 후 확인해보는데 가로 스크롤은 먹지만, 팝업 전체의 세로 스크롤은 안되는 것이다. 그것도 'ios'에서만 !!!!!! 증말 아이폰이 더 싫어졌따 ㅡ,ㅡ!!! 그래서 구글링하다가 찾았는데, 레이어팝업을 띄우는 class에다가 {overflow-y:scroll;-webkit-overflow-scrolling:touch;} 그리고 table overflow-x:scroll을 먹인 css에다가 -webkit-transform:translateZ(0) 을 넣어 문제 해결! .pop-up ..