[Front-end] HTML, CSS, JavaScript

Front-end 2024. 8. 21. 04:48

Front-end 의 기본 구성 요소

HTML
- 웹 페이지의 콘텐츠 구조를 정의
- 모든 텍스트, 이미지, 링크 등은 HTML이라는 마크업 언어를 통해 웹 페이지에 배치된다.
CSS
- HTML로 정의된 콘텐츠의 스타일과 레이아웃을 제어
- 색상, 글꼴, 레이아웃 등이 CSS로 결정된다.
JavaScript
- 웹 페이지에 동적인 기능을 추가
- 예를 들어, 버튼을 클릭했을 때 나타나는 팝업 창이나, 입력한 데이터를 실시간으로 검증하는 기능 등을 구현한다.

우리가 아는 크롬이나 사파리같은 브라우저는

→ HTML 문서를 파싱하여 웹 페이지의 구조를 이해하고, CSS 스타일을 적용하여 페이지의 디자인을 결정하고, JavaScript 코드를 실행하여 동적인 요소를 다루고 상호작용을 구현하여 우리에게 시각적으로 웹페이지를 보여준다.

브라우저가 하는 이 일이 바로 → 📌 렌더링 이다.

HTML

모든 HTML 문서는 일정한 구조를 가진다.

<!DOCTYPE html>: HTML5 문서임을 선언
<html>: 전체 HTML 문서를 감싸는 루트 요소
<head>: 메타데이터, 스타일, 스크립트, 제목 등을 포함
<body>: 실제로 웹 페이지에 표시될 콘텐츠를 포함

텍스트 태그

<h1> ~ <h6> 제목(헤딩) 태그로, <h1>이 가장 중요한 제목, <h6>이 덜 중요한 제목을 나타냄. h1의 글자 크키가 가장 크고 h6으로 갈수록 작아짐
<p> 문단을 정의하는 태그
<strong> 굵은 텍스트. 의미적으로 중요성을 나타냅니다.
<em> 기울임 텍스트. 의미적으로 강조

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 기본 구조</title>
</head>
<body>
    <h1>Hello, HTML!</h1>
  <h2>안녕!</h2>
  <h3>작아졌지?</h3>

링크와 이미지 태그

<a> 링크를 생성. href 속성을 사용하여 링크할 URL을 지정

"Example"이라는 텍스트를 클릭하면, 사용자를 https://www.example.com 으로 이동시키는 링크가 생성된다

<a href="https://www.example.com">Example</a>

<img> 이미지를 삽입. src 속성으로 이미지 파일의 경로를 지정하고, alt 속성으로 대체 텍스트를 추가

웹페이지에 image.jpg 파일을 표시하고, 이미지가 로드되지 않거나 시각 장애를 가진 유저를 위해 alt="" 안에 대체 텍스트를 넣어준다.

<img src="image.jpg" alt="이미지 설명" />

리스트 태그

<ul>: 순서 없는 목록(ul)을 생성. 항목은 <li> 태그로 감싸줌

<ul>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
</ul>

<ol>: 순서 있는 목록(ol)을 생성. 목록 항목은 번호로 표시. <li> 태그로 항목을 감싸줌

<ol class="ol_class" id="ol_id">
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
</ol>

폼 태그

<form>: 사용자 입력을 수집하여 서버로 제출. 텍스트 입력, 라디오 버튼, 체크박스, 버튼 등 다양한 입력 요소를 포함

<form action="/submit" method="post">
    <label for="name">이름:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="제출">
</form>

사용자가 이름을 입력하고 제출할 수 있는 폼을 생성. action 속성은 데이터를 보낼 URL을 지정하고, method 속성은 POST 방식을 사용하여 데이터를 서버로 전송한다.

*참고 <br> 태그 : 강제로 줄 바꾸기

CSS

역할: HTML로 만든 콘텐츠의 스타일을 지정하는 역할. 즉, 예쁘게 꾸며주는 애다.
기본 문법: 선택자(selector), 속성(property), 값(value)으로 구성된다.

모든 <h1> 태그의 글자 색을 빨간색으로, 글자 크기를 50픽셀로 지정

h1 {
    color: red;
    font-size: 50px;
}

태그 선택자: HTML 태그 이름을 사용하여 특정 태그를 선택
클래스 선택자: 클래스 이름을 사용하여 특정 그룹의 요소를 선택. 클래스 이름 앞에 .을 붙임
아이디 선택자: 고유한 ID를 가진 요소를 선택. ID 이름 앞에 #을 붙임

highlight가 클래스가 적용된 모든 요소의 배경색을 노란색으로 지정

.ol_class {
    background-color: yellow;
}

main ID를 가진 요소의 너비를 100%로 설정하고, 가운데 정렬을 위해 좌우 여백을 자동으로 지정

#ol_id {
    width: 100%;
    margin: 0 auto;
}

CSS 속성 예시

배경과 색상
- background-color: 요소의 배경색을 지정
- color: 텍스트의 색상을 지정
텍스트 스타일
- font-size: 텍스트의 크기를 지정
- font-weight: 텍스트의 두께를 지정
- text-align: 텍스트의 정렬을 지정(왼쪽, 가운데, 오른쪽 등)
레이아웃
- margin: 요소의 외부 여백을 지정
- padding: 요소의 내부 여백을 지정
- border: 요소의 테두리를 지정

박스 모델
- 모든 HTML 요소는 사각형 박스로 표시되며, 이 박스는 콘텐츠(content), 패딩(padding), 테두리(border), 마진(margin)으로 구성된다.

예시

.box {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 1px solid black;
    margin: 20px;
}

↑ box 클래스를 가진 요소의 크기를 지정. 요소는 100x100픽셀 크기의 콘텐츠 영역을 가지고 있으며, 10픽셀의 패딩, 1픽셀의 테두리, 20픽셀의 마진을 가진다.

css 예시

JavaScript 기초

역할: 웹 페이지에 동적인 기능을 추가. 사용자와의 상호작용, 데이터 검증, 애니메이션 효과 등을 구현하는 데 사용된다.
기본 문법: 변수 선언, 함수 정의, 조건문, 반복문 등

예제

let message = "Hello, JavaScript!";
alert(message);

변수 message에 문자열을 저장하고, alert 함수를 사용하여 사용자에게 메시지를 표시

변수 선언: var, let, const 키워드를 사용하여 변수를 선언

let 예제

let name = "홍길동";
console.log(name);

기본 데이터 타입: 문자열(string), 숫자(number), 불리언(boolean), 배열(array), 객체(object)

// 1. 문자열 (String)
let greeting = "Hello, world!";
console.log(greeting);  // 콘솔에 "Hello, world!" 출력

// 2. 숫자 (Number)
let age = 25;
let temperature = -10.5;
console.log(age);  // 콘솔에 25 출력
console.log(temperature);  // 콘솔에 -10.5 출력

// 3. 불리언 (Boolean)
let isStudent = true;
let hasGraduated = false;
console.log(isStudent);  // 콘솔에 true 출력
console.log(hasGraduated);  // 콘솔에 false 출력

// 4. 배열 (Array)
let colors = ["red", "green", "blue"];
console.log(colors);  // 콘솔에 ["red", "green", "blue"] 출력
console.log(colors[0]);  // 콘솔에 "red" 출력 (배열의 첫 번째 요소)

// 5. 객체 (Object)
let person = {
    name: "홍길동",
    age: 30,
    isStudent: false
};
console.log(person);  // 콘솔에 {name: "홍길동", age: 30, isStudent: false} 출력
console.log(person.name);  // 콘솔에 "홍길동" 출력 (객체의 name 속성)

// 6. null
let emptyValue = null;
console.log(emptyValue);  // 콘솔에 null 출력

// 7. undefined
let notAssigned;
console.log(notAssigned);  // 콘솔에 undefined 출력

문자열(String): 텍스트 데이터를 저장하는 데 사용하며, "Hello, world!"처럼 작은 따옴표나 큰 따옴표로 감싸서 표현한다.
숫자(Number): 정수 및 소수를 포함한 모든 숫자 데이터를 저장한다. 위 예시처럼 25, 10.5와 같은 값을 가진다.
불리언(Boolean): 참(true) 또는 거짓(false)의 두 가지 값만을 가진다. 논리적 조건을 처리할 때 사용한다.
배열(Array): 여러 개의 데이터를 하나의 변수에 저장 가능하다. 인덱스(0부터 시작)를 통해 접근이 가능하기 때문에 위 예시처럼 colors[0]은 "red"를 반환한다.
객체(Object): 키-값 쌍의 집합으로, 관련된 데이터를 그룹화하여 저장한다. 객체의 속성은 점(.) 표기법을 사용하여 접근 가능하다. 예를 들어, person.name은 사람의 이름은? 물어보는 값이므로 "홍길동"을 반환한다. 만약 person.age 를 물어보면 30을 반환한다.
null: 의도적으로 값이 비어 있음을 나타내는 데이터 타입이다.
undefined: 변수가 선언되었으나 값이 할당되지 않았을 때의 상태를 나타낸다.

📌 null과 undefined의 차이는 뭘까? 🤔

→ null 은 명시적으로 객체가 없음을 나타내는 의도적인 값으로 사용되고,

→ undefined 는 변수에 아직 값이 설정되지 않았음을 나타내는 기본 초기값으로 주로 사용된다.

함수 정의: JavaScript에서 함수는 코드를 재사용하기 위한 방법

JavaScript code (이 함수는 인자로 받은 name에 맞춰 인사 메시지를 반환. 함수를 호출하여 인사말을 출력)

function greet(name) {
    return "안녕하세요, " + name + "님!";
}
let greeting = greet("홍길동");
console.log(greeting);

이벤트 처리: 버튼 클릭, 폼 제출 등 사용자의 행동에 반응하도록 이벤트를 처리

html code (버튼을 클릭했을 때 알림 메시지가 나타나도록 이벤트 리스너를 추가. 버튼의 ID를 선택하여 이벤트를 연결)

<button id="myButton">클릭하세요</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
    alert("버튼이 클릭되었습니다!");
});
</script>

클릭하면 아래 팝업이 뜸

Bootstrap

CSS, JavaScript 기반의 다양한 도구를 제공해 손쉽게 웹 페이지를 꾸밀 수 있도록 도와준다.👍

주요 기능과 장점
- 반응형 디자인: 하나의 코드베이스로 다양한 디바이스에 대응 가능
- 그리드 시스템: 레이아웃 구성이 매우 쉬움
- 다양한 구성 요소: 버튼, 네비게이션 바, 폼 등 자주 사용하는 UI 요소들을 미리 정의된 스타일로 사용 가능
- 커뮤니티와 문서: 전 세계적으로 사용되기 때문에 문서와 지원이 풍부
Bootstrap 사용 이유
- 시간 절약: 기본적인 UI를 빠르게 구성할 수 있어 개발 시간이 단축
- 일관성: 일관된 디자인을 유지 가능
- 확장성: 필요에 따라 쉽게 커스터마이징 가능

Bootstrap 공식 웹사이트

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

getbootstrap.com

사이트에 들어가보면 여러가지를 쓰고 싶은걸 복사해와서 쓸 수 있다.

예시👀

button

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Button Example</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
    <h3>Buttons</h3>
    <!-- 기본 버튼 -->
    <button class="btn btn-primary">Primary Button</button>
    <button class="btn btn-secondary">Secondary Button</button>

    <!-- 크기 조정된 버튼 -->
    <button class="btn btn-success btn-lg">Large Button</button>
    <button class="btn btn-danger btn-sm">Small Button</button>

    <!-- 원형 버튼 -->
    <button class="btn btn-info rounded-circle">O</button>

    <!-- 아이콘이 포함된 버튼 -->
    <button class="btn btn-warning">
        <i class="fas fa-check"></i> Icon Button
    </button>
</div>

<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</body>
</html>

navbar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Navbar Example</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

card

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Card Example</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
    <h3>Card</h3>
    <div class="card" style="width: 18rem;">
        <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Form Example</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
    <h3>Form</h3>
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1">
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

ABOUT ME

monsterroute 님의 블로그 monsterroute 님의 블로그

Front-end 의 기본 구성 요소

HTML

CSS

JavaScript 기초

Bootstrap

티스토리툴바