Frontend68 textarea 선택 영역 파란테두리 없애는 방법 textarea 사용시 textarea 선택영역이 파란색 테두리로 잡히는데, 이게 싫다면 아래 css 를 먹이면 된다.outline: none; 2018. 7. 16. 화면 내리면 최상단으로 이동할 아이콘 뜨고, 맨 위에 있으면 아이콘 사라지게 하기 jquery 에서 제공해주는 스크롤 이벤트인 아래 두개로 구현이 가능하다 !!1. $(document).scroll() //스크롤이 변경될 때마다 이벤트를 발생시킴2. $("body").scrollTop() //브라우저의 스크롤 위치 값 //최상단이면 0을 반환함 * 구현방법 *1. Body 내에 아이콘부터 선언 12cs2. Head 내에 자바스크립트 선언123456789101112131415161718$(function(){ //*스크롤감지 $("body").scroll(function(){ var scrollLocation = $("body").scrollTop(); //브라우저의 스크롤 값 if(scrollLocation!=0){ //화면을 내리면 gotoTop 뜨게하고 $(".gotoTop").f.. 2018. 7. 13. 페이지 최상단으로 이동시키는 스크립트 현재 보고있는 페이지에서 특정 버튼클릭시 맨 위로 이동되게끔 구현할 땐, 아래 구문을 쓰자 !1$("body").scrollTop(0);cs 2018. 7. 13. position 활용하여 더보기 버튼 클릭하면 더보기 메뉴 뜨게 만들기 이런식으로 우측에 있는 더보기버튼을 클릭하면, 회색박스에 있는 더보기 메뉴가 뜨는걸 구현하고 싶었다. 그래서 간단하게 jQuery 나 bootstrap 에서 제공하는걸 사용하려고 찾아봤지만,클릭시 노출되는 리스트는 data-content="" 여기안에 넣어야해서 네비게이션이나 각 기능들을 넣어야 하는 나로선 사용하기가 어려웠다.(data-content 안에서는 html 태그도 안먹음...) 그래서 CSS를 찾아 직접 구현해보았다.1. 더보기 버튼의 이미지 우측값, 하단값을 가져와서 리스트의 css top, right에 적용시킨다.2. 리스트는 float 되는 형식으로 떠야하므로 z-index=10 값을 준다.3. 더보기 버튼의 position은 relative / 리스트의 position은 absoult.. 2018. 7. 12. @media와 flex 활용하여 화면 줄였을 때 보여지는 정렬순서 바꾸기 원래는 한 화면 기준으로, 좌측에는 게시물정보 / 우측에는 유저와 댓글정보가 보여졌다. 근데 이게 화면을 줄였을 때 (모바일 웹 또는 앱으로 볼 생각에)유저정보가 맨 밑으로 내려가서 마음에 안들었고, 이걸 수정하는 방법을 찾았다. 바로 CSS의 @media 와 flex 태그 이용하기.123456@media only screen and (max-width: 600px) { .container{ display: flex; flex-direction: column-reverse; }}Colored by Color Scriptercs@media 태그로 화면의 가로사이즈가 600px 이하로 떨어지면 flex 기능을 활성화 하고, 나열되는 컬럼을 역순으로 보여주겠다는 소스. container 안에 좌측 / 우측 정.. 2018. 7. 12. CSS의 flex활용하여 인스타그램, 페이스북처럼 유저정보 만들기 * 변경 전 * * 변경 후 * 원래 아래처럼 한 줄을 div로 묶고, 그 안에서 span 을 3개로 나눠 정렬한 뒤 두번째 span에서 위아래로 나누고 싶었는데..막상 작업해보니 정말 span / div 태그에 대한 아무런 지식도 없이 그저 생각일 뿐이었다..그래서 인터넷 찾고 공부해보니 아래처럼 div 안에 div 로 3개를 나눈 뒤, CSS에서 제공하는 flex 를 적용시켜파란 div엔 flex-direction:row (가로로 정렬), 두번째 div엔 fiex-direction:column (세로로 정렬) 을 먹혀야 하더라.공부할 때 참고한 사이트 : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Con.. 2018. 7. 12. 이전 1 ··· 5 6 7 8 9 10 11 12 다음
