포스팅에 앞서, 프론트엔드 분야를 공부하기 위해서 초반에는 edwith에서 제주코딩베이스캠프의 강의를 참고하여 정리를 하는 방식으로 진행할 예정이다.
edwith 바로가기
HTML 이란?
Hyper Text Markup Language (Static)
- (Hyper Text)하이퍼링크를 통해 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트
- (Markup Language) 문서의 구조를 표현하는 역할 (ex) 이것은 table이다.
- 쉽게 말해 웹을 만들기 위한 가장 기초적인 언어
- HTML은
Program Language는 아니고, 문서의 골격이라 생각하자.
- 문제를 해결하기 위해 컴퓨터에게 주어지는 처리방법과 순서를 정해주는 명령문을 작성하는 언어
- 요리로 생각하자면, '주문서'와 비슷하다!
Basic of Basic Structure of HTML
아래의 글을 메모장에 쓰고, '위대한_첫시작.html' 로 저장해보고 열어보자!
<html>
<head>
</head>
<body>
<h1> 제목입니다. </h1>
<p> 문단입니다. </p>
</body>
</html>
- Markup Language 는 위의 글과 같이 표현하는 방식
- Markdown Language 는 velog에서 포스팅할 때 사용하는 양식처럼 표현하는 방식
CSS 란?
Cascading Style Sheet (Static)
- (Cascading) 계단식, 위에서 아래로 흐르는
- (Style Sheet) 글꼴의 크기, 모양, 컬러, 문단 설정 등 미리 정의해 스타일로 만들었다가 웹 문서의 본문에서 그 스타일을 참조하여 사용하는 기능
- CSS는 골격에 붙이는 "살" 이라고 생각하자.
How to use the CSS in HTML?
아래의 글을 메모장에 추가해서 작성하고 저장 후, 열어보자!
<html>
<head>
<style>
h1{
background-color : #fff;
color: white;
}
</style>
</head>
<body>
<h1>제목입니다.</h1>
<p>문단입니다.</p>
</body>
</html>
JS 란?
Java Script (Dynamic)
- Java의 이름을 따왔지만, 연관성이 없음..
- (1990년대 당시 java의 인기가 높았는데, 이러한 대세에 편승하기 위한 것일뿐…)
- Program Language 의 하나로 HTML, CSS로 만들어진 정적인 페이지를 동적으로 만들어주는 언어
- JS 는 "근육" 이라고 생각하자!
How to use the JS in HTML?
아래의 글을 메모장에 추가해서 작성하고 저장 후, 열어보자!
<html>
<head>
<style>
h1{
background-color : #fff;
color: white;
}
</style>
<script>
window.alert('환영합니다.')
</script>
</head>
<body>
<h1>제목입니다.</h1>
<p>문단입니다.</p>
</body>
</html>
그렇다면, Front-end 개발자는 뭘까?
Front-end 개발자
- 사용자에게 보여지는 화면을 설계하는 기술을 보유한 개발자
- HTML, CSS, JS뿐만 아니라, Jquery, ajax 를 알아야 하고, Bootstrap, node.js나 express 중 한가지를 공부하면 좋다!
출처 : 제주코딩베이스캠프