TIL/Web(frontend)

TIL 2024-09-03 (Web - 1주차)

myoma 2024. 9. 3. 17:35

Web - 1주차.

 

  • 웹의 동작 개념 - 브라우저의 역할은 1. 요청을 보내고 2. 받은 HTML 파일을 그려주는 것.

브라우저는 그려주는 역할인데, 흔히 우리가 보는 웹 페이지는 준비되어있는 것을 받아서 브라우저가 우리가 볼 수 있게 그려주는 역할을 한다고 생각하면 쉽게 이해할 수 있다.

 

우리가 보는 브라우저는 주소를 통해 API를 요청을 보내고, API는 요청에 맞는 HTML파일 돌려주고 브라우저 받은 것을 화면에 그려준다.

 

 

 

그렇다면 항상 HTML 파일로 돌려준다고 한다면 아니다.

데이터만 내려줄 때가 더 많다고 하며 실제로는 웹 서비스에서는 API요청을 보내면 서버의 데이터베이스에서 데이터를 돌려주고, 브라우저에서 javascript라는 언어에서 갈아 끼워준다.

 

(JSON에 대해서는 나중에 알아보자.)

 

 

Web (HTML, CSS)

 

  • HTML : Web의 뼈대를 잡아주는 역할을 한다.
  • CSS : 뼈대를 예쁘게 꾸며주는 역할을 한다.

Web은 디자인적인 요소가 필요하기에 CSS를 잘 사용한다고해서 '예쁘게' 꾸미는 능력과는 별개이다.

 

먼저 HTML의 기본 뼈대를 보자.

html:5

 

HTML의 기본 뼈대를 만들어준다.

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

 

title 사이와 body 사이에 글자를 넣으면 어떤 식으로 결과가 바뀌는 지 확인해보면,

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyomaWeb</title>
</head>
<body>
    
</body>
</html>

<title>MyomaWeb</title>이라고 변경하면

MyomaWeb이라고 바뀐 것을 확인할 수 있으며 body안에 들어가는 것들을 한 번에 정리한 코드를 보며 외우지말고 이해를 하자.

 

실제로 스스로 어떤 식으로 쓰는 지만 알고 외울 필요없이 필요할 때 검색 또는 자신이 찾아 쓸 수 있는 것이 더 좋다고 한다.

 

<!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>
    <!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
    <hr>
    span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    <hr>
    a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

</html>

 

위 코드를 실행하여 브라우저를 켜보면,

 

위 브라우저와 코드를 같이 보며 어떤 식으로 사용하는 지 이해하고 넘어가자.

 

아래 코드를 풀며 기억나지 않는 부분은 하나씩 찾아가며 해도 큰 문제가 되지 않는다.

그리고 코드를 계속 불러오며 코드를 작성하다보면 정렬이 헷갈릴 수 있으며 코드에선 정렬이 매우 중요하므로 정렬하는 방법을 알아두면 큰 도움이 된다.

 

  • VScode 프로그램에서 shift+option+f(Mac) 로 자동 정렬이 가능하고 shift+alt+f(Window) 가능하다.

 

간단한 로그인 페이지를 만들며 하나씩 알아보자.

결과 사진

위 와 같은 로그인 페이지를 만들 것인데 위에 body 안에 들어가는 코드들을 보며 풀어보면,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>로그인 페이지</h1>
    <p>ID : <input type="text" /></p>
    <p>PW : <input type="text" /></p>
    <p><button>로그인하기</button></p>
</body>
</html>

 

<h1>은 페이지의 제목을 나태나는 것이고, input 태그를 복사해서 2개 붙인 다음 각각 ID, PW를 적어주면 된다.

 

이때 각 코드에 <p></p>가 있는 것을 볼 수 있는데 쓰는 이유는, <p></p>를 붙이지 않으면 결과 사진처럼 나오지 않고 ID, PW, button 같은 줄로 나오는 것을 확인할 수 있다.

 

하지만 우리는 같은 줄에 나오는 것을 원하지 않기에 <p></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>
    <style>
        .mytitle {
            width:300px;
            height:200px;

            color: white;
            text-align: center;

            padding-top: 30px;
            border-radius: 8px;

            background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-position: center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="mytitle">
        <h1>로그인 페이지</h1>
        <h5>아이디, 비밀번호를 입력해주세요</h5>
    </div>
    <p>ID : <input type="text" /></p>
    <p>PW : <input type="text" /></p>
    <button>로그인하기</button>
</body>
</html>

 

나는 맨 처음 먼저 body부터 작성하고 확인하는 것이 좀 더 이해하기 쉽기에 body부터 확인한다.

 

맨 처음 작성한 로그인 페이지랑 body부분은 크게 차이가 없다.

 

추가된 코드는 <div>, class 이 두개가 추가 되었는데,

 

<div>...</div> 사이의 코드는 하나로 묶어준다고 생각하면 되고, class는 코드의 명칭을 만들어주어 디자인할 수 있도록 하게한다.

 

class = "mytitle" 을 볼 수 있는데, head 부분으로 넘어가면 <style>이 추가되어있는 것을 확인할 수 있고 <style> 안에서 이제 디자인을 꾸며주는 것이다.

 

 우리가 원하는 건 기존 로그인 페이지에서 사진과 글자를 추가하는 것 이기에 .mytitle {} 을 작성하면 <div class:"mytitle">을 디자인 할 수 있는 것이다.

 

코드는 모두 간단한 영어로 되어있기에 이해하는데 큰 어려움은 없었다.

 

용어가 정리된 사진을 보면 더욱 알기 쉽다.

 

이미지는 강의에 제공되는 url을 통해 가져온 것이다.

위 코드에서 알아둬야 할 건, border-radius, padding-top 이 2가지 인데,

border-radius는 모서리를 얼마나 둥글게 할 것 인지를 정하는 것이고

padding Object 내의 내부 여백이다.

간격을 조절하는 코드는 margin도 있는데,

margin은 Object와 화면과의 여백(외부여백)이다.

 

위 로그인 페이지가 왼 쪽으로 치우쳐져 보기 불편하기 때문에 가운데로 옮길 수 있는데,

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .mytitle {
            
            width: 300px;

            border-radius: 10px;
            color: white;
			
            text-align: center;
			
            padding: 30px 0px 0px 0px;

            background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-position: center;
            background-size: cover;
        }
        .wrap {
            width: 300px;
            margin: 20px auto 0px auto;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="mytitle">
            <h1>로그인 페이지</h1>
            <h5>아이디, 비밀번호를 입력하세요</h5>
        </div>
        <p>ID : <input type="text" /></p>
        <p>PW : <input type="text" /></p>
        <button>로그인하기</button>
    </div>
</body>

</html>

 

우리가 만든 것들을 전체로 하나로 묶어서 옮겨줘야 하기 때문에 <div></div>로 묶어주고 명칭을 class : "wrap"으로 해준 것을 볼 수 있다.

 

그리고 <style></style>에 .wrap {...} 을 보면, width로 300px만큼 보내고 margin을 통해 외부 여백을 조절하는데 적힌 순서대로 시계방향으로 위 오른쪽 아래 왼쪽 이렇게 적으면 된다.

 

auto는 끝까지 채운다는 의미이고 그것이 아니라면 픽셀로 조절한다.

 

 

폰트도 내가 원하는 폰트로 변경할 수 있는데

우리는 구글폰트를 이용할 것이다.

https://fonts.google.com/?subset=korean

 

위 링크를 통해 들어가 원하는 폰트를 고르면 되는데 이건 크게 어렵지 않기 때문에 사진으로 전부 대처하겠다.

 

 

위 방법으로 원하는 폰트를 찾고 적용 시키면 코드를 작성하면,

 

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Myomaweb</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Jua&family=Nanum+Pen+Script&display=swap');

        * {
            font-family: "Jua", sans-serif;
        }    
    </style>
</head>

 

이렇게 적용시키면 된다.

 

 

마지막으로 우리는 [부트스트랩]에 대해서 알아볼 건데,

 

부트스트랩은 이미 만들어진 디자인의 코드를 가져와 사용하는 것이다.

 

쉽게 말하면 복사 붙여넣기를 하면 내 코드에 내가 원하는 디자인을 넣을 수 있다.

 

먼저 부트스트랩을 사용하려면 <head> <title> 안에 코드를 작성해야한다.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

 

아래 코드를 복붙하여 넣은 다음 부트스트랩 사이트로 들어가 원하는 디자인의 코드를 가져와 사용하면 된다.

 

프로젝트1, 2는 지금까지 배운 내용의 복습과 매우 유사하여 굳이 TIL엔 적지 않지만, 언젠가 따로 작성할 것 같다.

'TIL > Web(frontend)' 카테고리의 다른 글

TIL 2024-09-10 (Web - 5주차 Firebase)  (2) 2024.09.10
TIL 2024-09-09 (Web - 4주차 Firebase)  (0) 2024.09.09
TIL 2024-09-06 (Web - 3주차 HomeWork)  (4) 2024.09.06
TIL 2024-09-05 (Web - 3주차)  (1) 2024.09.05
TIL 2024-09-04 (Web - 2주차)  (8) 2024.09.04

'TIL/Web(frontend)'의 다른글

  • 현재글TIL 2024-09-03 (Web - 1주차)

관련글

티스토리툴바