백엔드를 공부하는데 프론트엔드는 왜 학습하느냐? 관련이 없지 않냐라고 생각하실 수 있습니다. 하지만 웹 브라우저에서 구동되는 주요 3가지 HTML, CSS, JavaScript는 백엔드 개발 뿐 아니라 웹 개발에서도 기초가 되기에 학습할 필요가 존재합니다.
그러기 위해서는 HTML과 CSS 그리고 JavaScript에 대해 알 필요가 있습니다.
먼저 HTML이 무엇이냐?
HTML이란?
- Hyper Text Markup Language의 약자로 하이퍼 텍스트를 마크업하는 언어
- 웹 페이지의 기본적인 형태를 만드는 코드로 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 태그를 활용한 언어
- 프로그래밍 언어가 아니기에 연산이나 통신같은 기능은 수행할 수 없지만 쉽고 직관적이기에 누구나 쉽게 배울 수 있다.
- 웹 표준을 제정하는 W3C에서 표준을 권고하고 발전시키고 있다
<!DOCTYPE html>
<head>
<meta charset = "EUC-KR">
<title> 제목 </title>
</head>
<body>
<svg><circle r="50" cx="50" cy="50" fill="green"></svg>
</body>
</html>
HTML의 코딩에 대해 간단하게 작성해보았고 해당 내용에 대해서는 아래와 같은 결과가 나온다
HTML 용어
- 엘리멘트(element) : 요소
- 콘텐츠를 감싸는 태그를 얘기하며 여는 태그와 닫는 태그가 한쌍을 이룬다. → ex. <head></head>
- attribute : 속성
- value : 값
CSS란?
- Casasding Style Sheets로 HTML로 작성된 웹페이지의 레이아웃, 색상, 폰트, 크기 등 시각적인 스타일을 정의하여 꾸며주는 스타일 시트 언어이다.
- 사용법
- 인라인 스타일 : HTML 태그 내에 style 속성에 직접 작성하는 방식
- 내부 스타일 시트 : HTML 문서 내 <style> 태그를 사용하는 방식
- 외부 스타일 시트 : .css 파일을 별도로 만들어 HTML에 연결하는 방식
- CSS 파일 하나만 수정하면 스타일에 해당하는 HTML 문서가 한번에 수정된다는 장점이 존재한다.
HTML을 통해 화면에 버튼이나 입력창 등의 요소를 얹어 놓으면 CSS를 통해 요소들, 화면을 꾸밀 수 있다는걸 학습하였는데, 이 둘만으로는 웹페이지는 동작하지 않고 화면에 존재하기만 한다. 이때 JavaScript가 이용된다.
JavaScript란?
- 객체를 기반으로한 스크립트 언어이며, HTML 문서 내에 저장되어 프로그래밍 요소를 추가할 수 있다.
- 인터프리터 언어로서 클라이언트 웹 브라우저에서 실행된다
- 웹 브라우저에서 동작하기에 운영체제의 제한을 받지 않으며, 여러 환경에서 개발을 할 수 있지만 소스 코드가 노출되어있어 보안에 취약하다는 단점이 존재한다.
- NodeJS를 활용하면 프론트엔드와 백엔드 모두 개발이 가능하다.
오늘은 프론트엔드의 기본 지식인 HTML, CSS, JavaScript에 대해서 간단하게 알아보았습니다. 오랜만에 학습하는 내용인데도 기억에 남아있기에 사용되는 태그나 방식에 대해서는 설명하지 않았습니다. html에 대한 학습을 원하시는 분들은 W3CSchools를 추천드리며, 프론트엔드의 기본 지식은 여기까지 하겠습니다.
다음에는 OS에 대한 전반적인 지식으로 터미널 사용법, OS의 일반적인 작동 원리 등을 학습하도록 하겠습니다.
'백엔드 공부' 카테고리의 다른 글
| OS에 대한 전반적인 지식 (2) - 터미널과 기본 명령어 (0) | 2026.03.30 |
|---|---|
| OS에 대한 전반적인 지식 (1) - 운영체제에 대해 (0) | 2026.03.30 |
| 인터넷의 이해 2 - 호스팅이란? (0) | 2026.03.11 |
| 인터넷의 이해 2 - DNS와 그 작동 원리 (0) | 2026.03.11 |
| 인터넷의 이해 1 - 브라우저와 그 작동 원리 (0) | 2026.03.10 |