웹 개발 소개: HTML, CSS, JS의 기본 개념과 역할
안녕하세요. 에온르입니다. 제 블로그에서 새로운 신설 코너를 하나 만들어보려고 하는데요. 바로 html, css, js 강의(?) 입니다. 저도 공부하는 입장이므로 정리가 미흡하거나 아쉬울 수 있지만, 저도 정리하면서 공부하는 셈 게시글을 작성해보려고 합니다. 이 포스팅이 여러분께 도움이 되었으면 좋겠네요.
웹 개발 많이 들어보셨죠? 웹 개발을 티스토리 블로그로 예를 들어보겠습니다. 티스토리 블로그를 구성하는 요소들에는 보여지는 부분과, 보이지 않는 부분이 있는데요. 보이는 부분은 티스토리 스킨, 사이드바 유무, 글자의 크기 등 홈페이지를 구성하는 생김새라고 생각하면 되겠고, 보이지 않는 부분이란 티스토리 블로그들이 원활히 접속되기 위한 서버와의 연결, 카카오 로그인을 위해 데이터베이스(DB)에 접속하고 허가를 받는 등 눈에 안보이는 작업이 처리되는 백엔드 부분 등을 이야기합니다.
이 포스팅에서는 프런트엔드를 중점적으로 다뤄보려고 합니다. 특히 세 가지 주요 기술을 토대로 이야기 하려고 하는데요. 바로 HTML, CSS, 그리고 JavaScript (JS) 입니다. 오늘의 첫 강에서는 각각의 기술이 웹 페이지 구성에서 어떤 역할을 하는지 알아보고, 각 기술의 기본적인 사용법을 소개해보겠습니다.
HTML: 웹 페이지의 구조
HTML(HyperText Markup Language)은 웹 페이지의 내용과 구조를 정의하는 데 사용됩니다. HTML은 '태그'라고 불리는 특별한 코드를 사용하여 웹 페이지의 다양한 요소를 만듭니다. 태그는 문서의 다양한 요소(글자, 이미지, 링크 등)를 정의하고 구조화하는데 쓰입니다. 제일 기본요소입니다.
예시: 기본 HTML 구조
<!DOCTYPE html>
<html>
<head>
<title>웹사이트 이름(제목)</title>
</head>
<body>
<h1>내 웹사이트에 오신 것을 환영합니다!</h1>
<p>이것은 단락입니다.</p>
</body>
</html>- <!DOCTYPE html>: 문서 타입 선언으로, 브라우저에게 이 문서가 HTML5 문서임을 알려줍니다.
*HTML5 문서란? : HTML의 완전한 5번째 버전으로, 이 버전에서 어도비 플래시 등의 비디오 응용프로그램에 대한 필요성이 줄어들 수 있게 설계되었습니다. 자바스크립트도 필요없이 간단히 <video> 라는 태그를 통해 구현해낼 수 있게 되었습니다. - <html>: HTML 문서의 루트 요소입니다. 모든 다른 HTML 요소는 이 태그 내부에 위치해야 합니다. 한마디로 시작과 끝에 무조건 html 태그가 존재해야 됩니다!
- <head>: 문서의 메타데이터(제목, 스타일 시트 링크, 스크립트 등)를 포함하는 부분입니다.
- <title>: 브라우저 탭에 표시되는 페이지 제목을 정의합니다. 지금 보고있는 이 티스토리 블로그의 경우 '에온르'가 title이 됩니다.
- <body>: 실제 웹 페이지의 내용을 담는 부분입니다. 텍스트, 이미지, 링크 등이 이 안에 들어갑니다. 즉, 게시글 내용들이 모두 body 안에 담겨있다는 뜻이지요.
- <h1>: 가장 큰 제목을 나타내는 태그입니다. 현재 이 게시글로 예를 들면, h1 태그 안에는 "웹 개발 소개: HTML, CSS, JS의 기본 개념과 역할" 이 들어있을 것입니다.
- <p>: 단락(paragraph)을 나타내는 태그입니다. 단순히 말해서 문장이 적힐때 쓰여지는 태그라고 보면 됩니다.
CSS: 스타일과 디자인
CSS(Cascading Style Sheets)는 웹 페이지에 스타일(색상, 글꼴, 레이아웃 등)을 적용합니다. HTML 요소의 외관을 꾸며 사용자에게 보기 좋은 형태로 제공합니다.
예시: HTML에 CSS 적용하기
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial; }
h1 { color: blue; }
p { color: green; }
</style>
<title>스타일 예시</title>
</head>
<body>
<h1>제목</h1>
<p>이것은 초록색 단락입니다.</p>
</body>
</html>- <style> 태그: CSS를 HTML 문서 내부에 직접 작성할 때 사용합니다. 보통 CSS 파일을 따로 작성하여 웹페이지에 적용시키지만, 간단한 경우 html 문서 안에 <style></style> 사이에 CSS를 지정해줌으로써 스타일을 설정할 수 있습니다.
- CSS 선택자(body, h1, p)는 스타일을 적용할 HTML 요소를 지정합니다.
- 중괄호 {} 안에 속성: 값; 형식으로 스타일 규칙을 정의합니다.
JavaScript: 상호작용과 기능
JavaScript는 웹 페이지에 상호작용성과 동적 기능을 추가하는 프로그래밍 언어입니다. 사용자 이벤트를 처리하고, 데이터를 조작하며, 페이지의 내용을 실시간으로 변경할 수 있게 합니다.
예시: JavaScript로 버튼 기능 추가하기
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 예시</title>
</head>
<body>
<button onclick="displayDate()">현재 시간 보기</button>
<p id="time"></p>
<script>
function displayDate() {
document.getElementById("time").innerHTML = new Date().toLocaleTimeString();
}
</script>
</body>
</html>이 예제에서는 버튼과 단락(<p>) 태그를 사용하여 현재 시간을 표시하는 간단한 기능을 구현합니다.
- <button> 태그는 클릭 가능한 버튼을 만듭니다.
- onclick 속성은 버튼이 클릭될 때 실행될 JavaScript 함수(displayDate())를 지정합니다.
- displayDate() 함수는 현재 시간을 가져와서 id가 time인 <p> 태그의 내용으로 설정합니다. document.getElementById()는 특정 ID를 가진 HTML 요소를 찾는데 사용되고, innerHTML은 해당 요소의 HTML 내용을 변경합니다.
JavaScript를 통해 이렇게 웹 페이지의 요소들에 동적인 변화를 주거나 사용자와의 상호작용을 구현할 수 있습니다. html과 css는 비교적 쉬운 반면 자바스크립트는 약간 난이도가 올라갑니다. 오늘은 전체적인 내용을 대략적으로 살펴보았고 다음 강에서는 좀 더 자세히 다뤄보도록 하겠습니다.
댓글