Front-end 공부를 시작해보자!

Hyunjay_·2020년 10월 31일
0

Front_end

목록 보기
1/1
post-thumbnail

포스팅에 앞서, 프론트엔드 분야를 공부하기 위해서 초반에는 edwith에서 제주코딩베이스캠프의 강의를 참고하여 정리를 하는 방식으로 진행할 예정이다.

edwith 바로가기

HTML 이란?

Hyper Text Markup Language (Static)

  • (Hyper Text)하이퍼링크를 통해 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트
  • (Markup Language) 문서의 구조를 표현하는 역할 (ex) 이것은 table이다.
  • 쉽게 말해 웹을 만들기 위한 가장 기초적인 언어
  • HTMLProgram Language는 아니고, 문서의 골격이라 생각하자.
  • 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 중 한가지를 공부하면 좋다!

출처 : 제주코딩베이스캠프

profile
be the special one!

0개의 댓글