티스토리

이야기앱 세상

검색하기

블로그 홈

이야기앱 세상

appsnuri.tistory.com/m

storya 님의 블로그입니다.

구독자: 23

방명록 방문하기

주요 글 목록

구글 웹 폰트(Web Font) 이용하기 https://fonts.google.com/ 에 접속하면 구글의 웹 폰트를 이용할 수 있다. 사용하길 원하는 폰트를 검색할 수 있고 검색창 아래 폰트 목록이 보여지기 때문에 목록해서 원하는 폰트를 찾을 수도 있다. 선택한 폰트에는 여러개의 스타일이 적용되어 있는데 사용을 원하는 스타일 선택한다. 아래 Select Light 300 + 를 클릭하면 Remove Light 300 - 로 변경되고 해당 스타일을 사용할 수 있도록 등록된다. 희망하는 스타일을 선택했다면 상단 메뉴 좌측의 View Selected Families 메뉴를 클릭한다. 메뉴를 클릭하면 아래 그림 처럼 Selected family 창이 보여지고 선택한 스타일을 제거할 수 있는 항목이 보이고 그 아래에 HTML 페이지에 첨부하는 방법을 .. 공감수 3 댓글수 0 2022. 11. 17.
CSS 컨텐트의 높이와 관계 없이 푸터가 항상 하단에 위치 CSS 컨텐트의 높이와 관계 없이 푸터가 항상 하단에 위치 상단본문하단 공감수 16 댓글수 1 2019. 2. 11.
CSS 페이지 스크롤시 푸터를 고정시키기 페이지 스크롤시 푸터를 고정시키기 페이지를 스크롤을 할 때 아래의 내용을 위로 올리면 푸더는 계속 아래에 고정되게 하려면 position:fixed를 이용한다. 하단고정 상단하단고정 내용 회사소개 제품정보 기술정보 게시판 공지사항 공감수 14 댓글수 0 2019. 2. 11.
CSS 페이지 스크롤시 헤더를 고정시키기 페이지 스크롤시 헤더를 고정시키기 페이지를 스크롤해 아래의 내용을 위로 올릴 때 헤더를 고정시키려면 position:fixed를 이용한다. 회사소개 제품정보 기술정보 게시판 공지사항 공감수 9 댓글수 0 2018. 12. 18.
CSS border-radius를 이용해서 사각형 형태의 사진을 원형 사진으로 만들기 border-radius를 이용해서 사각형 형태의 사진을 원형 사진으로 만들기 프로필 사진 등을 보여줄 때 사각형 형태로 보여주기도 하지만 원형 사진 형태로 보여주는 경우가 많다. 사진을 원형으로 보여주고 싶을 때 border-radius 속성을 이용하게 되는데 이미지의 좀 더 자연스럽게 처리하기 위해 object-fit, object-position 속성도 함께 쓰기도 한다. .circle-img { object-fit: cover; object-position: top; /*정사각형이 아니라 직사각형일 경우 원 안에 보여지게 할 중심 이미지의 위치를 지정*/ border-radius: 50%;/*사각형의 모서리 둥근 정도를 지정하는 속성인데 50%를 지정하면 완전한 원이 됨*/ width: 100px.. 공감수 15 댓글수 0 2018. 12. 17.
줄바꿈 처리 CSS 속성 word-wrap, word-break textarea에서 글자를 입력할 때 영문의 경우 공백 없이 글자를 입력하고 입력한 글자를 HTML 태그에 표시할 때 아래와 같이 기본적으로 줄바꿈이 되지 않는다. 영문 입력시 공백 없이 글자를 입력해서 표시할 때 자연스럽게 줄바꿈을 하려면 아래 명시한 CSS 속성을 이용할 수 있다. word-wrap:break-word -> 한글, 영문 줄바꿈(단어 단위로 줄바꿈)되고 영문의 경우 공백 없이 글자를 반복해도 줄바꿈이 됨 내용 영문 줄바꿈(단어 단위로 줄바꿈) word-break:break-all -> 한글, 영문 줄바꿈(글자 단위로 줄바꿈)되고 영문의 경우 공백 없이 글자를 반복해도 줄바꿈이 됨 내용 영문 줄바꿈(글자 단위로 줄바꿈) table에 적용할 때는 에 word-wrap:break-word 와.. 공감수 10 댓글수 0 2018. 12. 16.
CSS table에서 첫번째 tr 고정 나머지 tr 스크롤 처리하기 table에서 첫번째 tr 고정 나머지 tr 스크롤 처리하기 table에서 첫번째 tr 고정 나머지 tr 스크롤되도록 처리하고 싶으면 첫번째 tr에 position: absolute를 주고 table를 div로 감싼다. table를 감싸고 있는 div에는 overflow-y: scroll를 지정한다. 국가 수도 언어 대한민국 서울 한국어 미국 워싱턴 영어 중국 베이징 중국어 프랑스 파리 프랑스어 영국 런던 영어 헝가리 부다페스트 헝가리어 공감수 9 댓글수 0 2018. 12. 16.
CSS 글자색은 선명하고 배경색은 투명하게 처리하기 글자색은 선명하고 배경색은 투명하게 처리하기 배경색은 투명하게 처리하려고 배경색에 opacity 속성을 사용하면 글자색도 투명도가 적용되어 흐려지는 현상이 일어난다. 이럴 경우 rgba를 이용해서 배경색에 투명도를 지정하면 글자색은 선명하고 배경색을 투명하게 처리할 수 있다. 가을 공감수 9 댓글수 0 2018. 12. 15.
CSS div 태그에서 수직으로 정렬하기 div 태그에서 수직으로 정렬하기 div 태그안의 내용을 수직으로 정렬할 때 vertical-align를 사용하는데 적용이 안 된다. 그럴 경우 아래와 같은 속성을 명시함으로써 해결할 수 있다. 1. display: table-cell (가로 중앙, 세로 중앙) div{width:500px;height: 100px;border:1px solid orange;text-align: center;vertical-align:middle;display: table-cell;} 하하 2. display:flex (가로 중앙, 세로 중앙) div{width:500px;height: 100px;border:1px solid orange;display:flex;align-items:center; /*세로 정렬*/just.. 공감수 8 댓글수 0 2018. 12. 15.
CSS 목록 스타일 이미지 처리 및 위치 이동하기 목록 스타일 이미지 처리 및 위치 이동하기 ul 태그를 사용할 때 검정색 점 대신 이미지로 나열하고 싶은데 막상 나열하게 되면 이미지 사이즈를 잘 조정해서 글자와 맞추지 않으면 이미지와 글자의 차이로 어색해지는 경우가 있다. 이미지의 위치와 글자의 위치를 조정해서 자연스럽게 맞추려면 목록 스타일 유형을 안 보이게 처리하고 백그라운드 이미지를 사용해서 조정하는 방법이 유용하다. li{ background: url(../images/bullet.gif) no-repeat 10px 5px; list-style-type: none; padding: 0px 0px 12px 24px;} 공감수 11 댓글수 0 2018. 12. 14.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.