Front End 입문자를 위한 이론 정리 - 언어의 문법

HTML의 문법

HTML을 태그로 이루어져 있다.

<tag></tag> 와 같은 형태를 가지고 있고 꺽쇠 안에 tag가 들어가며 여는 태그와 닫는 태그가 영역을 이루고 있다.

그리고 단일 태그라고 하는 태그들이 존재한다. <img>와 같이 닫는 태그가 없이 혼자 역할을 수행하는 태그들이다.

HTML과 XHTML의 문법 차이

위와같이 HTML과 XHTML은 문법상 차이가 많다.

둘을 혼용해서 사용하지 않도록 하자.

특수하게 인호부호는 가독성차원에서 HTML에서 생략하지 않는다.

그리고 대부분은 속성 생략으로 전환되어 사용한다.

tip) 2017년 12월 14일을 기준으로 HTML5.2가 릴리즈 되었으며 <!doctype> 에 HTML4와 XHTML 선언이 불가능하다.

관련 링크 - https://www.w3.org/TR/2017/REC-html52-20171214/changes.html#changes

CSS의 문법

selector{name:value}

위와같은 형태를 가지고 있다.

위의 값들에 대해서는 다음 사이트를 참고하도록 하자.

관련 링크 - https://css-tricks.com/almanac/

Javascript의 문법

camelCase

소문자로 시작하며 단어 뒤에 다른 단어가 오게 될 경우 다음 첫 단어의 첫 스펠링은 대문자로 표기하는 방법

변수

var name = value;

name 을 호출하면 value가 출력이 됨.

selector

document.querySelecotr('name');

querySelecotr() 는 메소드.

name의 css 선택자.

이런 종류의 JS selector가 존재한다.

method

selector.addEventListener();
document.querySelector('name'); // selector
addEventListener(); // method

function

function name(){};

함수 선언은 function으로 시작한다.

그 다음 함수명인 name이 오며 소괄호()는 함수에게 전달할 인자를 지정하는 곳이다.

중괄호 안에는 여러 명령어들을 넣어 하나의 기능을 만들 수 있다.

CODE 표기법

카멜 케이스(Camel Case)

낙타 등이 들쑥날쑥한 것처럼 각 단어의 첫 글자들만 대문자로 표기하는 방법이기 때문에 낙타표기법 이라고도 한다.

주로 클레스나 모듈의 명칭에 사용되며 각 단어의 첫 문자를 대문자로 표시하고 붙여쓰되, 맨 처음 문자는 소문자로 표기한다.

ex) camelCase

스네이크 케이스(Snake Case)

여러 단어로 이루어진 경우 단어 사이를 언더바로 나누는 방식, 주로 변수 명 등에 사용되는 경우가 많다.

ex) snake_case

케밥 케이스(Kebab Case)

하이픈으로 단어를 연결하는 방식이며 HTML태그의 id, class 값으로 흔히 쓰인다.

ex) kebab-case