웹개발 기초 정리 - HTML, CSS, JavaScript

 

 

HTML 이란?

HTML은 Hyper Text Markup Language의 약자이다.

웹페이지의 구조(뼈대)를 만드는 언어이다.

 

쉽게 비유하면:

• HTML → 건물 뼈대
• CSS → 인테리어
• JavaScript → 전기 장치

같은 느낌이다.

 

1) Hyper Text란?

Hyper Text는 다른 페이지로 이동할 수 있는 텍스트를 의미한다.

대표적인 예시는 링크(link)이다.

 

예시:

네이버

클릭하면 다른 페이지로 이동할 수 있다.

 

2) Markup Language란?

Markup Language는 텍스트의 의미와 구조를 표시하는 언어이다.

 

예를 들어:

<h1>제목</h1>
<p>본문</p>

 

이렇게 태그(Tag)를 사용해서 제목인지, 문단인지를 브라우저에게 알려준다.

---

 

form 태그 - 백엔드 개발자가 알아야하는 HTML

백엔드 개발자는 사용자가 입력한 데이터를 서버로 전달받아야 한다.

그때 가장 중요한 태그 중 하나가:

<form>

태그이다.

 

form 안에는 보통:

• input
• select
• textarea

같은 입력 태그들이 들어간다.

사용자가 입력한 데이터는 JavaScript를 통해 JSON 형태로 변환되어 서버로 전달된다.

 

1) JSON 이란?

JSON은 데이터를 저장하고 전달하기 위한 텍스트 형식이다.

 

2) JSON 구조

{
    "name": "가나다",
    "age": 30,
    "married": false
}

 

JSON은:

키(key) : 값(value)

형태로 데이터를 저장한다.

 

현재 웹 개발에서 가장 많이 사용되는 데이터 형식 중 하나라고 한다.

 

3) input 태그

input 태그는 사용자 입력을 받는 태그이다.

예시:

<input type="text" name="username">

 

 

3-1) name 속성

서버로 전달될 데이터 이름

백엔드 입장에서 굉장히 중요한 속성이다.

 

예를 들어 사용자가:

홍길동

 

을 입력하면 서버에는:

username = 홍길동

형태로 전달된다.

 

즉 name 속성이 서버와 연결되는 데이터 이름이라고 이해할 수 있다.

 

---

CSS란?

CSS는 웹페이지의 디자인과 배치를 담당하는 언어이다.

HTML이 뼈대라면 CSS는 꾸미기 역할을 한다.

 

예시:

• 글자 색
• 배경 색
• 크기
• 위치
• 정렬

등을 설정할 수 있다.

 

1) CSS 기본 구조

선택자 {
    속성 : 값;
}

예시:

p {
    color: red;
}

→ p 태그 글자를 빨간색으로 변경

 

2) HTML 요소는 박스(Box) 구조이다

 

웹페이지의 모든 요소는 박스 형태로 구성된다.

구조는 다음과 같다.

 

> Content (실제 내용)

> Padding (안쪽 여백)

> Border (테두리)

> Margin (바깥 여백)

 

 

---

display 속성

display는 요소를 화면에 어떻게 배치할지 결정하는 속성이다.

 

1) display: block

display: block;

 

특징:

• 한 줄 전체 차지
• 자동 줄바꿈 발생

대표 태그:

• div
• p
• h1

2) display: inline

display: inline;

 

특징:

• 글자처럼 옆으로 배치
• 크기 조절 어려움

대표 태그:

• span
• a

3) display: inline-block

display: inline-block;

 

특징:

• 옆으로 배치 가능
• 크기 조절 가능

버튼 만들 때 자주 사용된다.

4) display: flex

display: flex;

요소들을 유연하게 정렬할 때 사용한다.

실무에서 굉장히 많이 사용된다고 한다.

5) display: none

display: none;

요소를 화면에서 완전히 제거한다.

 

---

position 속성

position은 요소를 어떤 기준으로 움직일지 정하는 속성이다.

쉽게 말하면 좌표 이동 방식이다.

1) position: static

기본 위치 상태이다.

position: static;

 

2) position: relative

현재 위치를 기준으로 이동한다.

position: relative;

 

3) position: absolute

부모 요소 기준으로 위치를 고정한다.

position: absolute;

 

보통 부모에:

position: relative;

를 함께 사용한다.

4) position: fixed

브라우저 화면 기준으로 고정된다.

position: fixed;

스크롤해도 위치가 유지된다.

 

---

JavaScript란?

JavaScript는 웹페이지를 동적으로 움직이게 만드는 언어이다.

• 클릭 반응
• 애니메이션
• 데이터 요청

등을 처리한다.

 

1) JavaScript 변수

 

변수는 값을 저장하는 공간이다.

const : 값 변경 불가능

const name = "충만";

 

let : 갑 변경 가능

let age = 20;

 

 

2) 함수(Function)

 

함수는 여러 명령어를 하나로 묶은 기능이다.

 

예시:

function hello() {
    console.log("안녕하세요");
}

 

 

3)이벤트 리스너(Event Listener)

 

이벤트 리스너는 특정 행동이 발생했을 때 함수를 실행시키는 기능이다.

 

예시:

• 버튼 클릭
• 키보드 입력
• 마우스 이동

 

 

---

서버와 통신

JavaScript는 서버와 데이터를 주고받을 수 있다.

흐름은 다음과 같다.

JavaScript
→ 서버에 요청(Request)
→ 서버 처리
→ 응답(Response)
→ 화면 반영

 

 

1) fetch()란?

 

fetch는 서버에 데이터를 요청하고 응답받는 JavaScript 함수이다.

 

예시:

fetch("/api/data")

 

즉:

• 데이터를 가져오고
• 서버에 저장 요청하고
• 결과를 받아오는

기능을 담당한다.