AngeRay

The concept of PWA (Progressive Web App) PWA가 뜨고 있는 추세이고 계속 성장세를 이어 나갈것 같다고 예상되어 진다. 많은 기업들이 이미 PWA의 강력한 잠재력을 알아보고 성공적으로 런칭했다. PWA는 새롭고 강력한 소프트웨어 앱을 만드는 방식이다. HTML, CSS, JavaScript를 이용해서 만든 웹앱을 모던한 웹 브라우저 APIs와 결합해서 크로스 플랫폼에서 동작하는 어플리케이션을 손쉽게 만들 수 있다. 즉 이미 만든 웹사이트나 어플이 있다면 몇 가지만 추가하면 손쉽게 데스크탑에서 동작하는 또한 모바일에서도 동작 가능한 어플을 만들 수 도 있다. 안드로이드나 아이폰 처럼 특정한 플랫폼에서 동작하는 네이티브 어플리케이션은 플랫폼에서 제공하는 다양한 API를 이용해..

CSS 단위 em & rem 이렇게 많은 units 중에 언제 어떤것을 사용하면 좋을까? 1. 부모요소의 사이즈에 따라서 사이즈가 변경되어야 된다면 %와 em과 같은 unit을 사용하면 된다. 부모와는 상관없이 브라우저 사이즈에 따라서 반응해야 한다면 v*(viewport) 나 rem을 사용한다. 2. 요소의 너비가 높이에 따라서 사이즈가 변경되어야 한다면 %, v* 사용하면 되고 font-size에 따라서 사이즈가 변경되어야 한다면 em과 rem 사용하면 된다. em vs rem 어떤 디자인 이냐에 따라서 우리가 정확히 원하는 기능이 무엇인지에 따라서 다르다. if button의 component만든다면? 버튼의 글자를 rem을 써서 사이즈 만들게 되면 rem은 root요소 root에 있는 font-s..

CSS Responsive Units 시작하기 전에 CSS 문법 정리 :) - 페이지 위에 있는 많은 요소들 중에 어떤 요소들을 선택할 것인지를 결정하는 selector - 어떤 속성들을 꾸며줄 것인지를 결정하는 속성과 그 값 (property and value) 위의 3가지로 구성되어 있다. 요소의 크기나 사이즈, 길이 등을 결정하는 Unit에 대해 정리 :) 사이즈를 결정하는 unit은 크게 2가지의 카테고리로 정리해 볼 수 있다. 바로 absolute값과 relative값 두가지로 나눠 볼 수 있다. Absolute length units - absolute 값은 px을 제외 나머지 값들은 물리적인 세상에서만 의미가 있다. - CSS의 주된 용도는 스크린 즉 모니터위에서 웹사이트를 꾸며줄때 주로 쓰..

Visual Studio Code 필수 단축키 정리. 무언가를 개발할 때 필수로 설치해야 하는 개발 tools 다양한 개발tools 중에 내가 어떤것을 만드느냐에 따라서 필요한 개발환경을 셋업하고 최대한 개발환경에 친숙해지고 기능들을 빠르게 익혀서 일의 효율을 극대화 시키는것이 중요하다. 어플리케이션 자체에서 유용한 기능과 단축키 그리고 코드 작성시 꼭 알아야하는 단축키를 알아보자 1. 커멘드 팔레트(ctrl + shift + p) - 실행 다능한 모든 명령어를 마우스없이 키보드 하나로 바로 실행 가능하다. - 파일 저장 하던지 아니면 포맷 그리고 원하는 명령어 검색시 관련된 기능들을 다 확인 가능하다. - 각각의 키보드 단축키도 확인 가능하다. - 해당하는 내용에서 enter를 치면 명령이 수행된다. ..

Confusing tags in HTML(Semantic tags, important tag) HTML을 사용할 때 필수로 알아야 되는 semantic tags와 헷갈리는 tags 를 알아보자 :) Semantic tags(Semantic Markup) 여기서 Semantic은 의미의, 의미가 있는 이라는 의미이다. 우리 주변의 모든 사물과 sign들이 각각 저마다의 의미를 가지고 있는 것처럼 HTML tag도 저마다의 의미가 있다. 브라우저도 의미있게 이해가능하고, 개발자도 의미있게 이해가능한 HTML에서 의미가 있는 semantin tag를 적절한 곳에 사용하는 것이 중요하다. * 예를 들어 제목을 표기할 때는 Top level Heading 즉 Heading tag 사용 - 별도의 styling을 ..

What is API(Application Programming Interface) 프로그래밍이라는 것도 결국 사람이 작성 하기 때문에 우리 일상생활을 잘 이해하면 프로그래밍을 더 잘 이해할 수 있다. 예를들어 키오스크가 내부적으로 어떻게 동작하는 지는 몰라도 인터페이스를 통해서 기계를 쉽게 사용가능하다. 인터페이스가 간단하고 직관적일 수 록 더 좋은 기계라고 말할 수 있다. 그것 처럼 프로그래밍 에서도 API 라는 것이 존재하는데 API는 Application Programming Interface의 약자 이다. 예를들어 서로 다른 하드웨어 부품마다 개발자가 일일이 프로그래밍을 작성 하기 보다는 HAL(hardware abstraction layer_하드웨어 추상화 계층) 이라는 하드웨어 추상화 계층에..

Responsive Web 반응형 웹, 웹개발 할때 꼭 알아야 하는 Responsive Web 예전에는 모든 웹사이트들이 데스크탑 용도로만 만들어 졌었다. 하지만 요즘 시대에는 반응형으로 웹사이트를 만들지 않으면 여러 기기에 제대로 보이지 않는다. 반응형으로 신경써서 만들면 사이즈에 따라서 content들이 유동적으로 바뀌기 때문에 사용자들이 웹사이트를 쉽게 이용 가능하다. 이때 content를 물과 같이 만들어야 한다. Responsive Web design 이란 웹 디자인 초기에 페이지는 특정 화면 크기를 대상으로 작성되었다. 사용자가 디자이너가 예상한 것보다 크거나 작은 화면을 사용하는 경우 원치 않는 scroll에서 지나치게 긴 줄 길이 및 빈약한 공간 사용에 이르기까지 다양한 결과가 나타난다. ..

HTML 빠르게 마크업하기 위한 지름길 Emmet. 빠른 마크업이 중요한 이유? 개발시간을 단축 시켜주고, 손목건강에도 도움이 된다. HTML을 빠르게 작성할 수 있는 plug-ins이 있는데 바로 Emmet 이다. Emmet은 Zen Coding 이라고 불렸다. 예전에는 plug-ins 형태로 통해서 text editors에서 설치해서 쓸 수 있었지만 이제는 많은 text editors에서 기본적으로 들어가 있기도 한다. Emmet의 문법 1. HTML 양식 작성 - ! + tab 2. div 태그 작성 - div + tab - div.ray - div#ray - .ray 만 작성해도 자동으로 div의 class가 된다. - #ray 만 작성해도 자동으로 div의 id가 된다. 3. 부모, 자식, 형재..

Visual Studio Code 설치 및 10 Extensions for Web development. 마이크로 소프트에서 만든 text editing tools 중 하나로 typescript 언어를 기반으로한 open source project 이다. 웹개발 뿐만 아니라 다양한 언어들을 개발할 때에도 사용 가능하다. (IJ IDE(Integrated Development Enviornment)를 추천한다.) visual studio code : https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorit..

Flexbox flexbox는 박스와 아이템들을 행 또는 열로 자유자재로 배치시켜 줄 수 있는 정말 유연한 개념 이다. CSS의 꽃이라고 불린다. 박스가 커지면 각각의 아이템들이 어떤 식으로 커지면서 박스의 공간을 매꿔야 될지 박스가 작아지면 이 아이템들이 어떻게 작아져서 유연하게 박스 안에서 배치되어야 하는지를 자유롭게 정의 가능하며 너무 쉽게 그 모든것들이 가능하게 만드는 개념이다. 이 개념만 이해해도 웹사이트의 레이아웃을 쉽게 구성하는 것이 가능하다. flexbox는 크게 2가지 개념을 이해하면 큰 그림이 이해가능하다. 첫번째 개념으로는 flexbox는 container 박스에 적용되는 속성값들이 존재하고 그리고 각각의 item들에 적용되는 속성값들이 존재한다. container 박스에 꾸며줄 수 ..