[WEB] HTML, CSS, JAVASCRIPT, BOOTSTRAP

TW·2025년 4월 27일

CSS JavaScript bootstrap html web

WEB

목록 보기

1/1

HTML에 대해서 시작하기 전, WEB에 대해 간단하게 말해보려고 한다.

WEB

WEB은 전 세계의 컴퓨터와 정보를 연결하는 시스템이다.
그러다보니 사람들은 인터넷과 WEB을 혼동하는 경우가 많은데

인터넷 : 컴퓨터들 간의 물리적인 연결망(네트워크)
WEB : 인터넷 위에서 정보(문서, 이미지, 영상 등)를 주고받는 서비스다.

WEB은 주로 3가지로 이루어져 있는데

HTML (HyperText Markup Language): 웹페이지를 구성하는 문서 형식
HTTP (HyperText Transfer Protocol): 정보를 주고받는 통신 규칙
웹 브라우저 (Browser): 웹페이지를 읽어들이고 보여주는 프로그램 (예: Chrome, Safari)

이 3가지로 이루어져 있다.

✅HTML

HTML은 웹 페이지의 구조를 만드는 언어다.

HTML의 역사를 간단히 알아보자면
-> 1991년 팀 버너스리가 개발했다.
-> 최초의 목적은 과학자들이 문서를 공유하기 위한 것
-> 현재는 HTML5 버전이 표준이다.
즉, 웹은 "정보를 연결하는 방식"으로 탄생했고, HTML은 "그 정보를 표현하는 언어"다.

구조

HTML은 태그를 사용해서 구조를 표시한다.

태그(tag)
-> 웹페이지를 구성하는 요소(element)를 정의하는 명령어다.
-> 태그는 항상<로 시작하고 >로 끝난다.

<p>안녕하세요!</p>

<p> : 문단의 시작
</p> : 문단의 끝

속성
-> 태그에 추가 정보를 제공한다.

<a href="https://www.naver.com/">네이버</a>

href는 <a> 태그의 "링크할 주소"를 정해주는 속성이다.

문법
-> HTML을 사용할 때 지켜야하는 규칙이다.
-> 문서의 시작은 항상 <!DOCTYPE html>으로 시작한다.
-> HTML은 대, 소문자를 구분 하지 않는다.
-> 태그는 올바르게 중첩해야한다.

<p>안녕하세요 <strong>반갑</strong> 습니다.</p>
<!--반갑 단어만 강조되어 나온다. 그리고 html 주석처리할 때는 이런식으로 한다.-->

HTML 기본 구조

<!DOCTYPE html>
<html lang="ko"> 
  <head>
   <meta charset="UTF-8">
 <title>문서의 제목</title>
  </head>
  <body>
  </body>
</html>

✅CSS

HTML로 만든 웹페이지를 예쁘게 꾸미는 언어다.
즉, HTML은 웹페이지의 "내용"과 "구조"를 담당
CSS는 그 "내용"에 디자인과 스타일을 입힌다.

CSS의 역사를 간단히 알아보자면
-> 초창기 웹(1990~1994년)은 HTML만 사용했기 때문에
웹페이지는 모두 기본 글꼴, 기본 배경, 단순 텍스트로 이루어져 있었다.
-> 1994년, 하콘 위움 리라는 노르웨이 개발자가 개발했다.
-> CSS1 표준화 이후, HTML은 구조, CSS는 스타일을 담당하게 되어
웹페이지 디자인이 훨씬 쉬워졌다.
-> 현재는 CSS3까지 나온 후 CSS4는 없지만, 모듈별로 발전 중이다.

구조

문법
-> 선택자를 통해 어떤 HTML 요소를 꾸밀지 지정한다.
-> {} 중괄호 안에 속성과 값을 쌍으로 작성한다.
```
선택자 {
 속성: 값;
}
```

스타일은 위에서 아래로 적용되며, 나중에 정의된 것이 우선이다.

CSS 기본 구조

p {
  color: red;
  font-size: 16px;
}
<!--p라는 태그안에 있는 내용을 color는 빨간색, 글씨 크기를 16px로 바꾼다.-->

✅Javascript

Javascript는 웹페이지를 "동적으로" 만들어주는 프로그래밍 언어다.
즉, 움직임과 기능을 추가한다.

Javascript의 역사를 간단히 알아보자면
-> 1990년대 초, 웹은 아직 매우 정적(static)이었다.
-> 1995년, 넷스케이프는 한 개발자 브렌던 아이크에게
"브라우저 안에서 작동할 수 있는 스크립트 언어를 만들어달라"고 요청했다.
-> 10일만에 만들어 냈고, 처음 이름은 Mocha였고, 이후 Livescript 마지막으로 Javascript라는 이름이 되었다.
-> 마지막으로 Javascript라는 이름은 당시 Java 언어가 매우 인기있었다. 그래서 넷스케이프는 마케팅을 위해 Javascript라는 이름을 붙였다고한다.

특징

동적 기능을 추가할 수 있다.
->버튼 클릭이나 팝업 창, 슬라이더 등 인터랙션이 가능해진다.
이벤트 처리가 가능하다.
-> 사용자의 입력, 클릭 등에 반응한다.

구조

규칙
-> 변수명, 함수명 등 모두 대소문자를 구분한다.
-> 영어 대소문자, 숫자, _ , $ 사용 가능 (단, 숫자로 시작할 수 없다.)
-> 코드 블록 사용 조건문, 반복문, 함수 등에서는 반드시 {}로 블록 정의한다.

문법
-> 일반 언어와 같이 변수를 선언하고 조건문, 반복문, 함수 등 여러가지 사용이 가능하다.
->변수는 var, let, const가 있다.
var : 오래된 방식 (현재는 추천하지 않음.)
let : 블록 범위 변수
const : 변하지 않는 상수

 let name = "TW";
const pi = 3.14;

Javascript 기본 구조
->HTML안에 직접 작성하는 것, 외부 파일로 작성 두가지 방법이 있다.

HTML안에 직접 작성

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 예제</title>
</head>
<body> // body 부분 안에 직접 작성한다.
  <h1>안녕하세요</h1>
  <button onclick="sayHello()">버튼</button>

  <script>
    function sayHello() {
      alert("안녕하세요!");
    }
  </script>
</body>
</html>

외부 파일로 작성 (권장)

Script.js라는 파일 생성 후 작성한다.

function sayHello() {
  alert("안녕하세요!");
}

HTML에 연결한다.

<script src="script.js"></script>
<!--위 내용을 보면 HTML안 스크립트에 작성하면 된다.-->

Script가 길어지면 HTML안에 작성했을 때, 가독성이 떨어질 수 있어 가급적 외부 파일로 작성을 추천한다.

✅Bootstrap

Bootstrap은 웹사이트를 빠르고 쉽게 만들기 위한 CSS + JavaScript 프레임워크다.

-> 2011년 트위터(Twitter) 개발자들이 내부용 툴킷으로 시작했다.
-> 점점 인기가 높아져 공개됐다.
-> 현재는 전 세계적으로 가장 인기 있는 CSS 프레임워크 중 하나다.

특징

반응형 디자인이 기본이다.
별다른 CSS를 직접 작성하지 않고도, 클래스를 붙이는 것만으로 쉽게 스타일링 가능하다.

사용법

->HTML 문서의 안에 아래 코드를 추가한다.

<!-- Bootstrap CSS 연결해주는 링크 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

-> 필요하면 JavaScript 기능(모달창, 드롭다운 등)을 위해 JS 파일도 추가해준다.

<!-- Bootstrap JavaScript 연결 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

->이후, Bootstrap에서는 HTML 태그에 "특정 클래스명"을 추가하면 스타일이 자동으로 적용된다.

확인
위 내용을 코드에 적으면 이렇게 확인 이라는 버튼이 생기게 된다.

btn : 버튼의 기본 스타일

이렇게 "특정 클래스명" 을 추가하면 바로 적용되는 것을 볼 수 있는데, 그러면 주요 컴포넌트에 대해 알아보자.

특정 클래스명 예시

주로 쓰는것만 가지고 왔다.

주요 클래스	예시 코드	설명
버튼(Button)	`<button class="btn btn-success">저장</button>`	초록색 버튼
그리드 시스템(Grid)	`<div class="row"><div class="col-6">왼쪽</div><div class="col-6">오른쪽</div></div>`	가로 2등분
카드(Card)	`<div class="card"><div class="card-body">내용</div></div>`	박스 스타일 카드
네비게이션바(Navbar)	`<nav class="navbar navbar-light bg-light">...</nav>`	상단 메뉴바
폼(Form)	`<input type="text" class="form-control">`	입력 폼 스타일링

마지막으로 전체 기본 예시를 보고 마무리하겠다.

Bootstrap 전체 기본 예시

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 예제</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <div class="container">
    <h1 class="text-center text-primary my-5">Welcome!</h1>

    <button class="btn btn-success">시작하기</button>

    <div class="row mt-4">
      <div class="col-6 bg-info p-3">왼쪽 박스</div>
      <div class="col-6 bg-warning p-3">오른쪽 박스</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>