웹개발자의 기지개

Youtube 태그를 반응형 소스 상에 삽입할때 모바일 형태로 적절히 리사이징 되어 화면에 보기 좋게 나타나도록 해 준다. 1 2 3 4 5 6 7 8 9 10 11 12 .video-wrap {position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;} .video-wrap iframe, .video-wrap object, .video-wrap embed {position:absolute; top:0; left:0; width:100%; height:100%;}

마우스 롤오버시 툴팁 말풍선 기능을 구현해 보자. 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 .tooltip { position: relative; display: inline-block; margin: auto; } .tooltip .tooltip_content { visibility: hidden; width: 220px; background-color: orange; padding: 8px 8px; color: white; text-align: center; position: absolute; z-index: 1; bottom: 88%; left: 50%; ma..

위의 내용 항목을 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..