본문 바로가기

Web Code29

[jQuery] 얼럿 / 컨펌 박스 띄우기 alert / confirm box 띄우기 / 경고창 안내창 띄우기 컴펌 박스는 확인과 취소 버튼이 있는 확인 창으로 간단하게 사용이 가능하다. 주로 취소 버튼 또는 어떠한 정보를 작성 완료 후 나오는 팝업창이라고 생각하면 쉽습니다. 얼럿은 간단하게 확인을 하고 넘어가는 경우에 주로 사용된다. 컨펌과 얼럿 2개 다 내용이 변경 가능하며, 버튼클릭 시 노출되는거 뿐만 아니라 다른 태그로 이용이 가능하다. 2020. 8. 17.
[CSS] 마진 과 패딩 차이 / Padding 과 Margin 차이 border를 기준으로 안쪽은 Padding 밖은 Margin으로 생각하면 된다. 검은색 선을 기준으로 회색 구역은 padding 영역이며 밖에 흰색 구역은 margin 영역으로 만약 border를 사용할때, 안쪽 구역을 줄이고 싶을때는 padding값을 줄여 border구역을 줄일 수 있으며, 반대로 넓히고 싶을때는 margin값을 줄이고 padding값을 높이면된다. 2020. 8. 16.
[html] input 회원가입 폼 / 회원가입 양식 / 회원가입 폼 소스 / 전화번호 정규식 - bootstrap bootstrap 4 기반 회원가입 From 아이디 비밀번호 비밀번호 확인 이름 전화번호 휴대번호 주민번호 메일주소 생년월일 2020. 8. 10.
[html] input 타이핑 후 div생성 삭제 및 클릭 시 수정 / bootstrap Tokenfield 이용법 오늘의 포스팅은 메일에서 자주 사용되는 bootstrap Tokenfield이다. bootstrap Tokenfield는 아래 이미지와 같이 더블 클릭 시 수정이 가능하며, 추가하기 영역에 클릭 후 타이핑 엔터를 하면 새로운 div가 생성되며 x를 누르면 삭제되는 기능이다. 부트 스트랩에서 지원하는 기능이므로, 부트스트랩 css링크와 js링크이용해야 사용할수있다. 자세한 내용은 아래 링크로 확인 할 수 있다. Tokenfield for Bootstrap tokens string, array [] Tokens (or tags). Can be a string with comma-separated values ("one,two,three"), an array of strings (["one","two","th.. 2020. 8. 3.
[html] 웹 에디터 편집기 / 추천 Quilljs웹 에디터 / WEB Editor 오늘 포스팅은 Quilljs의 웹에디터 포스팅 입니다. 아래 보는 이미지는 에디터 화면입니다. Quilljs웹 에디터의 기능들 입니다. 테마로 "버블"또는 "스노우"입니다. 유효하지 않거나 잘못된 값은 기본 최소 테마를 로드합니다. 테마의 특정 스타일 시트는 여전히 수동으로 포함해야합니다. Inline 배경색 - background 굵게 - bold 색깔 - color 폰트 - font 인라인 코드- code 이탤릭체- italic 링크- link 크기- size 취소 선- strike 위첨자 / 아래 첨자- script 밑줄- underline Block 인용구- blockquote 헤더 - header 들여 쓰기- indent 리스트- list 텍스트 정렬- align 텍스트 방향- direction.. 2020. 8. 2.
[Html] Font Awesome(폰트 어썸) 오류 해결법 Font Awesome을 사용 하다보면 사진과 같이 네모로 표기가 되는 경우가 있다. 이번 포스팅은 Font Awesome의 오류법을 해결하는 법이다. 1. 로컬파일 확인 간단한 방법이지만 놓치고 가는 경우가 많다. 로컬에서 Font Awesome의 font나 css, js가 하나라도 빠지면 오류가 나는 경우가 종종 발생한다. 놓치고 간 파일들을 로컬에 추가하면 해결이 된다. 2. CDN 로컬이 아닌 CDN으로 외부링크를 걸었을 경우 css 스타일 링크만 걸려있는 상태이므로, js가 빠질수도 있다. 이경우 js를 로컬로 연결할 경우 해결할수 있다. 3. font-weight 폰트굵기가 300, 500, 또는 700일 경우 오류가 생기는 경우가 종종 있다. .fa,.fab,.fad,.fal,.far,.fa.. 2020. 7. 25.
[Html] Font Awesome(폰트 어썸) 사용법 / 로컬 / 다운받아서 적용법 가장많이 사용 되고 있는 웹 아이콘 폰트는 Font Awesome입니다. Font Awesome이란 이러한 웹 아이콘 폰트를 모아놓은 라이브러리입니다. 이번 포스팅에서는 Font Awesome를 적용하는 법을 알려드리려고 합니다. 1. CDN 선언 CDN이란 간단히 말해서 내부 로컬에 저장을 하지 않은 상태에서 외부 링크를 달아 적용시키는 방식이다. 위와 같이 태그 사이에 추가를 하면 끝이다. link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevo.. 2020. 7. 25.
[Html] 폰트 굵기 조정 CSS / font-weight / 폰트 굵기 태그 normal : 보통 굵기입니다. 숫자 400과 같습니다. bold : 굵은 굵기입니다. 숫자 700과 같습니다. bolder : 상속된 값보다 굵은 굵기입니다. lighter : 상속된 값보다 얇은 굵기입니다. number : 100, 200, 300, 400, 500, 600, 700, 800, 900 initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 태그 이런식으로 b태그로 감싸면 bold효과를 낼수도 있습니다. 중간에 껴서 사용도 가능합니다. 태그 strong태그도 b태그와 마찬가지 입니다. 예제 font-weight normal font-weight bold font-weight 100 font-weight 200 font-weight 300 font.. 2020. 7. 21.
컴퓨터/노트북 캡처 하는 방법 3가지 첫 번째 - 윈도우 캡처 도구 시작 및 검색에서 캡처 도구를 클릭 후 캡처를 할 수 있다. 두 번째 - PRT SC(Print Screen) 프린트 스크린 키를 누른 후 포토샵 및 그림판에서 컨트롤+V를 누르면 복사됐던 화면이 노출된다. 세 번째 - 알캡처 (이스트소프트) 이 프로그램은 개인뿐만 아니라 기업도 무료로 사용할 수 있다. 키보드의 Print Screen SysRq을 누를 때 바로 실행된다는 점이 장점. 웹페이지 전체를 캡처하는 기능은 없지만 단순하게 화면 전체나 특정 구간을 캡처하는 데엔 편하게 쓸 수 있다. 프린트 스크린 키를 누르면 위와 같은 창이 뜬다. 다양한 방식으로 캡처가 가능하고 프린트 스크린을 눌렀을때 바로 사용가능한 장점이 있다. 하지만, 단점으로는 프로그램을 설치해야 된다는 .. 2020. 7. 13.