웹개발 1주차 일지

최창수·2023년 2월 22일

웹개발

목록 보기

1/2

들어가기 앞서

웹 동작 개념

image 출처: sparta coding club
클라이언트의 브라우저는 서버의 API에게 미리 정의된 프로토콜대로 요청을 보낸다. 서버는 API를 통해 HTML파일이나 DB의 데이터를 보내고 브라우저는 이를 시각화 한다.
예를 들어 브라우저의 주소창에 "https://google.com/"을 입력하면 "google.com" 에 해당하는 ip주소를 가진 서버의 "/"라는 주소 API에 요청을 보내게 된다. 서버는 이에 따른 응답으로 구글 홈 페이지를 구성하는 HTML파일을 보내준다.
데이터 변화로 따라 실시간으로 브라우저 화면을 갱신 해야 할 경우, HTML파일이 아닌 DB의 데이터만 다시 받아온다.

Concept of HTML & CSS

HTML은 Hyper Text Markup Language의 약자이다. Markup Language란 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종을 말한다. 따라서 HTML은 hyper text 기능을 가진 문서로 이루어진 웹 사이트의 모습을 기술하는 언어이다.

CSS는 Cascading Style Sheet의 약자이다. 마크업 언어가 실제로 표시되는 방법을 기술하는 스타일 언어이며 레이아웃과 스타일을 정의할 때의 자유도가 높다. CSS는 HTML로 부터 스타일 요소를 분리하여 HTML을 더 구조중심적으로 만들기 위해 탄생하였다. 따라서 HTML은 전체적인 페이지의 구획, 구조를 결정하고 CSS는 세부적인 디자인을 결정한다고 보면 된다.

0. 유용한 단축키

코드정렬(가독성을 위해 중요하다)
- Windows: Shift + Alt + F
- macOS: Shift + Option + F
들여쓰기
- Tab
- 들여쓰기 취소 : Shift + Tab
주석/주석취소
- Windows: Ctrl + /
- macOS: command + /

1. 시작하기

VS Code에서 html파일을 만들고 html:5를 자동완성으로 입력하면 다음과 같이 뼈대가 바로 형성된다.

<!DOCTYPE html>
<html lang="en">
  <!-->Head에는 페이지의 속성정보가 들어간다.<-->
<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에는 페이지의 제목이 들어간다.<-->
    <title>Document</title>
</head>

  <!--> BODY는 실제로 웹 페이지에 표시될 내용들이 들어가는 곳이다.<-->
<body>
    
</body>
</html>

VS code에 live server 확장기능을 설치하고 편집기 화면을 우클릭하여 Open with Live Server를 클릭하면 웹 브라우저에 제목이 Documents인 빈 창이 생성된다.
body안에는 다양한 태그의 내용들이 들어가나 이를 모두 외우기는 어려우며 필요할 대 적절히 찾아 붙여넣는 것이 대부분이다.

중요한 태그들

div: 구역을 나타내는 태그이다.
p: 문단을 나타내는 태그이다.
위 두 태그는 구역을 나타내는 태그이므로 매우 중요하다.

h1,h2: 각각 제목과 소제목 태그.
h3~h6: 기타 제목 태그.
hr: 수평선을 넣는 태그.
span: 특정 문자열을 꾸밀 때 사용.
a: 하이퍼 링크 태그이다.
img: 이미지 태그이다.
input: 문자열이나 숫자등을 입력 가능한 입력창 태그.
button: 클릭 할 수 있는 버튼 태그.
textarea: 여러줄의 문장을 넣을 수 있는 입력창 태그.
위 태그들은 구역안에 들어가는 내용들을 나타내는 태그이다.

2. HTML & CSS 기본 사용

2-1. HTML: 기본 틀 형성

아래와 같은 모습의 페이지를 형성해본다.

먼저 head의 title에 '로그인 페이지'라고 입력하여 페이지 제목을 정한다.

<head>
    <meta charset="UTF-8">
    <title>로그인 페이지</title>
</head>

body에 실제로 표시할 내용들을 순차적으로 넣는다.
먼저 h1 태그로 제목을, input태그로 ID, PW 입력 부분을, button 태그로 로그인 버튼을 만든다. 문단p를 잘 이용하여 줄바꿈을 해준다.

<body>
    <h1>로그인 페이지</h1>
    <p>ID: <input type="text"/></p>
    <p>PW: <input type="text"/></p>
    <button>로그인하기</button>
</body>

p태그를 사용하지 않으면 이렇게 된다.

2-2. HTML로 구획 나누고 CSS로 꾸미기

CSS 기초

CSS를 이용해 이전에 만든 로그인 페이지를 다음과 같이 바꾸어 보자
CSS는 head 태그 안에 style태그를 만들어 그 안에서 작성한다. style태그 안에 class를 만들 때에는 반드시 아래의 형식을 준수한다.

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .mydiv{ ... }
    </style>
</head>

body의 tag들에 class를 적용시키려면 다음과 같이 작성한다:

...

<div class="myclass">...</div>

...

부모 자식구조

HTML 태그는 부모-자식 구조(태그 간의 포함관계로 이루어짐)를 띈다. 부모 태그가 변경되면 자식 태그의 내용물도 변경된다. 이를 유의하여 진행한다.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .mydiv{
            color: red ;
        }
    </style>
</head>
<body>
    <div class="mydiv">
        <p>가나다라마바사</p>
        <div>
            <p>hi</p>
        </div>
    </div>
</body>
</html>

BEFORE

AFTER

div1만 색을 변화 시켰는데, div2 의 색도 변한 것을 알 수 있다.

만약 어떤 특정 class를 가진 부모 요소 안의 자식 요소에 새로운 속성을 부여하고 싶다면, 다음과 같이 작성할 수 있다.

.[부모 class]>[자식 요소의 tag]{ ... }

예시:


...

    <style>
        .mydiv{
            color: red ;
            background-color: grey;
        }
        .mydiv>div{
            background-color: yellow;
        }
    </style>

...

<body>
    <div class="mydiv">
        <p>here div1</p>
        <div>
            <p>here div 1-1</p>
        </div>
    </div>
    <div>
        <p>here div2</p>
    </div>
</body>

...

자주 쓰이는 CSS

background-color: 배경 색 사용
background-image: 배경 이미지 사용
background-size: 배경 이미지 크기 조절

배경과 관련된 CSS들이다. 구획을 만들 때 처음에는 background-color로 색을 주어 변경사항을 알아보기 좋게 한다.

width: 너비
height: 높이

class의 사이즈와 관련된 CSS. 보통 px(픽셀)단위를 쓴다.

margin: class 바깥쪽으로의 여백
padding: class 안쪽 내용물과 경계 사이의 여백

간격을 조절하는 CSS. px(픽셀)단위를 쓴다. 위 방향부터 시계방향으로 입력.(위/오른쪽/왼쪽/아래)
한 방향만 입력해도 될 경우 margin-top과 같은 CSS를 사용할 수 있다.

border-radius: 구역의 모서리 둥글게 만들기(조정가능)
box-shadow: [x-offset] [y-offset] [그라데이션 길이] [그림자 크기] [색];

기타 이번 강의에서 쓰인 CSS들.

FLEX

구역 내의 요소들을 편리하게 정렬하기 위한 CSS묶음 이다. 부모요소의 class에 display: flex;를 적용하면 flex container가 되고 자식요소들은 Flext item이 된다. 컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 특정 형태로 배치되는 것이다. display: flex; 이후에 여러 CSS들로 그 형태를 지정한다. 대표적으로 다음과 같다.

flex-direction: column; (가로 정렬시 row)
은 item들이 정렬될 main axis를 결정한다. row는 가로로 정렬,cloumn은 세로로 정렬한다.

align-items: [center, flex-start,flex-end,baseline ...];
main axis와 수직 방향으로 정렬하는 방법을 결정한다. center는 flex container의 중앙선과 item들의 중앙선을 맞추고 flex-start는 시작점을 기준으로 정렬한다. baseline은 텍스트 기준선을 기준으로 정렬한다.

justify-content: [center, flex-start,flex-end,space-between ...];
main axis 방향으로 정렬할 때 어떤 방향으로 정렬할지 정한다. 워드 프로세서에서 문단의 가운데 맞춤/왼쪽 맞춤/양쪽 맞춤 등과 유사하다고 보면된다.

더 자세한 사항은 1분 코딩에서 확인할 수 있었다.

배경 이미지 넣기

background-image는 url([원하는 이미지 파일의 주소]) 을 통해 구역에 사용할 배경 이미지를 지정할 수 있다. 그러나 이 구문만 사용하면 이미지가 제대로 적용되지 않으므로 background-position, background-size구문을 사용하여 적절히 배경 이미지를 조정한다.

예시:

background-image: url('https://...');
background-position: center;
background-size: cover;

페이지 내용물을 가운데로 정렬하기

전체 내용을 감싸는 구역(div)를 만들고, 이 구역에 width를 주고 좌/우 margin을 auto로 지정한다.

	.wrap {
            width: 300px;
            margin: 20px auto 0px auto;
          }

예시:

구글 웹폰트 사용

구글 웹폰트를 통해 다앙햔 폰트들을 웹 페이지에 적용 가능하다.

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

둘러 보고 원하는 폰트를 클릭

원하는 폰트의 원하는 스타일을 추가하고 오른쪽 위의 동그라미 쳐진 곳을 클릭

이곳의 코드중 <style></style>태그 안에 묶인 내용을 html 파일의 <style></style>태그 안에 넣는다.

CSS rules to specify families탭의 코드를 원하는 class에 넣는다. 전체에 적용하고 싶을 경우 다음과 같이 작성한다.

	font-family: 'Noto Sans KR', sans-serif;
}

예시:

...
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap');
        .mydiv{
            color: red ;
            background-color: grey;
        }
        .mydiv>div{
            background-color: yellow;
        }
        *{
            font-family: 'Noto Sans KR', sans-serif;
        }
    </style>
</head>
<body>
    <div class="mydiv">
        <p>here div1</p>
        <div>
            <p>here div 1-1</p>
        </div>
    </div>
    <div>
        <p>here div2</p>
    </div>
</body>
...

폰트 적용 전/후:

마우스를 올리면 버튼이 반응하게 하기

특정 상황에서만 style을 적용하게 만들고 싶다면 다음과 같이 작성하면 된다.

.button:hover {...}

위와 같이 하면, 마우스를 버튼 위에 hover 하였을 때 새로운 스타일이 적용된다.

CSS 파일 분리

style 부분이 너무 길어지면 가독성도 떨어지고, css자체가 html로부터 style을 분리하기 위해 등장한 만큼 이 부분 외부 파일로 분리하여 저장할 수 있다.
html파일과 같은 위치의 디렉토리에 style.css 파일을 만들고, <style></style>태그안의 내용을 입력한다. html파일의 head 태그에서 이를 불러오기 위한 구문은 다음과 같다:

<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

3. 부트스트랩 사용해서 페이지 꾸미기

부트스트랩은 이미 완성된 CSS 모음이다. 빠르게 보기 좋은 웹페이지를 만드는데 사용할 수 있다. CSS파일 분리의 경우와 마찬가지로 html 문서 외부의 CSS파일을 불러오는 것이라 볼 수 있으나 차이는 그 파일이 웹에 존재한다는 것이다. 이를 불러오기 위한 html은 다음과 같다.

<!-->boot strap css 위치<-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-->자바 스크립트 라이브러리 도입<-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

이후 부트 스트랩 문서 사이트에 접속하여 Forms나 Components에 있는 여러 요소들의 코드를 복사하여 적절히 수정하여 사용하면 된다.

예시: Card 넣기

이미지와 텍스트로 이루어진 카드 리스트를 4열종대로 정렬해서 페이지에 넣고싶다.

부트스트랩 문서에서 components의 card 중 적절한 것을 선택해 코드를 복사하자.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  
  ...
  
</div>