이야기앱 세상

div에 overflow:auto 로 지정했을 때 div의 하위 div로 스크롤 위치를 변경하기 div에 스크롤이 생기고 div의 하위 div로 스크롤의 위치를 변경하게 하기 위해서 아래와 같이 우선 div에 overflow:auto 스타일을 적용한다. [style 부분] 1 2 3 4 5 6 123456789101112 [실행 화면]3을 클릭하면 3번이라고 명시된 div로 스크롤이 옮겨짐

jQuery - 페이지 내의 특정 위치로 스크롤을 이동시키기 버튼을 누르거나 링크를 누르면 같은 페이지 내의 특정 위치로 스크롤을 이동시킬 수 있다. jQuery의 offset() 메서드를 이용해서 태그의 위치를 알아내고 animate() 메서드를 이용해서 부드럽게 원하는 위치로 이동하도록 코드를 작성할 수 있다. [스크립트 부분] [html 태그 부분] div1로 이동div1

jQuery - ajax 통신이 성공했을 때 팝업창(새창) 띄우기 오류 ajax 통신을 할 때 통신에 성공해서 데이터를 받고 팝업창을 띄울때 팝업창이 동작이 되지 않을 때가 있다. 브라우저에서 ajax 통신시 팝업창을 차단하는 것으로 레이어 팝업창을 사용하면 해결될 수 있으나 window.open 메서드를 이용해 새창을 호출하면 동작이 되지 않는 현상이 나타난다.이런 문제를 해결하기 위해 ajax 통신을 수행하기 직전에 빈페이지의 새창을 띄워두고 통신이 완료되면 호출 URL를 변경하는 방법을 사용할 수 있다. $('#btn).click(function(){ var pop = win.open("about:blank","content","width=300,height=300"); $.ajax({ succes..

jQuery - 스크롤시 메뉴는 고정되고 내용은 스크롤되도록 처리하기 스크롤시 로고 영역은 스크롤되지만 메뉴는 상단에 고정한 후 내용은 계속 스크롤 처리하게 할 수 있다. 메뉴의 수직 위치를 측정해서 스크롤바의 위치가 메뉴의 수직 위치보다 크면(스크롤바의 위치가 아래일 경우) 메뉴 영역이 고정되게 처리한다. jQuery의 .offset() 메서드를 이용해서 선택한 태그의 위치를 알아낸다. [스타일을 표시 부분] [스크립트 표시 부분] [HTML 태그 표시 부분] 회사소개 상품정보 오시는 길 [스크롤하기 전] [스크롤한 후]

페이지 스크롤시 헤더를 고정시키기 페이지를 스크롤해 아래의 내용을 위로 올릴 때 헤더를 고정시키려면 position:fixed를 이용한다. 회사소개 제품정보 기술정보 게시판 공지사항

border-radius를 이용해서 사각형 형태의 사진을 원형 사진으로 만들기 프로필 사진 등을 보여줄 때 사각형 형태로 보여주기도 하지만 원형 사진 형태로 보여주는 경우가 많다. 사진을 원형으로 보여주고 싶을 때 border-radius 속성을 이용하게 되는데 이미지의 좀 더 자연스럽게 처리하기 위해 object-fit, object-position 속성도 함께 쓰기도 한다. .circle-img { object-fit: cover; object-position: top; /*정사각형이 아니라 직사각형일 경우 원 안에 보여지게 할 중심 이미지의 위치를 지정*/ border-radius: 50%;/*사각형의 모서리 둥근 정도를 지정하는 속성인데 50%를 지정하면 완전한 원이 됨*/ width: 100px..

textarea에서 글자를 입력할 때 영문의 경우 공백 없이 글자를 입력하고 입력한 글자를 HTML 태그에 표시할 때 아래와 같이 기본적으로 줄바꿈이 되지 않는다. 영문 입력시 공백 없이 글자를 입력해서 표시할 때 자연스럽게 줄바꿈을 하려면 아래 명시한 CSS 속성을 이용할 수 있다. word-wrap:break-word -> 한글, 영문 줄바꿈(단어 단위로 줄바꿈)되고 영문의 경우 공백 없이 글자를 반복해도 줄바꿈이 됨 내용 영문 줄바꿈(단어 단위로 줄바꿈) word-break:break-all -> 한글, 영문 줄바꿈(글자 단위로 줄바꿈)되고 영문의 경우 공백 없이 글자를 반복해도 줄바꿈이 됨 내용 영문 줄바꿈(글자 단위로 줄바꿈) table에 적용할 때는 에 word-wrap:break-word 와..

table에서 첫번째 tr 고정 나머지 tr 스크롤 처리하기 table에서 첫번째 tr 고정 나머지 tr 스크롤되도록 처리하고 싶으면 첫번째 tr에 position: absolute를 주고 table를 div로 감싼다. table를 감싸고 있는 div에는 overflow-y: scroll를 지정한다. 국가 수도 언어 대한민국 서울 한국어 미국 워싱턴 영어 중국 베이징 중국어 프랑스 파리 프랑스어 영국 런던 영어 헝가리 부다페스트 헝가리어