- 말줄임표시
- Mac Oracle
- 맥 오라클설치
- 바코드 스캔하기
- asp.net core Select
- XSS PHP
- 파일업로드 체크
- javascript 유효성체크
- ViewBag
- javascript 바코드스캔
- SSD 복사
- javascript redirection
- php 캐쉬제거
- 강제이동
- 하드 마이그레이션
- javascript 바코드 생성
- asp.net dropdownlist
- 하드 윈도우 복사
- jquery 바코드생성
- 404에러페이지
- TempData
- django 엑셀불러오기
- 타임피커
- XSS방어
- ASP.Net Core 404
- 바코드 생성하기
- asp.net Select
- ViewData
- 파일업로드 유효성체크
- jquery 바코드
목록웹퍼블리싱/CSS (37)
웹개발자의 기지개
위의 내용 항목을 2줄만으로 말줄임 표시해보자. 1 내용 cs 3줄로 바꾸고 싶으면 -webkit-line-clamp:3; 으로 변경하면 된다.
필자는 에디터로 네이버스마트를 거의 대부분 활용하고 있는데, 반응형 코딩상에서 에디터로 이미지를 추가하면 반응형 형태로 이미지 크기 가변적으로 나오도록 하고 싶었다. 원래 에디터가 이미지를 올리면 자연히 그 이미지 자체의 크기 그대로 화면에 표시되기 때문에, 반응형 코딩상에서는 그 이미지 크기가 그대로 고정되어 버려서 문제가 발생된다. 결국 네이버 에디터로 올린 이미지에도 css 를 먹여서, max-width:100% 코드를 먹이는 게 관건이다. 아래 파일에서 CSS 클래스를 추가해 주도록 하자. /smarteditor2/css/ko_KR/smart_editor2_in.css .se2_inputarea img {max-width:100%;}
유투브 화면 영상을 해당 코드에 맞게 width,height 각각 100%으로 꽉찬 화면으로 보여주기 코드를 만들어보자. 특히나 반응형 코드 상에서 참으로 유용하다. 웹브라우저 크기를 변형해 가면서 확인해 보자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; heig..
화면 박스내에 문자가 길어질때 자동으로 말줄임 표시를 넣는 방법을 간단히 정리해 본다. 한줄 문장형태로 말줄이기 1 2 3 4 5 6 7 8 .gul { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } cs 여러줄로 나타나는 텍스트 문장에서 말줄이기 1 2 3 4 5 6 7 8 9 10 .gul { width:200px; /*여러줄로 나타내기*/ white-space:normal; display:-webkit-box; -webkit-line-clamp:3; /*3줄로*/ -webkit-box-orient:vertical; overflow:hidden; } cs 참고 : https://webruden.tistory...
크기가 다양한 이미지의 썸네일 이미지를 만들어 보자. 가로 세로 모두 1/2 로 축소하고 relative 와 absolute 코드를 이용한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 .board_view_inner .view_thumnail{position: relative; width:160px; height:100px; overflow: hidden; background: #eef1f7;} .board_view_inner .view_thumnail img{position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:auto; height:100%; } 20201230_09..
상단 네비게이션 메뉴바를 나름 코딩해 보았다. 주된 메뉴는 투명 배경색으로 처리하고 롤오버시 서브 메뉴가 나타나는 방식이다. jquery 소스가 없는 순수 CSS 만으로 코딩해 보았다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 Colored by Color Scripter cs 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 2..
1. left: 50%; (%는 부모요소를 기준) margin-left: -25px; 2. left: calc(50% - 25px); 3. 부모요소가 유동적이고, 자식요소도 유동적일때, left: 50%; transform: translateX(-50%); 3번이 가장 이상적, 모바일에서는 가장 최신 html내용을 반영하므로, 가장 적합함
width 폭을 넘어서는 긴 제목글을 폭에 따라 자동으로 말줄임표를 넣어주는 깔끔한 소스이다. 1 2 3 4 5 6 7 8 9 10 11 12 a.ell { display: block; text-decoration: none; color: #333; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 동해물과 백두산이 마르고 cs 참고사이트 : https://velog.io/@decody/Text-truncation-with-only-CSS