이야기앱 세상

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

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

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

페이지 스크롤시 헤더를 고정시키기 페이지를 스크롤해 아래의 내용을 위로 올릴 때 헤더를 고정시키려면 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를 지정한다. 국가 수도 언어 대한민국 서울 한국어 미국 워싱턴 영어 중국 베이징 중국어 프랑스 파리 프랑스어 영국 런던 영어 헝가리 부다페스트 헝가리어

글자색은 선명하고 배경색은 투명하게 처리하기 배경색은 투명하게 처리하려고 배경색에 opacity 속성을 사용하면 글자색도 투명도가 적용되어 흐려지는 현상이 일어난다. 이럴 경우 rgba를 이용해서 배경색에 투명도를 지정하면 글자색은 선명하고 배경색을 투명하게 처리할 수 있다. 가을