-
[비공개] CSS 강좌_폰트/텍스트 숨김처리
CSS 강좌_폰트/텍스트 숨김처리 마크업을 하다보면 화면상에서는 보이지 않지만스크린 리더기와 같은 보조기술을 통해 내용을 전달해야 할 때가 있습니다.이럴 때 사용하는 것이 바로 CSS 텍스트/폰트 숨김 처리 방법입니다. 숨김처리를 하는 방법에는 여러 가지가 있습니다.오늘든 간단한 것들에 대해 알아 보도록 하겠습니다.예전에 포스팅한 "이미지 대체텍스트 기법"을 참고하셔도 좋습니다.이번 포스팅은 css의 매우 기본적인 내용이라아마 이 글을 보시는 많은 분들에게 매우 쉬운 내용일 것입니다:)그냥 간단히, 복습 차원에서 봐주세요! 1. 우선 간단히, visibility:hidden 과 display:none에 대해 알아보겠습니다.두 스타일 모두 텍스트.......추천 -
[비공개] HTML강좌_웹접근성 교육_WAI-ARIA
HTML강좌_웹접근성 교육_WAI-ARIA 소개 웹콘텐츠는 위젯, 구조, 행동에 관한 시멘틱 정보가 필요합니다. 이러한 정보들은 스크린 리더기와 같은 도움을 주는 기계를 통해서 몸이 불편한 사람들에게 정확한 정보를 제공합니다. 이번 아티클에서는 이와 연관되어 있는 role, states, 그리고 properties 에 관한 내용을 알아 보도록 하겠습니다. 이러한 기능들은 접근성을 향상 시키며 웹 콘텐츠와 어플리케이션에 관한 명확한 정보를 전달해줍니다. 이 글의 내용은 다음 사이트를 참고하였습니다. http://www.w3.org/WAI/intro/aria.php WAI-ARIA를 사용함으로써 사용자는 커스텀 위젯에 관한 정확한 정보를 얻을 수 있습니다. 이는 웹에대한 접근.......추천 -
[비공개] HTML CSS강좌 _ 클래스 네이밍 방법 (SMACSS, BEM, ..
HTML CSS강좌 _ 클래스 네이밍 기법 SMACSS (Scalable and Modular Architecture for CSS) -소개SMACSS는 엄격한 프레임워크 보다는 스타일 가이드에 초점을 맞추었습니다. 다운로드와 인스톨없이 바로 사용가능하며, 디자인 프로세스 진단과 기존의 경직된 프레임워크를좀 더 유연하게 만드는 것을 목표로 하고 있습니다. -5가지 기본적인 규칙SMACSS의 핵심은 바로 분류, 또는 범주화 (categorization) 입니다. CSS룰에 대한 분류를 통해, 일정 패턴과 더 좋은 정의를 내릴 수 있습니다. 1. Base rules 초기값 설정을 의미합니다. 대부분 하나의 엘리먼트로 이루어져있으며, 속성 선택자, 가상 클래스 선택자, 후손 선택자, 자식 선택자 등으로.......추천 -
[비공개] 북카페_지식인의 서재
북카페_지식인의 서재 (이미지 출처: 스트리트H) 바쁜 일상 속에서도 "탐구"라는 행위를 놓치고 싶지않아평소 "알고" 싶어하는 내용들을 정리해보기로 했습니다.경제- 21세기 자본론 (피케티)- 디드로 효과 vs 베블런 효과 (저서, '유한계급론') + 밴드웨건효과 스노브효과 (하비 라이벤스타인)- 고전적 자본주의 (애덤 스미스) -> 수정자본주의 (케인즈) -> 신자유주의- 칼폴라니 (저서, '위대한 전환') 사회- 유리감옥 (니콜라스 카) 예술/철학-시뮬라크 (발전 단계: 플라톤's 이데아 -> 니체's 우상의 황혼 -> 장 보드리야르 -> Matrix/ 앤디워홀/ 르네 마그리트)-자크라캉 (욕망, 거울단계이론) 연구항목-언어의 기원과 발전.......추천 -
[비공개] HTML 강좌_div 엘리먼트 z-index 이해하기
HTML 강좌_div 엘리먼트 z-index 이해하기z-index는 위 그림에서 엘리먼트를 z 축으로 이동시키는 것을 말합니다. 어떻게 보면 굉장히 간단해 보이지만 복잡한 HTML 계층적 엘리먼트들에 z-index 속성을 지정할 경우 때로는 동작을 이해하거나 심지어 예측하기 어려울 때도 있습니다. *z-index는 다음 두 가지 용어를 명시하고 있습니다. 1. 현재 엘리먼트의 쌓임순서(stacking level) 2. 현재 엘리먼트가 새로운 쌓임맥락(stacking context)을 생성 z-index 속성은 오로지 포지션된 엘리먼트(relative, absolute, 또는 fixed)에만 적용이 되며 세 가지 값이 존재합니다. Value Description auto 쌓임순서를 0으로 설정하고 새로운 쌓임맥락을 생.......추천 -
[비공개] AngularJS (앵귤러JS) _MVC 프레임워크 기본개념
AngularJS (앵귤러JS) _MVC 프레임워크 기본개념 Angular란 무엇인가? AngularJS란 동적인 웹앱을 구현하기 위해 구글에서 제작 배포하고 있는 구조적 프레임워크라고 합니다. 특히, Angular의 데이타 바인딩(data binding)과 의존성주입(dependency injection)은 코드를 매우 간결하게 만들어 줍니다. 일반적으로, 동적 어플리케이션과 정적인 문서 사이의 문제점은 다음과 같이 해결합니다. a library - 유용한 기능들을 모아 놓은 것을 말합니다. ex) jQueryframeworks - 웹 어플리케이션에 대한 특별한 완성본을 말합니다. 이런 상황에서, Angular는 좀 더 진보되고 directives라는 것을 이용해서 브라우저에게 새로운 문구를 알려줍니다.데.......추천 -
[비공개] 빅데이터란 무엇인가? _ 빅데이터 역사와 활용사례
빅데이터란 무엇인가? _ 빅데이터 역사와 활용사례 이번 포스팅은 빅데이터의 역사와 현재 사례에 대한"A Very Short History of Big Data" 아티클을 번역한 내용 입니다.원본은 아래 링크에서 확인 하실 수 있습니다.빅데이터란 유행하기 전부터정보 분석에 대한 연구는 꾸준히 지속되어왔습니다.일찍이, 1941년 빅데이터는 "정보 폭발" (information explosion)로옥스포드 사전에 명명되어 있었습니다. 년도 별로 구성된 아래 내용들은 빅데이터의 마일스톤과 같습니다. 1944년 Wesleyan 대학교 사서인 Fremont Ride는 "The Scholar and the Future of the Research Library"를 발간하였습니다.내용에 따르면, 16년을 주기로 미국 대학교의 도.......추천 -
[비공개] CSS border를 이용한 도형 그리기_삼각형
CSS border를 이용한 도형 그리기_삼각형 css 보더를 사용해서 간단한 도형을 만들 수 있다는 사실다 알고 계신가요?자주 사용하지 않지만이미지를 만들기 귀찮을 때사용해 보세요! 이번 포스팅은 CSS Triangle로 소개된 내용을 참고하였습니다.우선 가각의 div를 만들어 줍니다. css 보더를 이용해서 삼각형을 만드는 원리는가로/세로 값이 0인 박스에 있습니다.실제 화살표의 넓이와 높이값은 보더의 넓이값으로 결정됩니다. css를 좀더 재미있게 사용하기 위해가끔씩 사용해 보세요!추천 -
[비공개] 자바스크립트 강좌 4_기본개념 (문자열부터 함수까지)
자바스크립트 강좌 4_기본개념 (문자열부터 함수까지) # 문자열 -자바스크립트에서 문자열은 큰따옴표(“ ”)와 작은따옴표(‘ ’)사이에 오는 텍스트나 숫자를 말합니다. 단순히 숫자열이 와도 toString()을 통해 문자로 바꿔서 사용할 수도 있습니다.var carname = “BMW 5”var carname = “KIA K7” -특수 문자를 사용할 경우에는, \ 라는 이스케이프 문자를 사용합니다. 그러면 따옴표안에있는 문자가 특수기호로 인식됩니다.var x = “We are the so-called \”Vikings\” from the north.” -문자열을 객체로 생성할 수도 있습니다. 다음과 같이 생성한 후 typeof 를 사용해보면 x는 문자열을, y는 객체를 반환합니다. 주의할점은, 문자열.......추천 -
[비공개] HTML 편집기_ 에디터 편집기 웹스톰 (WebStorm)
HTML 편집기_ 에디터 편집기 웹스톰 (WebStorm) 공식 사이트: https://www.jetbrains.com/webstorm/ 마크업을 배우면서 짧은 시간동안 다양한 에디터 편집기를 사용해봤습니다.메모장, 에디터 플러스, 브라켓, 서브라임 텍스트 등...최근들어 웹스톰을 설치해서 사용을 시작했습니다. 웹스톰은 JetBrains에서 만든 IDE (Integrated Development Environment), 즉, 통합 개발 환경을 말합니다. 프론트 앤드에서 일하시는 분들은 이미 많이 사용하고 있으며자바스크립트 언어에 특화되어 있지만다양한 플러그인을 통해 다양한 프로그래밍 언어를 다룰 수 있습니다. 아이맥을 기준으로 프로그램 설치는 다음과 같습니다. 웹스톰 사이트에 접속을 하.......추천