Web Club (3 Page)

자바스크립트 비공개 프로퍼티와 메서드

JS 비공개(private) 멤버 및 특권(privileged) 메서드 자바 등 다른 언어와는 달리 자바스크립트에는 private, protected, public 프로퍼티와 메서드를 나타내는 별도의 문법이 없습니다. 객체의 모든 멤버는 public, 즉 공개되어 있습니다. 자바스크립 객체의 모든 멤버는 공개되어 있다 위에 언급했듯이 다른 언어와 달리 별도의 문법이 없기 때문에 일반적으로 객체의 모든 멤버는 공개되어 있습니다. 다음의 예제를 살펴봅니다. javascript var myObj = { myProp : 1, getProp: function () { return this.myProp; } }; console.log(myObj.myProp); // myProp 에 공개적으로 접근할 수 있다. co..

JavaScript/JS 객체지향 프로그래밍 2018. 12. 25. 21:06

#2 HTML Element

html 에서 자주 사용되는 요소와 그 특성에 대해 알아보도록 하겠습니다. 문서에서 사용되는 주 언어 설정 html 루트 요소에 lang 속성을 사용하여 문서에 사용되는 언어(language)를 설정할 수 있습니다. html 그리고 이에 대한 언어 코드는 ISO 639(전 세계 언어 명칭에 고유 부호를 부여하는 국제 표준)를 참고하여 언어를 설정하도록 합니다. 한국어 - ko 또는 ko-KR(Korea of Republic) 영어 - en 중국어 - zh 일본어 - ja 이러한 속성은 장애인을 위한 장치인 화면 낭독 프로그램인 스크린 리더기 통해서 위와 같은 속성을 읽게 해줌으로써 음성이 어떻게 출력될 지를 결정해 줄 수 있습니다. Headings, Paragraphs, Lists, Links, img,..

HTMLㆍCSS 기초 강좌/HTML 2018. 12. 20. 14:24

#1 HTML 이란 무엇인가?

HTML 이란 무엇인가? HTML 은 Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다. 다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있습니다. 그렇다면 웹 페이지는 무엇일까? 웹 페이지(web page)는 월드 와이드 웹 상에 있는 개개의 문서를 가리킵니다. .gif, jpg, .Ai, .pdf, .doc, .hwp 이와 같은 확장자 포맷이 있듯이 HTML 은 .htm, .html 확장자 포맷을 가지고 있습니다. 이 html 문서는 단순히 텍스트 파일에 불과하고 웹 브라우저가 해석을 해서..

HTMLㆍCSS 기초 강좌/HTML 2018. 12. 20. 13:28

디바운스(Debounce)와 스로틀(Throttle ) 그리고 차이점

Throttle, Debounce & Difference 스로틀(Throttle)과 디바운스(Debounce)란 무엇일까? 이 두 가지 방법 모두 DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 양적인 측면, 즉 이벤트(event)를 제어(제한)하는 방법입니다. 예를 들어, 웹/앱 사용자가 스크롤(scroll wheel), 트랙패드, 스크롤 막대를 드래깅 한다고 가정해 봅니다. 스크롤(scroll wheel), 트랙패드, 스크롤 막대를 드래깅을 하게 되면 사용자는 크게 느끼지 못할 수 있으나 이 행위로 인해 수많은 스크롤 이벤트가 발생하게 됩니다. 즉, 사용자가 아래로 5000픽셀 정도의 스크롤 다운을 한다면 100 개 이상의 이벤트가 발생될 가능성이 큽니다. 이러한 스크롤(scr..

JavaScript/JS 활용 & etc.. 2018. 12. 17. 18:02

Pure CSS : Layer-popup Auto center box #2

레이어팝업을 CSS만으로 자동 중앙 정렬하기 #2이전 포스팅에서 CSS 만으로 가상요소 및 기타 테크닉을 이용하여 레이어 팝업을 중앙정렬 하는 방법에 대해 알아보았습니다.이번에는 display: table 을 이용하여 중앙정렬시키는 방법에 대해 알아보도록 합니다. Pure CSS - layer Auto align Box다음의 코드뷰를 통해 살펴보도록 합니다.See the Pen layer auto align box by jaeheekim (@jaehee) on CodePen. css /** * ==========================================================+ * Layer-popup Center Box - http://http://webclub.tistory.co..

StyleSheet/CSS 2018. 12. 14. 17:10

Pure CSS : Layer-popup Auto center box #1

레이어팝업을 CSS만으로 자동 중앙 정렬하기이번 글에서는 CSS 만으로 레이어팝업 콘텐츠를 가로,세로 중앙정렬하는 방법에 대해 알아봅니다.일반적으로 레이어팝업을 중앙정렬 시키는 방법은 팝업 콘텐츠에 고정(fixed) 또는 절대(absolute) 위치를 정의하고 left: 50%; top:50%; 를 선언한 후 팝업 콘텐츠 너비,높이값에 따라 스크립트로 너비, 높이의 1/2 값을 margin-left, margin-top 에 음수값으로 정해주는 방법을 많이 사용합니다.하지만 여기서는 스크립트 제어가 필요없이 그리고 레이어 콘텐츠 너비,높이에 상관없이 중앙 정렬시키는 방법에 대해 알아보도록 하겠습니다. Pure CSS - layer Center Box간단하게 레이아웃을 구성하고 레이어팝업에 대한 마크업이 다..

StyleSheet/CSS 2018. 12. 14. 17:10

플로팅(float) 레이아웃과 clear 속성

레이아웃 디자인 - Floating 뷰포트(Viewport)와 관련하여 레이아웃(배치)을 다루기 위한 float, clear 속성에 대해 알아보겠습니다. 플로팅 레이아웃(float) 대표적인 레이아웃 테크닉인 플로팅(Floating)을 알아보고, 이 속성과 관련된 clear 속성에 대해 알아봅니다. 일반적인 레이아웃 흐름(Normal Layout Flow) See the Pen normal layout by jaeheekim (@jaehee) on CodePen. CSS 가 미반영된 화면에서 위에서부터 아래 방향으로 나열되는 것이 일반적인 레이아웃 흐름이라고 할 수 있습니다. 위 HTML 코드 마크업상 요소 다음에 요소의 순서대로 제목이 나오고 단락이 나오는 형태가 HTML 문서를 해석한 웹브라우저가 화..

StyleSheet/CSS 2018. 12. 12. 16:31

접근성 테이블(scope, id & headers)

Table의 scope 지정하기 시각 장애인들은 눈으로 브라우저를 볼 수 없으므로, 스크린 리더기라는 프로그램을 통하여 표에 대한 정보를 귀로만 들어야 합니다. 이런 이유로 table의 각 셀에 대한 해당 영역(scope)을 지정하여 프로그램이 데이타를 읽어 내려가는 순서를 만들 수가 있습니다. 이것은 웹표준 및 접근성에 커다란 이점을 가져다 줄 수 있습니다. table의 scope=”col”과 scope=”row” 위 표그림의 경우, 스크린 리더기가 읽는 순서는 “면적195 → 매매가87,500 → 전세가38,500″ 입니다. 면적, 매매가, 전세가는 thead에 해당하는 라인으로 scolpe=”col(열↓)”로 해당 영역을 다음과 같이 지정할 수 있습니다. html 면적(㎡) 매매가(만원) 전세가(만..

HTMLㆍ웹표준ㆍ 웹접근성 2018. 11. 27. 11:06

동기와 비동기 방식(Asynchronous processing model)

동기식 처리 모델 vs 비동기식 처리 모델 해당 내용은 동기식 처리 모델 vs 비동기식 처리 모델 에 대한 글을 발췌한 포스팅임을 알려드립니다. 동기식 처리 모델(Synchronous processing model) 동기식 처리 모델(Synchronous processing model)은 직렬적으로 태스크(task)를 수행한다. 즉, 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기하게 된다. 예를 들어 서버에서 데이터를 가져와서 화면에 표시하는 작업을 수행할 때, 서버에 데이터를 요청하고 데이터가 응답될 때까지 이후 태스크들은 블로킹(blocking, 작업 중단)된다. 동기식 처리 모델(Synchronous processing model) 다음은 동기식으로 동작하는 코드로, 순차적..

JavaScript/Core & 개념ㆍ용어 2018. 10. 18. 09:52

CSS Flex 이슈와 그에 대한 해결책

CSS flex: Webkit, Android 2.1~4.3, IE 10 문제 해결. CSS Flex 이슈와 그에 대한 해결책에 대해 알아봅니다. Webkit 이슈 웹킷 계열 브라우저에서는 폼 콘트롤 요소가 플렉스 아이템이 되지 않기 때문에 플렉스 흐름에 참여하지 않습니다. 폼 콘트롤 요소가 플렉스 아이템이 되어 플렉스 흐름에 참여하도록 하려면 -webkit-appearance:none; 처리해야 합니다. 이 문제는 Android 뿐만 아니라 웹킷 계열 브라우저(Chrome, Safari) 공통의 문제입니다. 안드로이드 2.1~4.3 이슈 안드로이드 2.1~4.3 브라우저는 2009년 플렉스 명세에 -webkit- 접두사를 붙여야 지원할 수 있습니다. 지원하는 속성 수가 최신 표준에 비해 적고 속성 전체..

StyleSheet/CSS 2018. 10. 16. 14:43

Flexible box Layout - 플렉스 박스 #2

플렉스 박스 #2 앞선 포스팅에서 언급했듯이 플렉스박스 레이아웃 모드는 여유 공간에 따라서 플렉스 항목의 너비 또는 높이를 유연하게 변형시킬 수 있는 기능을 기반으로 하고 있습니다. 그래서 당연히 플렉스박스 모듈은 항목들의 크기를 변화시키는 방법에 대한 탁월한 제어 능력을 제공해 주고 있습니다. 이번 포스팅에서는 앞에서 미처 설명하지 못한 플렉스박스 속성들과 그 기능에 대해 계속 알아보도록 하겠습니다. order 앞선 내용에서 flex-direction, flex-wrap 그리고 이 두 개의 단축 속성을 지정할 수 있는 flex-flow 들은 플렉스 항목의 순서와 방향을 효과적으로 제어할 수 있게 해줍니다. 그런데 시각적인 순서에 관해서는 이보다 더 제어력이 뛰어난 order 라는 속성이 있습니다. or..

StyleSheet/CSS 2018. 10. 12. 14:46

Flexible box Layout - 플렉스 박스 #1

플렉스 박스 레이아웃이번 포스팅에서는 새로운 레이아웃 모듈 중에 가장 포괄적인 격자 레이아웃과 함께 유동적인 레이아웃 모듈 또는 플렉스박스라고 하는 모듈에 대해 소개하고자 하는데, 이 모듈은 보다 복잡한 웹 페이지와 응용프로그램들을 구현할 수 있도록 설계된 새로운 레이아웃입니다.이 플렉스 박스는 일상적으로 발생하는 문제들을 많이 처리할 수 있고 웹 페이지의 배치에 획기적으로 변화를 주는 잠재성을 보유하고 있습니다.플렉스박스가 등장하면서 레이아웃의 까다로운 점, 즉 융통성을 부여하거나 공간 분배와 같은 문제를 해결하면서 CSS가 추구하는 기본 개념을 그대로 반영하는 솔루션을 제공할 수 있게 되었습니다.아직까지 IE와 같은 구형 브라우저의 지원률이 미흡하지만 모바일에서는 지금 당장이라도 사용할 수 있으며 웹..

StyleSheet/CSS 2018. 10. 12. 14:45

Web Font - @font-face 적용 방법

Font(서체)의 사용 좀 더 흥미진진한 웹 사이트를 만들고 싶을 때 첫 번째로 고려하게 되는 것은, 표제어나 단락 등, 페이지를 구성하는 각 요소에 서로 다른 서체를 지정하는 것입니다. 최근의 모든 브라우저들은 웹 서체(Web Font)라는 것을 지원하며 사이트를 볼 때 다운되는 서체를 웹 폰트라고 합니다. 웹 폰트 또한 font-family 속성을 사용하지만, @font-face 지시어(directive)라는 CSS 명령어를 사용해서 웹 브라우저에게 해당 서체를 다운로드할 것을 알리면서 사용할 수 있습니다. 사용자는 이미 검증된 서체만 사용하는 방법을 택할 수도 있고(대부분의 컴퓨터에 설체된 기본 서체만 사용하는 방법), 아니면 웹 폰트를 사용해 더 많은 폰트 가운데 하나를 골라 쓰는 방법을 택할 수..

StyleSheet/CSS 2018. 10. 12. 11:03

Font Size(Unit 단위) #2

Font Unit (폰트 단위 크기 비교) css에서는 글자 폰트 크기나 width, height 등의 크기를 pt, px, em, ex, % 등의 다양한 단위를 사용할 수가 있다. 대부분 프론트 개발 시에는 px 단위를 사용하고 있지만 요즘 트렌드인 반응형(RWD)이나 모바일로 인하여 em, % 단위를 사용하고 있는 추세이기도 하다. pt, px 은 절대적인 크기를 나타내는 반해서 em, ex, % 는 상위 엘리먼트에 대한 상대적인 크기를 나타낸다. em, ex, % 단위의 장점이라면 웹 브라우저의 메뉴에서 글꼴 크기를 조절할 수 있고, 그에 따라 레이아웃이 유동적으로 변화 될 수 있기 때문에 접근성이 향상된다. 즉, 작은 글자를 보기 어려운 사람들도 글자 확대를 하여 쉽게 볼 수 있다는 점이다. 그럼..

StyleSheet/CSS 2018. 10. 11. 10:39

Font Size(Unit 단위) #1

Font Unit (폰트 단위 크기 비교) 텍스트 크기를 지정하는 CSS 속성은 font-size입니다. 크기 다음에는 항상 측정 단위(unit of measurement)를 사용합니다. 예를 들어,font-size : 1em; 이 속성에는 주는 값과 크기 단위가 텍스트의 크기를 결정하는데, CSS 는 어지러울 정도로 많은 단위를 지원하고 있습니다. 픽셀(px), 인치(in), 센티미터(cm), 퍼센트(%), 밀리미터 등등.. 이러한 측정 단위 가운데 인쇄물에 주로 쓰이던 pc(pica 의 줄임말로, 1pc 는 12pt), pt(point 의 줄임말로, 1pt 는 1/72인치), in(inch 의 줄임말) 등등은 웹 페이지에서는 제대로 동작하지 않는데, 모니터마다 달리 보일 수 있기 때문입니다. 하지만 ..