풀스택 개발자 과정 34일차

너구·2026년 6월 24일

풀스택 성장과정

목록 보기

35/79

프론트 엔드 (Front-End)

사용자가 브라우저를 통해 눈으로 보고 클릭하고 상호작용하는 웹사이트의 모든 앞단(Client-sid) 영역을 구축하는 기술을 의미한다.

개발 언어

HTML
웹페이지의 기본 정보(텍스트, 이미지 등)를 만드는 언어이다.
CSS(Cascading Style Sheet)
디자인/스타일 개발에 사용되는 언어이다.
JavaScrpit
사용자와 상호작용 하기 위한 움직임을 만든다.

HTML (Hyper-Text Markup Language)

웹페이지 기본 구조를 만드는 언어이다.

hypertext: 하이퍼텍스트는 링크를 의미한다.
링크를 통해 서로 연결되는 HTML 문서의 특징을 대표하는 단어이다.

HTML 문서의 구조

head: 화면에 보이지 않는 메타 데이터를 포함한다.
body: 문서의 본문이다. 실제 내용이 들어간다.

head 태그들

html 기초 예제

html 문서를 만들고 각 구조를 파악하기

<!-- HTML 문서를 선언한다 -->
<!DOCTYPE html>

<!-- html: 문서에서 최상위 엘리먼트이다. head, body를 감싼다 -->
<html lang="en">

<!-- head: 메타데이터가 있는 영역 -->
<head>
    <!-- 메타. charset: 문자 인코딩 방식. 기본값은 UTF-8이다
     전 세계의 모든 문자를 지원한다 -->
    <meta charset="UTF-8">
    <!-- name: 메타 엘리먼트의 이름
         content: 메타 엘리먼트의 내용 
         viewport: 화면
         width=device-width: 이 HTML 문서의 넓이를 기기의 넓이로 정하겠다 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 이 HTML 문서의 제목 -->
    <title>나의 첫번째 HTML 문서</title>
</head>

<!-- body: 이 문서의 본문 -->
<body>

    <h1>Hello MTML!</h1>
    
<!-- body의 끝 -->
</body>

<!-- html의 끝 -->
</html>

HTML 요소(element)

HTML 문서를 구성하는 각각의 요소를 의미한다.

HTML 요소 예제

h1, p 엘리먼트를 활용해 간단한 블로그 헤더를 만들어라

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- h1 엘리먼트 -->
    <h1>Blog</h1>

    <!-- p 엘리먼트 -->
    <p>안녕하세요!</p>
    
</body>
</html>

계층 구조(Tree)

HTML 문서에서 모든 엘리먼트들은 계층 구조로 구성된다.

계층 구조 예제

ul, li 엘리먼트를 활용해 간단한 리스트를 만들고 계층 구조를 확인하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- ul: unordered list -->
    <!-- li들의 부모 -->
    <ul>
        <!-- li: list item -->
        <!-- ul의 자식들 -->
        <!-- li들은 서로 형제 관계 (같은 부모를 둔 관계) -->
        <li>foo</li>
        <li>bar</li>
        <li>baz</li>
    </ul>
    
</body>
</html>

엘리먼트 속성(Attributes)

속성을 사용해 엘리먼트에 추가적인 내용이나 특별한 기능을 부여할 수 있다.
엘리먼트 별로 고유한 속성들을 가지고 있다.

<엘리먼트 속성1 = 값 속성2 = 값...> 내용</엘리먼트>

링크 만들기 예제

구글로 이동하는 링크를 만들어라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <a href="http://google.com">Google</a>
    
</body>
</html>

Text

h1 - h6

제목(Heading)을 표현하는 데 사용된다.
h1 - h6까지 구성되어있으며 숫자가 커질수록 글자가 작아진다.

Heading 예제

h1-h5 엘리먼트를 활용해 앞의 이미지를 구현하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    
</body>
</html>

p (paragraph)

문장(paragraph)을 표현하는데 사용된다.

문장 생성하기 예제

다음의 문장을 화면에 만들어라.

시계는 살 수 있지만 시간을 살 수 없다.
시계도 비싸지면 살 수 없다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <p>시계는 살 수 있지만 시간은 살 수 없습니다.</p>
    
    <p>시계도 비싸면 살 수 없습니다.</p>
    
</body>
</html>

a (anchor)

링크 역할을 한다.

링크 만들기 예제

구글로 이동하는 링크를 만들어라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 새 창에서 구글을 연다 -->
     <!-- target의 기본값은 _selt 이다 -->
    <a href="http://google.com" target ="_blank">
        Google
    </a>

</body>
</html>

span

문장에서 특정 구간을 선택하는 용도로 사용된다.
주로 특정 구간에 스타일을 주기 위해 사용된다.

span 활용하기 예제

다음 문장을 출력하라.

시계는 살 수 있지만 시간은 살 수 없습니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <p>
        시계는 살 수 있지만 
        <span style="font-weight: bold;">시간</span>은 살 수 없습니다.
    </p>
    
</body>
</html>

br

문장에서 줄바꿈 기능(break)을 제공한다.

줄 바꾸기 예제

다음 문장을 출력하라.

시계는 살 수 있지만
시간은 살 수 없습니다.

hr

수평선(horizontal rule)을 긋는다. 문서에서 영역을 구분하는 용도로 사용된다.

영역 나누기 예제

다음의 디자인을 만들어라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <h1>Title</h1>

    <!-- 수평선 -->
    <hr>

    <!-- 샘플 텍스트 만드는 법: lorem 입력 -->
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, 
        ab laborum? Eius, iste voluptates quo delectus placeat possimus sequi alias 
        id dolore, iusto vel dolorem, dolor aliquid saepe voluptate recusandae?
    </p>

</body>
</html>

기타 텍스트 태그들

기타 태그들 예제

다음 이미지를 구현하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <b>bold text</b>
    <br>
    <i>italic text</i>
    <br>
    <small>small text</small>
    
</body>
</html>

퀴즈

다음 이미지를 구현하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h2>Front-end 언어</h2>
    <i>재미있는 비유로 알아봅시다</i>

    <h4>HTML</h3>
    <p>우리 몸의 뼈대 역할</p>
    <hr>

    <h4>CSS</h4>
    <p>우리 몸의 피부 역할</p>
    <hr>

    <h4>JavaScript</h4>
    <p>우리 몸의 근육 역할</p>
    
</body>
</html>

데이터 출력

ul

순서가 없는 리스트(Unordered list)를 의미한다.
il(list item) 요소와 함께 사용된다.

ul 활용하기 예제 (1)

ul, li를 활용해 간단한 리스트를 만들어라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <h3>ul</h3>

    <!-- 순서가 없는 리스트(Unordered List) -->
    <ul>
        <!-- 리스트 항목(List Item) -->
        <li>foo</li>
        <li>bar</li>
        <li>baz</li>
    </ul>

</body>
</html>

ul 활용하기 예제 (2)

다음과 같이 할 일 목록을 만들어라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>할 일 목록</h1>

    <ul>
        <li>밥 먹기 ✅ </li>
        <li>공부하기</li>
        <li>게임하기</li>
        <li>기타치기</li>
    </ul>
    
</body>
</html>

ol

순서가 있는 리스트(ordered list)를 생성하는 엘리먼트로 각 요소에게 순서대로 번호를 할당한다.
li(list item) 엘리먼트와 함께 사용된다.

ol 활용하기 예제 (1)

ol을 활용해 간단한 리스트를 만들어라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h3>ol</h3>
    <!-- ol(ordered list): 순서가 있는 리스트 -->
    <ol>
        <!-- li (lit item) -->
        <li>foo</li>
        <li>bar</li>
        <li>baz</li>
    </ol>
    
</body>
</html>

ul과 다르게 1. 2. 3 이런식으로 번호가 생기는 것을 확인할 수 있다.

ol 활용하기 예제 (2)

ol을 활용해 다음과 같이 라면 끓이는 레시피를 만들어라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>라면 끓이는 법</h1>
    <ol>
        <li>물을 끓입니다</li>
        <li>물이 끓으면 건더기를 넣습니다</li>
        <li>스프와 면을 넣습니다</li>
        <li>냉장고에서 김치를 꺼내옵니다</li>
        <li>냠냠합니다</li>
    </ol>
    
</body>
</html>

dl

데이터 리스트(data list)를 의미하는 것으로 dt(data title)와 dd(data description) 엘리먼트와 함께 사용된다.

dl 활용하기 예제 (1)

dl을 활용해 간단한 데이터 목록을 만들어라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <h3>dl</h3>

    <!-- dl (data list) -->
    <dl>
        <!-- dt (data title): 데이터 제목 -->
        <dt>title</dt>
        <!-- dd (data description): 데이터 설명 -->
        <dd>description</dd>

        <dt>title</dt>
        <dd>description</dd>

        <dt>title</dt>
        <dd>description</dd>
    </dl>

</body>
</html>

dl 활용하기 예제 (2)

dl을 활용해 다음의 과일 리스트를 만들어라

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <h2>과일 가게</h2>

    <dl>
        <dt>수박</dt>
        <dd>15,000원</dd>

        <dt>참외</dt>
        <dd>3,000원</dd>

        <dt>오렌지</dt>
        <dd>4,000원</dd>

        <dt>토마토</dt>
        <dd>5,000원</dd>
    </dl>

</body>
</html>

Table(표)

다음은 테이블을 구성하는 엘리먼트이다.

테이블 활용 예제 (1)

다음과 같이 사람 정보 테이블을 구현하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>Person</h1>

    <!-- border: 임시로 테이블에 선을 만든다 -->
    <table border = "1">
        <tbody>
            <!-- 첫번째 행(row) -->
            <tr>
                <!-- 열의 제목 -->
                <th>id</th>
                <th>name</th>
                <th>age</th>
            </tr>
            <!-- 두번째 행 -->
            <tr>
                <!-- td(table data): 칸 또는 셀(cell) -->
                <td>1</td>
                <td>John Doe</td>
                <td>30</td>
            </tr>
            <!-- 세번째 행 -->
            <tr>
                <td>2</td>
                <td>Jane Doe</td>
                <td>25</td>
            </tr>
            <!-- 네번째 행 -->
            <tr>
                <td>3</td>
                <td>Mary Doe</td>
                <td>40</td>
            </tr>
        </tbody>
    </table>
    
</body>
</html>

테이블 활용 예제 (2)

다음과 같이 메뉴 테이블을 구현하라.

업로드중..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>메뉴</h1>

    <table border="1">
        <tbody>
            <tr>
                <th>번호</th>
                <th>제품명</th>
                <th>가격</th>
                <th>판매량</th>
            </tr>
            <tr>
                <td>1</td>
                <td>아메리카노</td>
                <td>2,000원</td>
                <td>18</td>
            </tr>
            <tr>
                <td>2</td>
                <td>카페라떼</td>
                <td>3,000원</td>
                <td>5</td>
            <tr>
                <td>3</td>
                <td>바닐라라떼</td>
                <td>3,500원</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>마카롱</td>
                <td>2,000원</td>
                <td>3</td>
            </tr>
            <tr>
                <td>5</td>
                <td>치즈케이크</td>
                <td>3,500원</td>
                <td>1</td>
            </tr>
            </tr>
        </tbody>
    </table>
    
</body>
</html>

마무리

오늘은 프론트엔드를 배웠다.
java를 배웠어서 그런지 아직까지는 훨씬 더 쉽고 재미있다.
물론 더 깊게 들어가면 배워야 할 것들이 쌓여있겠지만 지금은 매우 간단해서 좋다.
프론트엔드 언어를 배우는 와중에도 백엔드 복습을 하면서 잊지 않도록 되살려야겠다.

너구

이전 포스트

풀스택 개발자 과정 33일차 +@

다음 포스트

풀스택 개발자 과정 34일차

풀스택 성장과정

프론트 엔드 (Front-End)

개발 언어

HTML (Hyper-Text Markup Language)

HTML 문서의 구조

head 태그들

html 기초 예제

HTML 요소(element)

HTML 요소 예제

계층 구조(Tree)

계층 구조 예제

엘리먼트 속성(Attributes)

링크 만들기 예제

Text

h1 - h6

Heading 예제

p (paragraph)

문장 생성하기 예제

a (anchor)

링크 만들기 예제

span

span 활용하기 예제

br

줄 바꾸기 예제

hr

영역 나누기 예제

기타 텍스트 태그들

기타 태그들 예제

퀴즈

데이터 출력

ul

ul 활용하기 예제 (1)

ul 활용하기 예제 (2)

ol

ol 활용하기 예제 (1)

ol 활용하기 예제 (2)

dl

dl 활용하기 예제 (1)

dl 활용하기 예제 (2)

Table(표)

테이블 활용 예제 (1)

테이블 활용 예제 (2)

마무리

풀스택 개발자 과정 33일차 +@

풀스택 개발자 과정 34일차 +@

0개의 댓글