[입문] 웹 프론트 엔드 - 언어의 문법
Technique언어의 문법
이번 강의는 언어의 문법에 대해서 설명해 드립니다.
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 이 오며 괄호 안에는 함수에게 전달할 인자를 지정하는 곳입니다.
중괄호 안에 여러 명령어들을 넣어 하나의 기능을 만들수가 있습니다.
