본문 바로가기
[내일배움캠프] 프로덕트 디자인 8기/TIL(Today I Learned)

[TIL] 24.12.09(월)

hyelinnn 2024. 12. 9. 16:45

웹 퍼블리싱(1)

 

웹 프론트엔드 개발의 개요

'웹 개발'은 사용자가 접하는 모든 웹사이트와 애플리케이션의 외형과 동작을 설계하고 구현하는 과정

'프론트엔드'는 웹 개발의 사용자 인터페이스(UI)와 사용자 경험(UX)을 담당하며, 브라우저에서 실행되는 웹 기술(HTML, CSS,

JavaScript)을 사용함

 

HTML과 CSS의 역할 및 중요성

HTML

웹 페이지의 뼈대를 만들며, 콘텐츠 구조를 정의하고 브라우저가 이를 해석하여 화면에 출력함

예시: 제목, 문단, 이미지, 링크 등 배치를 구성

 

CSS

HTML로 만든 구조에 스타일(디자인)을 입히는 것

색상, 글꼴, 레이아웃 등을 정의하여 웹 페이지를 보기 좋게 만듦

사용자의 다양한 디바이스 환경(PC, 태블릿, 스마트폰 등)에 적응하는 반응형 디자인도 CSS로 구현함

 

HTML의 기본 개념

HTML이란 컴퓨터에게 '이것을 보여줘!'라고 말하는 언어로, 우리가 웹사이트를 만들 때 사용하는 글자들

HyperText Markup Language 의 약자로, 웹 페이지의 구조를 정의하는 마크업 언어

브라우저는 HTML 코드를 해석하여 화면에 콘텐츠를 출력함.

* 마크업 언어: 컴퓨터에게 '이게 뭐야!'라고 알려주는 특별한 글쓰기 방식

* 브라우저: 인터넷에서 웹사이트를 찾아주는 창으로 보고 싶은 그림, 글, 동영상 같은 걸 인터넷에서 가져와서 화면에 보여주는 프로그램

 

HTML의 주요 역할

HTML은 레고 블록이라 생각하면 쉬움. 블록을 쌓아서 집을 만들듯, HTML 태그를 사용해서 웹 페이지를 구성하는 것으로, 웹 페이지를 '구조화'하고, 브라우저에게 그 구조를 알려주는 역할을 함.

더보기
더보기

1. 웹 페이지의 뼈대를 만드는 것

HTML은 집을 지을 때 뼈대(구조)를 세우는 것과 같음

제목은 방의 이름, 문단은 방 안에 놓인 가구, 이미지는 벽에 걸린 그림처럼, 웹 페이지의 모든 요소가 어디에 있고 어떤 역할을 하는지 정함

"여기는 제목, 여기는 문단, 여기는 버튼"이라고 알려주는 역할을 함

 

2. 브라우저에게 지시하는 언어

컴퓨터와 브라우저는 사람처럼 말이나 그림을 바로 이해하지 못함.

HTML은 "이건 제목이야!", "이건 사진이야!"라고 브라우저에게 설명하는 언어

브라우저는 HTML을 읽고 우리가 볼 수 있는 웹 페이지를 만들어 보여줌

 

3. 콘텐츠를 구조화하는 것

HTML은 웹 페이지 안에 있는 내용(글, 사진, 영상 등)을 깔끔하게 정리함

제목은 크고 굵게, 문단은 작은 글씨로, 리스트는 번호나 점으로 표시되도록 미리 약속되어 있음.

HTML을 쓰면 모든 콘텐츠가 질서 있게 배치됨.

 

HTML 문서의 기본 구조

<!DOCTYPE html>
<html>
<head>
    <title>웹 페이지 제목</title>
</head>
<body>
    <h1>메인 제목</h1>
    <p>이것은 문단입니다.</p>
</body>
</html>
  • <!DOCTYPE html>: HTML5 문서를 선언.
  • <html>: 문서의 최상위 태그.
  • <head>: 문서 정보를 포함 (메타데이터, 스타일, 스크립트 등).
  • <body>: 실제로 화면에 표시되는 콘텐츠를 포함

HTML5란? 

더보기
더보기

HTML5는 HTML(HyperText Markup Language)의 최신 버전으로, 웹 페이지를 만드는 데 사용되는 언어입니다. 2014년에 표준으로 확정되었으며, 이전 버전인 HTML4(1999년)보다 많은 개선 사항과 새로운 기능이 추가되었습니다.

HTML5는 단순히 웹 페이지를 만드는 것을 넘어서, 웹 애플리케이션을 개발하고, 모바일 환경에서 원활히 동작하며, 동영상, 오디오, 그래픽같은 풍부한 콘텐츠를 쉽게 추가할 수 있도록 도와줍니다. 즉, 오늘날 우리가 사용하는 대부분의 웹사이트와 앱은 HTML5를 기반으로 만들어졌습니다.

메타데이터란?

더보기
더보기

메타데이터는 웹 페이지에 대해 알려주는 작은 정보 카드예요. 우리 눈에 보이지 않지만, 컴퓨터나 브라우저가 웹 페이지를 더 잘 이해하도록 도와주는 정보를 말해요. 메타데이터는 페이지 제목, 글자가 어떤 언어인지, 화면 크기를 어떻게 맞춰야 하는지와 같은 브라우저에게 페이지 정보를 제공하고, 구글이 페이지를 더 잘 찾을 수 있도록 설명을 추가하여 검색엔진에게 힌트 제공하고, 아이콘이나 스타일 정보를 포함하여 페이지가 어떻게 보이는지 설정을 해요.

스크립트란?

더보기
더보기

스크립트는 웹 페이지를 똑똑하고 재미있게 만들어주는 작은 프로그램이에요. HTML은 웹 페이지의 뼈대, CSS는 꾸미기 역할을 한다면,스크립트는 움직이고 생각하게 하는 역할을 해요. 스크립트를 사용하면 버튼을 누르면 새로운 글씨가 나타나거나, 화면 색이 바뀌는 것과 같은 사용자와의 상호 작용, 슬라이드쇼처럼 사진이 자동으로 바뀌는 움직이는 화면, 날씨 정보를 가져와서 오늘 날씨를 보여주는 것과 같이 기능적인 부분을 구현할 수 있어요.

 

HTML의 기본 태그

HTML 태그는 웹 페이지에서 글자, 그림, 표, 버튼같은 것을 만들 때 쓰는 특별한 명령어

태그는 항상 < 와 > 로 감싸져 있고, 페이지에 무엇을 넣을지 알려주는 역할을 함.

예를 들어, <h1>은 큰 제목(header 1)을 나타내는 태그, <p>는 문단(paragraph)을 나타내는 태그를 의미함.

 

HTML 태그의 구조

HTML 태그는 "시작 태그", "내용", 그리고 "종료 태그"로 구성되어 있음

<태그이름>내용</태그이름>
  • 시작 태그: <태그이름> → "이제 시작이야!"를 알려주는 표시.
  • 내용: 태그 안에 들어가는 글자나 정보.
  • 종료 태그: </태그이름> → "여기서 끝이야!"를 알려주는 표시.

예시

<h1>이건 가장 큰 제목입니다.</h1>
  • <h1>: 시작 태그, 큰 제목을 표시.
  • 내용: "이건 가장 큰 제목입니다."
  • </h1>: 종료 태그, 제목의 끝을 표시.
<img src="cat.jpg" alt="고양이 사진">
  • 이미지 태그는 종료 태그가 없음!
  • 왜? 이미지는 "내용" 대신 속성으로 정보를 넣기 때문.
  • src="cat.jpg": 사진 파일의 위치를 알려줌.
  • alt="고양이 사진": 사진이 보이지 않을 때 대신 보여줄 글.
<태그이름 속성이름="값">내용</태그이름>

HTML 태그는 더 많은 정보를 넣고 싶을 때 위와 같이 속성을 사용할 수 있음.

  • 속성이름: 태그가 어떤 추가 정보를 받을지 정함.
  • 값: 속성에 넣는 실제 내용.
<a href="http://naver.com">네이버 바로가기</a>
  • <a>: 링크 태그.
  • href="<https://naver.com>": 링크로 이동할 주소를 설정.
  • 내용: "네이버 바로가기"
<바깥태그>
<안쪽태그>내용</안쪽태그>
</바깥태그>

<p>
<strong>이건 중요한 문장입니다.</strong> 그리고 이건 덜 중요한 문장입니다.
</p>
  • <p>: 문단 태그.
  • <strong>: 중요한 문장을 강조하는 태그.
  • 결과: "이건 중요한 문장입니다."는 굵게 표시됨.

 

주요 태그와 역할

 

1. 제목 태그: <h1> ~ <h6>

제목은 글의 제목이나 중요한 내용을 표시할 때 사용함. <h1>은 가장 큰 제목, <h6>은 가장 작은 제목을 의미함.

<h1>이건 가장 큰 제목입니다.</h1>
<h6>이건 가장 작은 제목입니다.</h6>

 

2. 문단 태그: <p>

문단은 긴 글을 쓸 때 한 덩어리로 정리하는 역할을 함. 책에서 한 문단씩 나눠 읽는 것처럼, 웹페이지에서도 글을 정리할 때 <p>를 사용함.

<p>안녕하세요! 저는 HTML을 배우고 있어요.</p>
<p>웹 페이지 만드는 건 정말 재미있어요!</p>

 

3. 이미지 태그: <img>

이미지는 사진이나 그림을 보여주는 태그로, <img> 태그 안에 사진의 경로(주소)를 써야 화면에 표시됨.

alt 속성은 사진이 없을 때 보여줄 설명.

<img src="profile.webp" alt="프로필 사진" width="300">

 

4. 링크 태그: <a>

링크는 누르면 다른 페이지나 사이트로 이동하게 되는 태그. href라는 속성 안에 이동할 주소를 입력.

<a href="http://naver.com">네이버 바로가기</a>

 

detail 페이지 만들고 이동시키기

1. HTML 파일 2개 만들기

index.html이 있는 폴더 안에 detail.html이라는 파일 생성.

두 파일을 같은 폴더에 저장해야 링크가 제대로 작동함.

 

2. 페이지 이동을 위한 a 태그 만들기

index.html

<!DOCTYPE html>
<html>
<head>
    <title>링크 태그 예제</title>
</head>
<body>
    <h1>환영합니다!</h1>
    <p>이 페이지는 링크를 배우는 예제예요.</p>
    <!-- 링크 태그 -->
    <a href="detail.html">자세히 보기</a>
</body>
</html>

 

detail.html

<!DOCTYPE html>
<html>
<head>
    <title>자세한 페이지</title>
</head>
<body>
    <h1>이건 상세 페이지입니다!</h1>
    <p>이 페이지로 이동했군요. 잘하셨어요!</p>
    <!-- 다시 돌아가기 위한 링크 -->
    <a href="index.html">처음으로 돌아가기</a>
</body>
</html>

 

5. 리스트 태그: <ul>, <ol>, <li>

리스트는 할 일이나 여러가지 정보들을 깔끔하게 정리할 때 사용함. 리스트(list) 자체가 정리된 목록이라는 뜻.

<ul>은 순서가 없는 목록, <ol>은 순서가 있는 목록, <li>는 목록의 항목을 표시.

<h2>순서 없는 리스트</h2>
<ul>
    <li>사과</li>
    <li>바나나</li>
    <li>포도</li>
</ul>

<h2>순서 있는 리스트</h2>
<ol>
    <li>HTML 배우기</li>
    <li>CSS 배우기</li>
    <li>JavaScript 배우기</li>
</ol>

 

6. 테이블 태그: <table>, <tr>, <td>, <th>

테이블은 정보를 표로 정리할 때 사용함, <table>은 테이블 전체, <tr>은 가로줄, <td>는 데이터 칸, <th>는 제목 칸을 의미함.

<table border="1">
    <tr>
        <th>이름</th>
        <th>나이</th>
    </tr>
    <tr>
        <td>철수</td>
        <td>10</td>
    </tr>
    <tr>
        <td>영희</td>
        <td>11</td>
    </tr>
</table>

 

7. 폼 태그: <form>, <input>, <textarea>, <button>

폼은 사용자가 정보를 입력하는 곳. <input>은 간단한 입력칸, <textarea>는 여러 줄을 입력할 때 사용, <button>은 버튼을 생성함.

<form action="/submit" method="POST">
    <label for="name">이름:</label>
    <input type="text" id="name" name="name"><br>
    <label for="message">메시지:</label>
    <textarea id="message" name="message"></textarea><br>
    <button type="submit">제출</button>
</form>

 

8. 줄 바꿈 태그: <br>

<br>태그는 줄을 바꾸는 태그로, 글을 쓰다가 줄을 바꾸고 싶을 때 사용함. "엔터키를 누른 것처럼" 글을 다음 줄로 내려줌.

<br>

 

9. 구역 나누기 태그: <div>

<div>는 구역을 나누는 상자 같은 태그로, 웹 페이지를 나누고 정리할 때 사용하며 CSS(디자인)와 함께 사용하면 페이지를 더 깔끔하게 꾸밀 수 있음.

<div>
    <h2>내가 좋아하는 것들</h2>
    <p>사과, 바나나, 딸기</p>
</div>

 

 

개발자 도구로 HTML 이해하기

 

개발자 도구

웹사이트의 내부를 볼 수 있는 돋보기 같은 것으로, 웹 페이지를 만들 때 사용된 HTML, CSS, JavaScript같은 코드를 바로 확인하고, 수정해볼 수 있는 도구. 모든 브라우저(크롬, 엣지, 사파리 등)에는 개발자 도구가 있음.

- 웹사이트가 어떻게 만들어졌는지 확인할 수 있음

- HTML 코드와 화면이 어떻게 연결되는지 배울 수 있음

- 실수나 문제를 쉽게 찾을 수 있음

- 웹사이트의 내용과 스타일을 임시로 바꿔볼 수 있어서 디자이너들도 디자인 개선 작업 혹은 디자인 검수 작업 시 자주 사용함.

- 요소 잡기 모드를 선택 후 웹 페이지의 요소에 마우스를 가져다 대면 요소에 해당하는 태그 확인 가능

- 반응형 디바이스 모드 선택하면 해상도와 디바이스를 변경하여 해상도에 따른 화면 확인 가능

- 단축키 (윈도우: F12 또는 Ctrl+Shift+I) (맥: Cmd+Option+I)

- 디자이너가 자주 사용하는 개발자 도구 기능 단축키 (요소 잡기 모드: cmd+shift+c), (반응형 디바이스 모드: cmd+shift+m)

 

 

태그 모음 래퍼런스 링크 (ChatGPT를 활용하는 것도 좋은 방법!)

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

 

HTML elements reference - HTML: HyperText Markup Language | MDN

This page lists all the HTML elements, which are created using tags.

developer.mozilla.org

 

https://www.w3schools.com/tags/default.asp

 

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

https://chatgpt.com/

 

REPL.IT

'repl.it'는 온라인 코드 편집 및 실행 환경을 제공하는 플랫폼으로, 인터넷에서 코딩을 설치 없이 손 쉽게 할 수 있는 도구.

https://replit.com/~

 

'[내일배움캠프] 프로덕트 디자인 8기 > TIL(Today I Learned)' 카테고리의 다른 글

[TIL] 24.12.11(수)  (0) 2024.12.11
[TIL] 24.12.10(화)  (0) 2024.12.10
[TIL] 24.12.05(목)  (2) 2024.12.05
[TIL] 24.12.04(수)  (0) 2024.12.04
[TIL] 24.12.03(화)  (2) 2024.12.03

'[내일배움캠프] 프로덕트 디자인 8기/TIL(Today I Learned)' Related Articles

티스토리툴바