[입문] 웹 프론트 엔드 - 언어의 문법

언어의 문법

이번 강의는 언어의 문법에 대해서 설명해 드립니다.

HTML

HTML은 태그로 이루어져 있으며.

<tag></tag>

기본적으로 위와같은 형태를 가지고 있습니다.

꺽쇠 안에 tag가 들어가며 여는 태그와 닫는 태그가 영역을 이루고 있습니다.

그리고 단일 태그라고 하는 태그들이 존재합니다.

<img>

위와같이 닫는 태그가 없이 혼자 역할을 수행하는 태그들이 존재합니다.

tag에 대해서 전부 설명을 해드릴수가 없기떄문에 MDN(Mozilla Developer Network)에서 자주 보시는게 좋습니다.

태그에는 속성을 사용할수 있으며 대표적으로 id 와 class 가 있습니다.

<div id="id" class="class"></div>

위와 같이 사용하며 속성명="값" 으로 사용합니다.

태그마다 사용할 수 있는 속성에 대해서는 역시 MDN을 이용해 주시면 되겟습니다.

CSS

CSS는 선택자와 속성으로 이루어져 있습니다.

.selector{attribute:value}

위와같이 선택자가 먼저 선언되며.

선택자는 HTML 태그를 선택하는 수단입니다.

선택자에 대해서는 CSS 셀렉터 레벨 3 를 참조해주세요.

선택자로 HTML 태그를 선택한다음 중괄호 안에 선택한 HTML의 스타일을 정의합니다.

스타일의 속성과 값에 대해서는 CSS-tricks 에서 자세히 확인할수 있습니다.

Javascript

Javascript는 DOM(document)를 컨트롤 하는 용도로 많이 사용됩니다.

javascript는 카멜 케이스 문법을 사용하는데요.

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

변수

javascript 에는 변수라는게 존재합니다.

일종의 저장소 라고 생각하시면 편해요.

var name = value;

변수는 위와 같은 형태를 가지고 있습니다.

변수 선언은 var 로 시작하며, var은 variable 의 헝가리 표기법입니다.

var 을 선언한뒤 변수명 = 값; 으로 이루어져있습니다.

세미콜론은 이 명령의 끝을 의미하므로 꼭 닫아주셔야 합니다.

변수를 선한한 뒤에 변수명을 출력하면 값이 나오게 됩니다.

선택자

javascript의 선택자 입니다.

DOM을 컨트롤 하기 위해서는 선택자가 필요하겟지요?

document.querySelector('name');

위와 같은 형태를 띄고있습니다.

document는 문서로 HTML 자체를 의미합니다.

document에서 명령어 querySelector(); 을 실행하는 겁니다.

지금은 간단히 querySelector();만 설명해드리겟습니다.

명령어의 괄호 안에는 CSS 선택자를 통해 DOM의 엘리먼트를 선택할 수 있습니다.

CSS의 class 선택자인 . 을 사용하면 해당 엘리먼트가 선택됩니다.

메서드

Javascript 에는 기본적인 명령문들이 존재합니다.

위에서 보여드렷던 선택자가 이와 같은데요.

문법은 위에서 보여드렷던 선택자와 같습니다.

selector.addEventListener();

함수

함수, 해석하면 기능 입니다.

function name(){};

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

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

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

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