웹 프론트엔드 기초 정리

웹 프론트엔드는 사용자와 직접적으로 만나고 상호작용하는 웹사이트의 중요한 부분입니다. 이를 구성하는 주요 기술로는 HTML, CSS, 그리고 JavaScript가 있습니다.

HTML (HyperText Markup Language)은 웹페이지의 기본적인 구조를 작성하는 언어입니다. 웹페이지의 제목, 단락, 표, 이미지 등의 요소를 정의하고 구조화합니다. 사용하는 기본 태그 형태로는 <tag attribute="value"> 내용 </tag>와 같습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>웹 페이지 제목</title>
    </head>
    <body>
        <h1>첫 번째 제목</h1>
        <p>첫 번째 단락</p> 
    </body>
</html>

CSS (Cascading Style Sheets)는 HTML로 작성한 웹페이지의 디자인을 꾸미는 언어입니다. 기본적인 스타일 지정 형태로는 selector {property: value;}와 같습니다.

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 30px;
}

JavaScript는 웹페이지에 동적인 요소를 추가하는 언어입니다. 사용자와 상호작용하거나 웹페이지가 Live 업데이트 되게 하거나 다양한 웹 기능을 구현할 때 사용됩니다.

function changeBackgroundColor() {
    document.body.style.backgroundColor = "green";
    alert("배경색이 변경되었습니다.");
}

실무에서는 이 외에도 프레임워크와 라이브러리를 활용하여 더욱 효과적인 웹 개발이 이루어집니다. 자주 사용되는 예로는 React, Vue, Angular 등이 있습니다.

특히, 추천하고 싶은 웹 프론트엔드 꿀팁은 “DevTools를 적극 활용하라”입니다. 대부분의 웹 브라우저는 개발자 도구(DevTools)를 지원하며, 이를 활용하면 HTML, CSS, JavaScript 요소를 실시간으로 확인하고 조정하면서 진행할 수 있습니다.

응용 버전 예시로는, HTML/CSS/JavaScript를 활용한 간단한 디지털 시계 기능을 소개하겠습니다.

먼저 HTML 파일에서는 시간을 표시할 <div> 태그를 준비합니다.

<div id="clock"></div>

CSS 파일에서는 디지털 시계의 디자인을 정의합니다.

#clock {
    font-size: 60px;
    text-align: center;
    margin-top: 20%;
}

그리고 JavaScript에서는 현재 시간을 가져와서 <div> 태그 안에 표시하는 기능을 구현합니다.

function clock() {
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    document.getElementById("clock").innerHTML = hours + ":" + minutes + ":" + seconds;
}
setInterval(clock, 1000); // 1초마다 새로고침

웹 페이지를 열면, JavaScript가 현재 시간을 가져와서 HTML의 <div> 태그 안에 출력하며, CSS가 이를 디자인합니다. 이런 식으로 HTML, CSS, JavaScript가 서로 상호작용하며 웹 페이지를 구성하는 것이 바로 프론트엔드의 중심적인 역할입니다.

웹 프론트엔드 개발은 많은 학습과 실습을 필요로 하지만, 그만큼 매력적이고 보람찬 분야입니다. 기초부터 차근차근 배워나가며 훌륭한 프론트엔드 개발자가 되길 바랍니다.

웹 프론트엔드 기초 정리

Enjoy Reading This Article?