Ch.Covelope

프론트 엔드(Front-end)란? 본문

front_end

프론트 엔드(Front-end)란?

Chrysans 2021. 10. 5. 18:06
반응형

 

 

웹은 프론트엔드(front-end)와 백엔드(back-end)로 나눠집니다.


우리가 인터넷을 사용할때 브러우저에는 눈에 보이는 부분들과

보이지 않는 부분들이 함께 공존 상호 작용하는데 사용자 입장에서

보이는 모든 구성요소들을 프론트엔드 또는 클라이언트 영역 라고도 합니다.

웹백엔드는 인터넷 사용자에게는 보이지 않는(시스템 컴포넌트,API,DB,라이브러리 등등) 것이죠.

 

 

 

 

웹프론트엔드?

 

사용자에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진 등)를 제공합니다.

또한, 사용자의 요청(요구사항)에 반응해서 동작합니다.

 

 

 

웹프론트엔드의 역할

 

 

- HTML

(‘Hypertext Markup Language’)

웹콘텐츠를 잘 보여주기 기본적인 틀(구조,골격) 을 구성하는 역할을 한다.

 

 

 - CSS

(‘Cascading Style Sheets’)


적절한 배치와 디자인(폰트사이즈,컬러,크기,모양 등등) 등을 제공해야 합니다. 

 

 

 - Javascript

 

웹 사이트의 동적인 요소를 담당하며 사용자가 요청한 동작을 

잘 수행하기 위한 작업이 되어야 합니다.

 

 

 

 

 

이 외에도 AngularJS, ReactJS, View, Bootstrap 등과 함께 사용되고 있습니다.

 

 

 

HTML(구조) 코드 예시

 

원하는 문서의 구조를 마크업 언어로 표현해야 합니다.

HTML이라는 것은 그 구조를 잘 표현해 줍니다.

 

 

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
<h1 id="welcome">HTML CSS JS</h1>
<p>Welcome to HTML-CSS-JS.com</p>
<p>Online HTML, CSS and JavaScript editor 
with instant preview.</p>
</body>
</html>

 

 

CSS(스타일,디자인) 코드예시

 

웹페이지를 꾸미기 위해서는 각각의 HTML 태그(문서의 구조를 표현한 각 조각 단위)를 꾸미기 위한 규칙이 필요합니다

이를 표현해 주는것이 CSS 입니다.

 

 

/* CSS styles */
h1 {
font-family: Impact, sans-serif;
color: #CE5937;
}

 

 

 

 JavaScript(동작) 코드예시

 

HTML,CSS를 이리저리 움직이고 변경할 필요가 있을 거예요.

JavaScript가 그걸 해줍니다.

 

 

// JavaScript
document.getElementById('welcome').innerText += 
" Editors";

 

 

 

<결과물/>

 

 

 

 

 

 

※ HTML , CSS , JS 이해하기 쉽게 체험해보기

 

https://html-css-js.com/

728x90
반응형

'front_end' 카테고리의 다른 글

멋쟁이 사자처럼 <Front_end> 과정 OT 후기  (0) 2021.10.29
공유하기 링크
'front_end' Related Articles more
Comments