프로그래밍

모바일 페이지에서 상단의 버튼이 있는 경우, 버튼의 총 넓이가 넓으면 스크롤이 들어가게 된다.이때 스크롤을 움직여야 보이는 버튼을 클릭 후 상세페이지에 들어갔을 때,상세페이지내에 스크롤 값을 수정하여 버튼이 보이게 하면 된다.(이걸 풀어쓰기가 너무 힘들었다ㅠ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부터 가능하다. 그래도 모바일에선 유용하게 쓸 수 있으니 알아두면 좋을 듯하다.

2018/05/24 - [Programing] - VSCODE 에디터 설치 및 세팅 compile 하기 위한 방법은 여러가지가 있지만, VSCODE를 이용하여 간편하게 compile 하는 방법이 있으니 그 방법을 추천한다. 시작하기에 앞서 sass를 더 잘 이용할 수 있게 확장프로그램부터 설치하는 것이 좋다. VSCODE sass 확장프로그램 설치 sass https://marketplace.visualstudio.com/items?itemName=robinbentley.sass-indented Sass Lint https://marketplace.visualstudio.com/items?itemName=glen-84.sass-lint VSCODE sass compile 하기 위한 확장프로그램 설치 Li..

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

보통 textarea 안에 글을 쓸때 placeholder를 이용하지만, placeholder가 아닌 미리 보여주는 데이터에 대해선 개행이 필요할 때 코드상에서 엔터를 치면 가능하지만, 보기 좀 불편한 방법이 있다. 이럴때 아래 문자를 이용하면 개행이 가능하다.

가끔 크롬 모바일 버전과 실제 모바일 기기에서 다르게 나올때가 있는데, 그때마다 실제 기기를 개발자도구로 보고 싶었던 적이 많다. 진작 그 방법이 있었는데, 이제 알게 되었다!!! 1. 컴퓨터에 모바일 USB 드라이버를 설치해야한다. 참고 : https://developer.android.com/studio/run/oem-usb?hl=ko 2. 모바일 설정 > 개발자 옵션 > USB디버깅체크 (LG는 개발자 옵션이 활성화되있더라도 한번 비활성화 한 후 활성화를 해야 USB디버깅이 활성화가 된다.) 3. 핸드폰에서 알럿으로 연결하겠냐는 창이 뜨고 확인을 누른 후! 3. 크롬창에서 chrome://inspect/#devices 주소로 들어간다. 4. 아래와 같은 화면이 뜬다! 해당하는 탭 밑에 inspect..

Math.random()에 대해 이 함수는 랜덤으로 숫자를 반환해주는 메서드이며, 난수로 표현되기 때문에 정수로 변환해야한다. parseInt()를 이용하거나, 다른 방법으로 변환가능 범위를 지정할 수 있는데 Math.random() * 10 으로 할 경우엔 0~9 까지 랜덤으로, (Math.random() * 100) + 1 이렇게 할 경우엔 1~100 까지 랜덤으로 출력된다. $(document).ready(function() { console.log(parseInt(Math.random() * 30) +1); }); // 콘솔로 찍어보면 1~30까지 랜덤으로 출력

각종 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..

이번 달엔 과제로 input 계산하기에 대해서 했다. 친구의 도움으로 생각보다 소스가 짧아졌다 =) 굿! jquery input 계산 관련 소스를 보면 소수 반올림/comma(,) 찍기/숫자만 입력하기 다 들어가있다. 1. 소수 반올림 : Math.ceil(변수명) 2. comma(,) 찍기/숫자만 입력하기 : 소스안에 주석확인

jquery checkbox 관련 1. 전체 갯수 $('input:checkbox[name=name명]').length; 2. 선택된 갯수 $('input:checkbox[name=name명]:checked').length; 3. 전체 체크 박스 순회 $('input:checkbox[name=name명]').each(function (){ }); 4. 선택된 체크 박스 순회 $('input:checkbox[name=name명]:checked').each(function (){ });

jquery 백분율 관련 계산 방법 1. 전체 값에서 일부값을 구할 때 - 일부값 / 전체값 * 100 2. 전체 값의 몇 퍼센트는 얼마인지 구할 때 - 전체값 * 퍼센트 / 100 3. 숫자를 몇 퍼센트 증가시키는 공식 - 숫자 * (1 + 퍼센트 / 100) 4. 숫자를 몇 퍼센트 감소하는 공식 - 숫자 * (1 - 퍼센트 / 100)

며칠 전 아톰 설치와 세팅에 대해 올렸는데, 포스팅 하고 나서 세팅을 어느정도 끝내놓으니 너무 무거웠다...T_T 서브라임만 쓰다가 아톰을 쓰니 무거운 차이가 더 심하게 느껴졌고, 다시 에디터를 찾다가 vscode 얘기를 들어 다운 받고 현재 사용 중이다. (세팅도 어느 정도 끝났는데, 아톰보단 좀 덜 무거운 느낌?) VSCODE 에디터란 비주얼 스튜디오 코드는 마이크로소프트가 마이크로소프트 윈도우, macOS, 리눅스용으로 개발한 소스 코드 편집기이다. 디버깅 지원과 Git 제어, 구문 강조 기능등이 포함되어 있으며, 사용자가 편집기의 테마와 단축키, 설정 등을 수정할 수 있다. 비주얼 스튜디오 코드는 깃허브가 개발한 일렉트론 프레임워크를 기반으로 구동된다. 그러나 같은 일렉트론 기반의 편집기 아톰을 ..