티스토리

깍돌이
검색하기

블로그 홈

깍돌이

ipex.tistory.com/m

Software_QA,web-front-end,Linux,Unix

구독자
8
방명록 방문하기

주요 글 목록

  • [VanillaJS] Index.html ( 페이지 기본 구성 ) 안녕하세요 VanillaJS를 통해서 특정 작업을 하기전에 페이지 관련 내용들을 작성하여야 합니다. (포스팅이 조금 늦은감이 있지만 ㅜ 주말까지 일을 하다보니.... ) index.html 이죠!! 제작되고있는 전체 코드는 아래에 있습니다. (github) 에 올려놓고 있죠 후훗 reactStudy/myVaniilaJS 에 있습니다. VanillaJS 개요 https://ipex.tistory.com/224 그래서 오늘은 페이지의 메인이 되는 index.html 을 작성하려고 합니다. index.html 우선 해당 메인 페이지 의 작성은 프론트엔드 체크리스트 라는 사이트를 통해서 작성 하였습니다. 해당은 선언문입니다. doctype html> 자칫 태그로 잘못 아실수 있지만 태그는 아니고 해당 HTML .. 공감수 0 댓글수 0 2019. 1. 9.
  • [JavaScript - USE - JS] 싱글톤 인스턴스 생성 (Singleton Instance Create for JavaScript) 안녕하세요 정말 오랜간만에 포스팅을 하는 것 같습니다. ㅜㅜ 회사일이 너무 바쁘네요;; 주말에는 잠만 자구.. 사실 이번 포스팅도 조금 억지 스러울 수 있는데요 당연히 포스팅한줄 알았지만 포스팅이 안되어있어서 포스팅하게 되었습니다. JavaScript를 통한 싱글톤 인스턴스 생성인데요 Prototype의 경우 Instance = (function(){ function Instance(name){ this.eventObj = { "key":"value" } }// new를 하지 않으면 애초에 생성 불가 Instance.prototype.In = function(module,eventListener){ // this.eventObj 가능 console.log(this.eventObj); } Instance... 공감수 0 댓글수 0 2018. 12. 3.
  • [HTML5] i 태그 및 span 태그 안녕하세요 오늘은 i태그 와 에 대해서 작성하려고 합니다. 태그공부가 다시 제대로 되어야 할거 같아서 작성하게 되었습니다. 네이티브 코드를 다루는 일을 한다면 좀 더 좋을텐데 아니다 보니 자꾸 까먹게 되는 것 같습니다. 음 i 태그 와 span 태그 에 작성에 앞서 mdn 등 공식 자료를 먼저 보는게 나을거같아요 이거 먼저 가져 와보겠습니다. 자료는 역시 MDN! The HTML element represents a range of text that is set off from the normal text for some reason. Some examples include technical terms, foreign language phrases, or fictional character thought.. 공감수 1 댓글수 3 2018. 11. 19.
  • [JavaScript - USE - HTML] 자바스크립트를 이용한 script 태그 동적 추가 (dynamic append HTML 'script' tags using javaScript) 안녕하세요 태그를 추가할때 동적 으로 추가 하는 방법 중 하나를 소개하고자 합니다. JS - USE 포스팅에선 단순하게 코드 위주로 포스팅 하려고 하기 때문에 간단 설명과 코드 첨부 합니다. 다음 Post 서비스를 cdn 으로 동적 추가 하는 코드 var daumPostcdnURL = "http://dmaps.daum.net/map_js_init/postcode.v2.js?autoload=false"; var daumPostCDNScript = document.createElement('script'); daumPostCDNScript.setAttribute('src',daumPostcdnURL); daumPostCDNScript.onload = function(){ console.warn('daumPo.. 공감수 1 댓글수 0 2018. 11. 12.
  • [CSS3] CSS 우선순위 cascading order 안녕하세요 오늘은 CSS의 우선순위에 대해 작성해보려고 합니다. 작성할 생각이 없긴 했는데 업무하다 가 CSS 관련 우선순위 에 대한 테스트 파일을 만들게 된게 조금 아쉬워서 포스팅하게 되었습니다. 기본적으로 CSS 우선순위는 1 순위 -> !important2 순위 -> inline style attirbute ex: 3 순위 -> id4 순위 -> 없는 attribute가 있을 경우5 순위 -> tag element 아래의 자료를 보면 어느정도 이해가 되실텐데요 CSS order https://www.w3schools.com/css/css_howto.asp 오늘 포스팅할 내용은 우선순위가 같을 경우는 지정한 개수가 더 많은 css가 높은 우선순위를 지니게 되는데요 이점에 대해서 작성하려고 합니다. 우.. 공감수 0 댓글수 0 2018. 10. 31.
  • [JavaScript - USE - HTML5 ] 자바스크립트를 이용한 드래그 앤 드롭 2 (Drag and Drop using JavaScript and HTML5) 넵 저번 포스팅에서 drag and drop 에 대해서 정말 간단하게만 작성 하였는데 drop까지는 못했던것 같습니다. 그 마무리 작업을 하도록 하겠습니다. // 자바스크립트를 이용한 드래그 앤 드롭 1탄!https://ipex.tistory.com/entry/JavaScript-USE-HTML5-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EB%93%9C%EB%9E%98%EA%B7%B8-%EC%95%A4-%EB%93%9C%EB%A1%AD-Drag-and-Drop-using-JavaScript-and-HTML5 우선 저번 코드에서 해줘야 할 작업이 있습니다. 객체를 이동할건데요 이동하.. 공감수 4 댓글수 0 2018. 10. 15.
  • [JavaScript - USE - HTML5 ] 자바스크립트를 이용한 드래그 앤 드롭 (Drag and Drop using JavaScript and HTML5) 안녕하세요 정말 오랜만에 포스팅을 하는거 같습니다... 회사일이 너무 바쁜것.. 이번 포스팅에서는 HTML5 에서 제공하는 Drag and Drop 에 대해서 작성할 예정입니다. 물론 테스트 브라우저는 Chrome 입니다. 우선적으로 HTML5에 drag and drop 에 대한 mdn 주소입니다. // HTML5 drag and drop MDNhttps://developer.mozilla.org/ko/docs/Web/API/HTML_%EB%93%9C%EB%9E%98%EA%B7%B8_%EC%95%A4_%EB%93%9C%EB%A1%AD_API 우선 드래그를 하기 위한 target 데이터와 드롭을 할수 있는 드롭 존 2개를 만들어 보도록 하겠습니다. 자 이렇게 2개의 div를 만들었습니다. (HTML 코드는.. 공감수 2 댓글수 0 2018. 10. 11.
  • [CSS3] flex Box - justify-content, align-items 안녕하세요 이번 flex에서는 container 속성에서 기존에 있던 direction 속성을 알아야 사용할수가 있는 속성인 justify-content 와 align-items 속성에 대해서 포스팅을 하려고합니다. 알아야 하는 이유는 justify -content ( 가로축 - 중심축 ) align-items ( 세로축 - 교차축 ) 이기 때문에 flex-direction : row, row-reverse, column , column-reverse 의 속성을 알아야 현재 컨테이너에 어떤 정렬을 넣어야 하는지 알수 있기 때문입니다. justify-content > 가로 축을 기준으로 좌우에 대한 정렬을 관장 합니다.속성 나열은 아래와 같습니다. flex-start (default) >> 요소들을 컨테이.. 공감수 15 댓글수 0 2018. 8. 16.
  • [JavaScript - USE - CSS3 ] 자바스크립트를 사용하여 html 태그에 들어오는 이벤트를 차단 (Using JavaScript to block events entering html tags) 특정 태그에 대한 이벤트 받는 형식을 막고 싶을때 예를 들면 input#testEvents:checked+label { /* do thing */ } 인데 do thing 에서 CSS3 애니메이션을 사용한다고 가정할때 ex) transform: translateX(120%); 해당 애니메이션이 실행안되게 하고싶은데 CSS속성을 똑같이 하나 클롬을 떠서 (js)로 애니메이션만 제외하고 이런건 너무 무식한 방법 같고 찾다 보니 events를 받지 못하게 하는 방법이 있다고 해서 적용 해보았습니다. 답은 pointerEvents 값으로는 auto none stroke /* SVG -only */ fill /* SVG -only */ a[href="http://localhost"]{ pointer-events:.. 공감수 0 댓글수 0 2018. 7. 31.
  • [CSS3] flex Box - flex-wrap (줄 넘기기 ) && flex-flow (방향 + 줄 넘기기) 안녕하세요 이번에는 flex에서 flex-wrap ( 줄 넘기기 ) 와 기존에 포스팅 하였던 flex-direction 과 flex-wrap 을 한꺼번에 제어하는 flex-flow ( 방향과 줄넘기기 ) 에 대해서 작성 하려고 합니다. flex-wrap nowrap (default) wrap wrap -reverse flex-wrap 은 컨테이너의 크기보다 아이템들의 크기가 늘어났을 때의 어떻게 동작할 것 인가에 대한 속성 지정입니다. display: flex 인 flex에서는 flex-wrap으로 지정 합니다. 1. nowrap (Default) flex-wrap을 지정하지 않은 경우는 기본이 nowrap 입니다. 그렇기 때문에 기본적으로 nowrap 은 위와같이 동작합니다 박스안에 초록 아이템들이 위.. 공감수 2 댓글수 0 2018. 7. 24.
  • [CSS3] flex Box - flex-direction (생성 방향) 안녕하세요 flexBox Model 중 flex-direction( 플렉스 - 방향 ) 에 대해서 작성 하려고 합니다. ( 테스트한 전체 코드는 포스팅 하단에 있습니다. ) flex-direction row (default) row-reverse column column-reverse flex-direction 이라 함은 컨테이너 내부의 아이템들이 만들어지는 방향을 뜻 합니다. 안의 초록 박스가 Items (이후에도 계속 해당 방식으로 작성 하려고합니다. ) 겉의 빨간 줄? 로 덮여진 박스가 Container 라고 보시면 됩니다. 1. row (default) 좌 -> 우로 만들어지는 방식이며 상태에서 태그를 하나 더 추가한다면 점선으로 되어있는 쪽에 추가가 될 것입니다. - 결과 화면 2. row-re.. 공감수 2 댓글수 0 2018. 7. 23.
  • [CSS3] flex Box Model flex Box 모델 기존에 사용하던 inline inline-block , table 등이 아닌 flex라는 모델이 CSS3에서 도입되었습니다. flex에서 가장 좋았던 점은 세로 수직 정렬이든 여러 정렬등이 너무 편리하게 동작할수 있다는 점이고 flex박스에 장점은 동적은 변경 가능한 순서를 지정하고 사용할 수 있는 공간내에서 자동으로 너비와 높이를 지정 할 수 있습니다. 이제부터 flex display 로만 화면을 구성해볼겁니다. 아래의 화면도 전부 flex로 구성되어있으며 아래 화면에 대한 html 코드 리뷰를 하고 다음 포스팅부터는 flex의 속성 하나하나 훑어볼 예정입니다. 기준은 Chrome을 기준으로 하겠습니다. IE에 대한 트러블 슈팅은 따로 .. CSS3 FlexBox header 태그.. 공감수 0 댓글수 0 2018. 7. 2.
  • [HTML5] OverView HTML5 까지의 기본 적이 역사(?) 에 대해 나열해 보았습니다. HTML 등장시기 1991년 에 나왔으며 1993에 공식 발표 HTML 1.0 - 1991년 10월 HTML 2.0 - 1995년 11월HTML 3.2 - 1997년 1월HTML 4.0 - 1997년 12월HTML 4.01 - 1999년 12월HTML5 - 2008년 1월, 2014년 10월 현재 권고안 (Recommendation) 확정 p 태그로 감싸진 문장이 있다면 문단 (Paragraph)로 인식하게 됨 > 태그가 없는 경우에는 그냥 단순 텍스트로 표시합니다. 태그는 단독 사용형 태그와 시작 - 끝 형의 태그가 있습니다. 1. 단독 사용형 > img , hr , br 2. 시작 - 끝 태그 영역형 html,body,head,tit.. 공감수 0 댓글수 0 2018. 6. 26.
  • [JavaScript - USE] 객체의 길이 가져오기 (To get length of object) 자바스크립트의 배열 [ ] 의 경우에는 length 를 통하여 길이를 간단하고 손쉽게 가져 올 수 있습니다. 하지만 obj의 경우에는 length 를 지정하게 되면 undefined 가 나타납니다. obj 의 경우 length 의 길이를 구하기 위해서는 Object.keys를 이용해야 합니다. var objS = {name:"test",ttt:"NewTest",kim:"kim"}; console.log("obj.length : ",objS.length); console.log("Object.keys Length : ",Object.keys(objS).length); Object.keys에 대해 간단하게 적어 보면 Object.keys(obj)obj -> 열거형 고유 속성이 반환될 개체 return Val.. 공감수 5 댓글수 2 2018. 6. 21.
  • [CSS] display - inline,block,inline-block display : block 한줄에 나열하지 않으며 해당 태그 자체를 한줄로 표현합니다.(기본적으로 width 100%)margin,width,height 속성 정의 가능합니다. display : inline줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향 ex: a태그(width 와 height 속성이 적용되지 않음 margin-top,margin-bottom 속성 적용 X)최소한의 간격 유지를 위해서 기본 내부 margin 5px 발생 (웹브라우저에 의해)inline 태그는 높이와 너비가 품고있는 내부 요소의 부피에 맞게 맞춰 집니다. display : inline-blockmargin,width,height 몸두 제어 가능 (좌우 5px의 기본 여백 )inline-block의 너비와 높이.. 공감수 0 댓글수 0 2018. 6. 21.
  • [JavaScript - USE] 브라우저 타입 확인 후 클라이언트 텍스트 파일 다운로드 ( client text file downloading after browser type checking ) 현재 접속한 브라우저를 확인 한다. 자세한 내용은 JS에서 다루고 해당 카테고리에서는 코드만 적어 놓으려고 합니다. 간단하게 var _browserState = 'unknown'; (function checkBrowser(){ var agent = navigator.userAgent.toLowerCase(); if(agent.indexOf("chrome")!=-1){_browserState="Chrome";} else if(agent.indexOf("safari")!=-1){_browserState="safari";} else if(agent.indexOf("firefox")!=-1){_browserState="firefox";} else if(agent.indexOf("msie")!=-1 || agen.. 공감수 0 댓글수 0 2018. 6. 8.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.