Intro
백엔드 개발자도 기본적인 프론트엔드 지식이 있어야한다. 아니 사실 난 이 두 분야를 나누는 것 자체가 의미 없다고 생각한다. 특히나 나 같은 쌩 주니어 무지성에게는 특히나 그렇다.
이번엔 알아두는 게 좋은 기본적인 프론트엔드 개념 중 HTML, CSS, Javascript의 기본 문법을 정리 해 보겠다.
HTML
Tag
<div class="test"> test </div>태그는 열리고 닫히는 구조를 가진다. 태그 각각은 자신만의 의미를 가지고 태그 사이에 들어가는 텍스트는 그 태그의 의미에 맞게 웹 사이트에 반영된다.
물론 이런것과 다르게 닫히는 개념이 없는 태그도 존재한다. 이런 것을 빈 태그라고 부른다.
Attribute, Value
<TAG Attribute="value"></TAG>
<div class="test"> test </div>태그마다 가질 수 있는 Attribute들이 있다. 그냥 버튼이기만 하면 땡 인게 아니라 비활성화 되어있을 수 있는거고, class 를 통해 해당 태그를 구별 할 수도 있다. HTML 문서 내에 얼마나 같은 종류의 태그들이 많을 지는 궁금하면 지금 당장 크롬 개발자 도구를 켜 보기를 바란다.
Parent, Child
<PARENT>
<CHILD></CHILD>
</PARENT>
<!-- Example -->
<table border="1">
<th>테이블</th>
<th>만들기</th>
<tr>
<td>첫번째 칸</td>
<td>두번째 칸</td>
</tr>
<tr>
<td>첫번째 칸</td>
<td>두번째 칸</td>
</tr>
</table>이 구조를 확실히 이해 할 수 있는 건 테이블 아닐까?
말 그대로 특정 태그 아래에 Child 태그가 들어가는 것이다. 계층 구조가 필요할 때 사용한다.
기본 구조
<!DOCTYPE html>
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>DOCTYPE
현재 문서 형식이 어떤 형식인 지 정의하는 태그.
HTML 버전이 어떤 버전인 지 등의 정보가 기록 되어 있다.
HTML
HTML 문서 전체의 범위를 의미한다.
HEAD
웹 브라우저가 해석해야 할 HTML 문서의 정보 범위를 지정한다.
웹 페이지가 어떤 이름을 가지고 있는 지, 인코딩 방식은 뭔지, 외부 파일은 어떻게 연결되어있는 지 등의 정보가 저장되어 있다.
- TITLE
- 웹 페이지의 제목
- META
- 웹 페이지의 정보(META 자체가 특정한 것의 정보라는 의미를 가지고 있다. 메타데이터 등...) 대표적인 빈 태그
<meta charset="UTF-8"> - LINK
- 마치 JAVA의 import 만큼이나 자주 쓸 태그
- 외부에서 작성 된 CSS 문서를 불러와 연결 할 때 사용한다.
- 마찬가지로 빈 태그다.
<link rel="stylesheet" href="./css/main.css"> <link rel="icon" href="./icon.png"> - STYLE
- CSS를 작성하는 곳
<style> p { font-size: 20px; font-weight: bold; } </style>
- CSS를 작성하는 곳
- SCRIPT
- Javascript 파일을 불러오거나 직접 작성하는 곳
<script src="./js/main.js"></script> <script> function windowOnClickHandler(event) { console.log(event); } window.addEventListener('click', windowOnClickHandler); </script>
- Javascript 파일을 불러오거나 직접 작성하는 곳
BODY
현재 보고있는 화면이라 생각하면 된다. 로고, 헤더, 푸터, 네비게이션 등등...
짜잘한 태그들에 대한 설명은 굳이 첨부하지 않겠다.
Outro
지금까지 HTML 문법에 대해 간단하게 알아 보았다. 다음 포스팅은 CSS에 관한 포스팅이다.
인턴 하면서 느낀거지만...백엔드라고 절대 프론트엔드를 모를 게 아니더란 것이다. 정말 쉽게 풀릴 수 있는 문제들이 어려워지고, 전문성에 큰 영향을 끼치니까.
