AngeRay

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 박스에 꾸며줄 수 ..

CSS 레이아웃 정리 display, position 웹사이트를 만들때 가장 중요한것은? 우리가 잘 정리한 박스들을 원하는 위치에 그리고 원하는 사이즈로 배치할 수 있는것이 가장 중요하다. 이것들을 하기위해서는 CSS의 display와 position에 대해서 아는 것이 중요하다. Display : 기본값은 CSS를 통해서 변경 가능 display CSS 속성은 요소가 블록 또는 인라인 요소로 처리되는지 여부와 flow layout, grid 또는 flex와 같은 자식에 사용되는 레이아웃을 설정한다. 공식적으로 display 속성은 요소의 내부 및 외부 표시 유형을 설정한다. 외부 유형은 flow layout에서 요소의 참여를 설정한다. 내부 유형은 자식의 레이아웃을 설정한다. display - disp..

CSS(Cascading Style Sheet) CSS는 우리가 잘 정리한 HTML 페이지를 아주 stylish하게 꾸며주는 역할을 한다. 1. 의미, 정의 2. 선택자 (selectors) - 우리가 정의한 tag들을 골라주는 역할을 한다. 3. 스타일링 4. 헷갈리는 컨셉 5. ** Flex box 1. CSS의 의미와 정의 CSS의 약자는 Cascading Style Sheet의 약자인데 여기서 Style Sheet는 뭔가 style을 잘 정리한 문서 한장을 의미한다고 생각할 수 있다면 Cascading은 위에서 아래로 연속해서 떨어지는 느낌으로 정의된 세부적인 정의가 있다면 그것을 쓰고 정의되 있는것이 없다면 다음 기본으로 지정된 것으로 넘어가는 것을 이야기 한다. 웹사이트를 styling 할때 ..

그리드 웹 디자인 방법 중 하나 일반적으로 복잡한 사이트를 잘 정리시켜서 보여준다. 예전에는 절대적이 었지만 현재는 절대적이지는 않다. 가로값 1920을 기준으로 세로값은 신경쓰지 않는다. 1320이 많이 사용된다. 보통은 12컬럼을 많이 사용한다. 편한 와이드값을 잡고 컬럼을 나눈 다음에 그 컬럼 안에서 20 / 70 / 20 을 나누는 것은 자유이다. 1320은 꽤 넓은 wide값이다. 1320에서 좌측 우측 20을 제외한 1280 사용한다고 보면 된다. box를 배치시 사이값을 제외한 값으로 계산한다. (1280-40)/2= 620px (1280-80)/3= 400px (1280-120)/4= 290px (1280-160)/5= 224px → 1280에는 잘 들어왔지만 grid에 맞지 않다. 간격을..

프로그래밍 언어에서 가장 중요한것은? → 입력, 연산, 출력 사용자에게 console이나 UI에서 입력받은 데이터를 잘 처리하고 연산해서 알맞게 다시 사용자에게 출력해주는 것이 중요하다. 물론 그 데이터를 전송을 이용해서 서버로 보내서 다시 받아오는 것도 포함될 수 있다. 이런 연산을 하면서 CPU를 효율적으로 사용할 수 있도록 CPU에 최적화된 로직을 작성하는 것도 중요하고, 메모리의 사용을 최소화 하는것도 중요하다. 변수(Variable) 변경될 수 있는 값을 의미함 자바스크립트에서 변수 선언 시 let 이라는 키워드 이용 let, class etc 좀 더 현대적으로 쓰인 속성들은 ES 6에서 추가되었다. let name = 'ray'; - let이라는 키워드를 이용해서 name이라는 변수를 선언했다..