728x90 반응형 Web Programming/CSS16 label / font-size와 점점점(...)점으로 처리하기 / white-space: nowrap,overflow: hidden, text-overflow:ellipsis 인스타그램의 로그인페이지를 따라하다가 작은 화면에서 페이지에서는 ...으로 처리하는 효과가 필요했습니다. 부트스트랩의 Input과 labal을 사용하게 되면 label의 폰트의 사이즈를 줄이는 방법과 input의 넓이가 줄어들었을 경우 label이 input 밖으로 나가지 않도록 설정하고 ...으로 처리되는 효과를 적용하는 방법입니다. 1. label font size 수정하기 / 라벨 폰트 크기 수정하기. 라벨태그의 폰트를 수정하는 것은 아주 간단하다. lable의 스타일에서 font-size를 사용하면됩니다. 여기서의 라벨태그는 input 박스 안에서 출력되는 글씨들입니다. rem을 사용해도 되고 pt단위를 사용해도 된다. label{ font-size: 10pt; } rem은 크기의 단위입니다. 상.. 2021. 11. 12. 인스타그램 폰트 CSS / 구글 폰트 설정하기 / google font 적용하기 / 폰트 변경하기 인스타그램을 따라 만들면서 기본 폰트를 인스타그램사이트의 폰트를 따라하는 과정입니다. 똑같은 폰트를 찾아서 변경 할 수는 없었지만 google font에서 비슷한 폰트를 찾아서 적용하는 방법으로 진행했습니다. google font는 구글에서 제공하는 무료 웹폰트 서비스입니다. google font 외에도 웹폰트 서비스를 제공하는 곳이 있으니, 다음번에는 다른 서비스를 이용해서 제작해 볼 생각입니다. 인스타그램 폰트 따라하기 좌측의 사진은 실제 인스타그램의 로그인 페이지이고, 우측은 인스타그램을 따라서 만들고 있는 페이지 입니다. 실제 인스타그램 페이지처럼 로고를 사진이 아닌 폰트로 나타내고 싶어서 방법을 찾아보니 웹프로그래밍에서 사용이 가능한 폰트를 제공하는 곳이 여러 곳이 있지만 똑같은 폰트스타일은 찾.. 2021. 11. 11. CSS / Z-index 틀 안에 사진 넣기 (휴대폰 화면 만들기) /부트스트랩 bootstrap carousel z-index / position 속성들 인스타그램 홈페이지를 따라서 만들면서 휴대폰 안에 이미지가 바뀌는 효과를 만들고 있었다. 부트스트랩을 사용하지 않고 z-index를 사용할때는 잘 됬었는데 부트스트랩을 사용한 상태에서는 z-index뿐만 아니라 다른 여백이나 패딩같은 간단한 수정도 잘되지 않을때가 많았다.. 여기서는 둥근 테두리에 화면을 넣으려고 할때 화면이 휴대폰 틀에 딱 맞게 조절하기 위해서 z-idex를 사용하려고 했는데. 마음처럼 움직이지 않는다.. bootstrap carousel z-index 부트스트랩의 carousel에 z-index 사용하기 부트스트랩의 carousel에 z-index 사용하기 일단 휴대폰 안의 사진이 변경되길 바라면서 휴대폰의 이미지 png파일과 휴대폰화면에 들어갈 사진 3장을 준비하고 예전에 프로젝트를.. 2021. 11. 11. CSS / 사이드메뉴 https://wsss.tistory.com/1043 옆에서 부드럽게 나오는 사이드 메뉴 See the Pen Sliding Menu by Dev Loop (@dev_loop) on CodePen. 옆에서 부드럽게 나오는 사이드 메뉴 wsss.tistory.com https://dororongju.tistory.com/29 [JQuery] 상단메뉴 슬라이드(펼치기) 초간단 $('펼쳐질 메뉴').slideDown(속도); 1. slideDown() : 인자로 받은 시간동안 높이를 0부터 원래 높이까지 아래로 늘립니다. $('#subMenu').slideDown(200); 2. slideUp() : 인자로 받은 시간동안 높이가 원래.. dororongju.tistory.com 2021. 9. 8. 이전 1 2 3 4 다음 728x90 반응형
