퍼블리싱 (57) 썸네일형 리스트형 [CSS/JAVASCRIPT]간단한 팝업창(모달창) 만들기 간단한 팝업창(모달창)을 만들어 보려고 합니다. 먼저 완성 된 모습! 아래의 '모달창아 나와랏'버튼을 눌려봐주세용! 모달창아 나와랏 close 모달창 내용 버튼을 누르면 팝업창을 띄고 뒷배경을 전체 깔아줘서 다른부분이 클릭 되지 않게 하고, 팝업창을 더 잘보이게 합니다. HTML12345678모달창아 나와랏 close 모달창 내용 Colored by Color Scriptercs 1. 버튼을 하나 만들어줍니다. (팝업창을 띄워줄) (id="modal_btn") 2. 팝업창이 띄워졌을때 전체 배경으로 들어갈 DIV를 만들어 줍니다. ( class= "back_bg") 3. 내용이 들어갈 팝업창 박스를 만들어주고 close버튼도 만들어 줍니다. ( class = "modal_wrap") CSS12345678.. [CSS]배경이미지에만 OPACITY 적용(multiple효과) '배경만 흐리게 또는 배경에 색상필터를 줄 수 있는 방법이 없을까?' '배경만 살짝 어둡게 해서 글씨가 더 잘보이게 하고 싶은데 어떻게 하면 좋을까?' 고민하면 발견한 방법에 대해 적어봅니다. 문제점! : OPACITY를 주면 글씨도 같이 적용됨 HTML 1 2 3 배경만 투명하게 cs CSS 1 2 3 4 5 .box01{width: 500px;height: 300px; background: url(https://cdn.pixabay.com/photo/2020/06/28/00/04/chicago-5347435_960_720.jpg); background-size: cover; opacity: 0.5; } .box01 h1{color: rgb(121, 68, 219);text-align: center;l.. [JAVASCRIPT]typeof 과 instanceof의 차이점 typeof 피연산자의 데이터 타입을 반환하는 연산자 문법 1 2 typeof variable cs 반환 값 undefined boolean string number object function 예시 1 2 3 4 5 6 7 8 typeof 5; // return 'number' typeof 'haha'; // return 'string' typeof {}; // return 'object' typeof []; // return 'object' typeof function () {}; // return 'function' typeof null; // return 'object' cs instanceof 개체가 특정 클래스의 인스턴스인지 여부를 나타내는 boolean값으로 반환하는 비교연산자 문법 1 Ob.. [CSS]박스사이징(box-sizing) 활용하기 레이아웃을 만들다보면, 테두리, 패딩등 때문에 사이즈가 헷갈리기 시작한다. 그 때 css속성으로 'box-sizing' 과 'clac()'를 활용하면 좋을 것 같다. 2020/03/13 - [퍼블리싱/HTML&CSS] - [CSS]div 3개 레이아웃 만들기( calc() 사용법) [CSS]div 3개 레이아웃 만들기( calc() 사용법) html로 레이아웃을 짜다보면 객체들에게 똑같은 가로값을 주고 싶은데 계산하기 쉽지 않을때가 많습니다. 또 반응형으로 웹사이트를 만들다보면, 값을 딱 지정해 놓으면 브라우저 크기마다 다르 ddorang-d.tistory.com 1 .box{box-sizing: content-box / border-box} cs - box-sizing:content-box : 기본값,.. SSL 인증서 무료 이용(ZEROSSL 리뉴얼 후) SSL 인증서란!? SSL 프로토콜은 처음에 Netscape사에서 웹서버와 브라우저 사이의 보안을 위해 만들어졌다. SSL은 Certificate Authority(CA)라 불리는 서드 파티로부터 서버와 클라이언트의 인증을 하는데 사용된다. (출처. http://wiki.kldp.org/HOWTO/html/SSL-Certificates-HOWTO/x70.html) HTTP는 Hypertext Transfer Protocol의 약자다. 즉 Hypertext 인 HTML을 전송하기 위한 통신규약을 의미한다. HTTPS에서 마지막의 S는 Over Secure Socket Layer의 약자로 Secure라는 말을 통해서 알 수 있듯이 보안이 강화된 HTTP라는 것을 짐작할 수 있다. HTTP는 암호화되지 않은 .. 텍스트 비교 프로그램(웹) / Diffchecker 안녕하세요! 또랑입니다 +_+ 오늘은 텍스트 서로 대조해서 비교 체크 할 수 있는 어플을 소개 드릴게요! https://www.diffchecker.com/ 무료 이미지 사이트 소개 합니다! / Pexels, StockSnap.io 안녕하세요!! 또랑입니다 +_+ 오늘은 디자인 및 그래픽 작업에 필수적인 이미지들을 얻을 수 있는 사이트를 소개 해드릴거에요! 특히.. 높은 퀄리티임에도, 무료로 상업적으로도 사용할 수 있어요. Pexels에서는 문장으로 풀어서 Pexels의 모든 사진과 동영상을 무료로 사용할 수 있습니다. 저작권을 고지하지 않아도 됩니다. 꼭 포토그래퍼나 Pexels를 출처로 밝혀야 하는 것은 아니지만 언제든 밝혀주시면 감사하겠습니다. Pexels의 사진과 동영상을 수정할 수 있습니다. 창의력을 발휘하여 원하는 대로 편집하세요. 라고 명시를, StockSnap에서는 cc0 라이선스로 명시 해뒀습니다. ※ cc0란? creativecommons.org/publicdomain/zero/1.0/deed.ko Creative.. [CSS] 콘텐츠 화면 정가운데 정렬하기 창크기를 변경해도 가운데에 있게 만들 수 있는 방법입니다. 로고를 대문으로 또는 임시 안내문구등을 넣을때 활용하면 좋을것 같아요. 먼저 html를 만들어줍니다. HTML 1 2 3 Colored by Color Scripter cs CSS 1 2 3 html{height: 100%;} body{position: relative;width: 100%;height: 100%;} .logo_box{position: absolute;top: 50%;left: 50%;margin:-150px 0 0 -150px} cs 아주 간단하다. 가운데 정렬하고 싶은 콘텐츠를 position:absolute를 주고, 부모에게 position:relative를 준다. 컨텐츠를 top에서 50%만큼 left에 50%만큼 밀어낸 .. 이전 1 2 3 4 5 6 ··· 8 다음
