웹 개발과 HTML/CSS 핵심 정리

웹 개발이란?

웹(World Wide Web)은 브라우저를 통해 접근 가능한 사이트들의 집합입니다. 웹 개발은 이러한 사이트를 구축하는 전 과정을 의미합니다.

웹사이트 동작 원리

  1. 사용자가 브라우저로 프론트엔드 서버에 접속하면 프론트엔드 코드가 전달됩니다.
  2. 브라우저가 이 코드를 해석해 화면에 기본 레이아웃을 표시합니다.
  3. 코드에 명시된 백엔드 서버 주소로 데이터 요청이 발생합니다.
  4. 서버가 데이터베이스에서 정보를 조회해 브라우저에 반환합니다.
  5. 브라우저가 받은 데이터를 화면에 반영해 완성된 페이지를 보여줍니다.

개발 방식 비교

방식특징현황
프론트/백 분리각 영역을 독립된 서버에 배포현재 표준 (70% 이상)
통합 개발하나의 프로젝트에 전체 코드 포함레거시 시스템

핵심 기술 스택

프론트엔드: HTML, CSS, JavaScript, Vue, Ajax, TypeScript, Element UI, Nginx

백엔드: Maven, Servlet, Tomcat, HTTP, Spring Boot, MySQL, JWT, AOP, Filter, IOC/DI

HTML과 CSS 기초

HTML 개념

HTML(HyperText Markup Language)은 콘텐츠의 구조를 정의하는 마크업 언어입니다.

  • 하이퍼텍스트: 텍스트 외 이미지, 영상, 오디오 등 다양한 미디어 포함
  • 마크업: <태그명> 형태의 미리 정의된 요소로 구성

CSS 개념

CSS(Cascading Style Sheet)는 시각적 표현을 담당하는 스타일 규칙입니다.

기본 문서 구조

<!DOCTYPE html>
<html>
  <head>
    <title>페이지 제목</title>
  </head>
  <body>
    <h1>Hello HTML</h1>
    <img src="photo.png" alt="설명">
  </body>
</html>

주요 태그 정리

이미지 태그

<img src="경로" width="값" height="값" alt="대체텍스트">

경로 표기: 대경로(C:\...) 또는 상대경로(./현재, ../상위) 사용

제목 태그

<h1>가장 큰 제목</h1>
<h2>부제목</h2>
...
<h6>가장 작은 제목</h6>

구분선

<hr>

CSS 적용 방식

방식위치사용 빈도
인라인태그의 style 속성JS 연동 시
내부<style> 태그 내부단일 페이지
외부<link>로 .css 파일 연결기업 표준

색상 표현법

  • 키워드: red, navy
  • RGB: rgb(255, 0, 0)
  • RGBA: rgba(255, 0, 0, 0.5) (투명도 포함)
  • 16진수: #ff0000 또는 #f00 (축약)

선택자 종류

/* 요소 선택자 */
h1 { color: navy; }

/* 클래스 선택자 */
.highlight { background: yellow; }

/* ID 선택자 */
#header { font-size: 24px; }

하이퍼링크

<a href="https://example.com" target="_blank">새 창에서 열기</a>
<a href="/local" target="_self">현재 창에서 열기</a>

콘텐츠 태그

미디어

<video src="clip.mp4" controls width="640"></video>
<audio src="music.mp3" controls></audio>

텍스트 서식

효과일반 태그의미 강조 태그
굵게<b><strong>
기임<i><em>
밑줄<u><ins>
취소선<s><del>

단락 처리

<p>문단 내용</p>
<br>

레이아웃 박스 모델

모든 요소는 직사각형 박스로 취급됩니다.

  • content: 실제 내용 영역
  • padding: 내용과 테두리 사이 여백
  • border: 테두리 선
  • margin: 외부 여백 (박스 외부)
div {
  width: 300px;
  height: 200px;
  box-sizing: border-box;
  padding: 20px;
  border: 2px solid #333;
  margin: 15px auto;
}

레이아웃 태그

특성<div><span>
배치한 줄 독점인라인 연속
크기 설정가능불가
용도영역 구분텍스트 묶음

표 구성

<table>
  <tr>
    <th>번호</th>
    <th>이름</th>
  </tr>
  <tr>
    <td>1</td>
    <td>홍길동</td>
  </tr>
</table>

폼 요소

폼 기본 속성

<form action="/submit" method="post">
  <input type="text" name="nickname">
  <button type="submit">전송</button>
</form>

입력 타입

type용도
text일반 텍스트
password비밀번호 (가림)
radio단일 선택
checkbox다중 선택
file파일 업로드
date/time날짜/시간 선택
email이메일 검증
number숫자 전용
hidden숨김 필드
submit/reset/button동작 버튼

선택 및 입력 요소

<select name="city">
  <option value="seoul">서울</option>
  <option value="busan">부산</option>
</select>

<textarea name="memo" rows="5" cols="40"></textarea>

전체 예시

<form method="post">
  이름: <input type="text" name="fullname"><br>
  호: <input type="password" name="pwd"><br>
  성별: 
    <input type="radio" name="sex" value="M">남
    <input type="radio" name="sex" value="F">여<br>
  취미:
    <input type="checkbox" name="hobby" value="read">독서
    <input type="checkbox" name="hobby" value="travel">여행<br>
  프로필: <input type="file" name="profile"><br>
  생일: <input type="date" name="birth"><br>
  이메일: <input type="email" name="mail"><br>
  나이: <input type="number" name="years"><br>
  학력:
    <select name="edu">
      <option value="">선택</option>
      <option value="uni">대학</option>
      <option value="grad">대학원</option>
    </select><br>
  소개: <textarea name="intro" rows="4" cols="30"></textarea><br>
  <input type="hidden" name="token" value="abc123">
  <input type="submit" value="등록">
  <input type="reset" value="초기화">
</form>

주의: 모든 입력 요소는 name 속성이 있어야 서버로 전송됩니다.

태그: HTML CSS 웹개발 프론트엔드 백엔드

7월 5일 01:22에 게시됨

인기 태그

©2026 괴물 클럽