이야기앱 세상

https://fonts.google.com/ 에 접속하면 구글의 웹 폰트를 이용할 수 있다. 사용하길 원하는 폰트를 검색할 수 있고 검색창 아래 폰트 목록이 보여지기 때문에 목록해서 원하는 폰트를 찾을 수도 있다. 선택한 폰트에는 여러개의 스타일이 적용되어 있는데 사용을 원하는 스타일 선택한다. 아래 Select Light 300 + 를 클릭하면 Remove Light 300 - 로 변경되고 해당 스타일을 사용할 수 있도록 등록된다. 희망하는 스타일을 선택했다면 상단 메뉴 좌측의 View Selected Families 메뉴를 클릭한다. 메뉴를 클릭하면 아래 그림 처럼 Selected family 창이 보여지고 선택한 스타일을 제거할 수 있는 항목이 보이고 그 아래에 HTML 페이지에 첨부하는 방법을 ..

CSS 컨텐트의 높이와 관계 없이 푸터가 항상 하단에 위치 상단본문하단

페이지 스크롤시 푸터를 고정시키기 페이지를 스크롤을 할 때 아래의 내용을 위로 올리면 푸더는 계속 아래에 고정되게 하려면 position:fixed를 이용한다. 하단고정 상단하단고정 내용 회사소개 제품정보 기술정보 게시판 공지사항

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를 지정한다. 국가 수도 언어 대한민국 서울 한국어 미국 워싱턴 영어 중국 베이징 중국어 프랑스 파리 프랑스어 영국 런던 영어 헝가리 부다페스트 헝가리어