nueog

dom element 요소를 태그로 바꾸는 기능을 찾아보다가 dom-to-image 라이브러리를 발견했다. How to Render HTML to an Image with JavaScript? Sometimes, we may want to render an HTML document or node to an image with JavaScript. javascript.plainenglish.io 위 글을 참고해서 svg 요소가 포함된 dom element 요소를 이미지로 바꾸었다. 적용한 코드는 다음과 같다. function gridToPng(){ var node = document.getElementById('grid'); //지정한 요소의 자식 요소들을 이미지 태그로 만들게 됨 domtoimage.to..

위와 같은 선을 만들려면 svg 태그안의 line 요소를 활용할 수 있다. 기본적인 구조는 다음과 같다. 여기서 stroke 요소는 채색 요소를 의미한다. 여기서는 색상 코드 #4992fd 와 두께를 3px로 지정해주었다. 하나의 svg 태그에 여러개의 line 요소를 넣고 싶다면, g 태그를 여러개 자식 요소로 넣어주어서 다음과 같이 구성한다. line 요소 말고 다른 그리기 모드를 택하고 싶으면 다음과 같은 요소가 있다. 1. 2. 3. https://www.w3schools.com/graphics/svg_intro.asp SVG Tutorial W3Schools offers free online tutorials, references and exercises in all the major langu..

ASP.net 환경에서 만든 웹 어플리케이션에서 특정 상황에서 android 앱으로 FCM 신호를 보내줘야하는 상황이 생겼다. FCM 을 보낼 때는 페이로드에 형식을 지켜서 보내주면 된다. 나는 Notification 이라는 클래스를 만들어서 사용했다. public class Notification { public string SendNotification(string DeviceToken, string title, string msg) { var result = "-1"; var httpWebRequest = (HttpWebRequest)WebRequest.Create(NumDefine.webAddr); //https://fcm.googleapis.com/fcm/send httpWebRequest.Co..

.net 으로 개발하는 화면을 현재 회사에서 사용하는 서버에 배포할 일이 있어서 그 과정을 기록해본다. 과정은 굉장히 간단하다. 전체 검색 > iis (인터넷 정보 서비스) 관리자 > 좌측 메뉴의 사이트에서 현재 서버에서 가동 중인 사이트를 확인할 수 있다. 사이트를 클릭하고 우측에 보이는 '웹 사이트 추가'를 클릭하면 기본적인 정보를 입력하고 파일이 있는 실제경로를 입력하면 웹 사이트가 최종적으로 바인딩된다. IP 주소는 '지정하지 않은 모든 IP'라고 지정을 했다. 그런데 여기서 바인딩을 하고 난 후 IE에서는 작동이 되는데 크롬이나 엣지에서는 작동이 안되는 문제가 있었다. 이유를 찾아보니 크롬이나 엣지에서는 일부 포트를 다른 목적으로 사용하기 위해서 막아놓았다고 한다. 그래서 기존에 사용하는 87번..

static - 포지셔닝이 안 된 요소 relative / fixed / absolute - 포지셔닝이 된 요소 - realative : 원래 있던 요소 기준 - fixed : 브라우저 기준 - absolute : 가장 가까운 포지셔닝이 된 조상 요소가 기준이 됨 -> 예) float 요소의 경우 -> 인라인요소와 겹쳐질 수 없음. 예) 태그 등 float가 여러개 => 그리드 레이아웃을 만들 수 있음. css에서 요소에 clear: ~ 를 하면 요소 방향쪽의 float 가 못뜨게 할 수 있음. clear는 float는 문제를 해결할 수 있음. 보통 를 이용해서 css에서 .clearfix{ clear: left; } 이런식으로 클리어 하고 싶은 div 옆에 추가해줌

1. inline display 2. block 3. inline-block 4. flex 5. list-item 6. none => 정해진 display 요소 바꿀 수 있음. 대부분의 요소들은 inline과 block 에 해당함. 1. inline display: 같은 줄에 머무르려함/ 필요한 만큼의 가로길이만 사용 해당 태그 : , , , , , 2. block display: 독단적인 줄에 가려함/ 최대한 많은 가로길이 차지 해당 태그 : , ~, , , , 3. inline-block: - inline display는 내용에 따라서만 width, height 를 갖기 때문에 바꿀 수 없음 => inline - block 사용해야함 - css i{ display: inline-..

1. css 속성 상속 - html test tesst -css .div1{ color: blue; } => div 안의 h1, p 태그는 div 태그의 상속을 받아서 폰트 컬러가 blue로 변함 => 하지만 속성과 태그에 따라 상속 여부가 달라짐 상속 OK 속성 1) color 2) font-family 3) font-size 4) font-weight 5) line-height 6) list-style 7) text-align 8) visibility 2. 상속 되지않는 속성 태그! => 상속 되게 하려면 해당 속성 값에 inherit 값을 쓰기 ex) in css .div1 a { color : inherit; } 3. CSS 우선 순위 1) 단순 중복 - css h1{ color: blue; te..

유용한 사이트 W3Schools 태그 설명 jsfiddle.net html + css 결과 확인 용이 내 코드 공유 가능 font style font-weight : 폰트 굵기 폰트와 브라우저에 따라 지원하는 굵기가 다름 text-align : 텍스트 정렬 left right center 기본: 왼쪽 정렬 test decoration : 텍스트 데코레이션 line-through : 취소선 none : 텍스트 선 x overline : 위쪽 선 태그 별 스타일링 a 태그를 가운데 정렬 -> div 태그로 감싸서 정렬해주기 a 태그는 가로 전체 넓이를 사용하지 않기 때문 line height 줄간격 조절 가능 font-size : 칸에 들어갈 폰트 사이즈 지정 line-height : 전체 칸 높이 조절 폰..