웹개발자의 기지개

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 body { margin:0; } div { box-sizing:border-box; } .black-bg { width:100%;height:100%; background:rgba(0,0,0,0.5); position:fixed;padding:20px; } .white-bg { width:100%;background:white; border-radius:8px; padding:20px; } 제목입니다. 상세페이지 내용입니다. cs

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; 으로 변경하면 된다.

모바일웹상에서 html5 태그 상에서 아래의 input 박스에 focus 클릭하면 가상키보드 화면 안나오게

필자는 에디터로 네이버스마트를 거의 대부분 활용하고 있는데, 반응형 코딩상에서 에디터로 이미지를 추가하면 반응형 형태로 이미지 크기 가변적으로 나오도록 하고 싶었다. 원래 에디터가 이미지를 올리면 자연히 그 이미지 자체의 크기 그대로 화면에 표시되기 때문에, 반응형 코딩상에서는 그 이미지 크기가 그대로 고정되어 버려서 문제가 발생된다. 결국 네이버 에디터로 올린 이미지에도 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...